/* ============================================================================
   /organizational-memory (sub page system v1.1, 9 Oct 2026): a plain page, no instrument.
   Linked from the PageStyles placeholder, so it loads AFTER sub.css: a rule of the same weight
   here wins. Tokens only (no hex outside tos-site.css); every rule under .sp.
   FIG. 01, the stack: an <ol> of four layers, drawn still. On a phone the layers are cards
   (the old page's phone cards); from 760px each is a band of the stack with its key in the
   margin and its description at the far end. The connections between layers are two dashed
   lines, drawn by the layer below; the ones touching the memory layer are orange (it is the
   one this page is about), the rest are rule. The memory layer is framed in ink and carries
   the maker's record tag.
   ============================================================================ */

/* ---- the copy ---- */
.sp .om-mu { display: block; color: var(--lp-muted); }
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }

/* ---- 01 the definition: the citable block ---- */
.sp .om-def p.om-term { margin-top: 6px; font: 600 clamp(22px, 6vw, 30px)/1.2 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); }
.sp .om-def #omCiteText { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-rule); }
.sp .om-def p.om-def-x { margin-top: 0; font-size: 17px; line-height: 1.6; color: var(--lp-ink); }
.sp .om-def p.om-def-x + .om-def-x { margin-top: 14px; }
.sp .om-def p.om-def-x.is-layer { color: var(--lp-ink-2); }
.sp .om-def p.om-def-attr { margin-top: 16px; font: 450 12px/1.6 var(--tos-font-mono); color: var(--lp-muted); overflow-wrap: anywhere; }
.sp .om-def .om-cite { margin-top: 20px; }
.sp .om-def .om-cite .btn { min-width: 0; }

/* ---- 02 the stack ---- */
.sp .om-stack { margin-top: 4px; }
.sp .om-l { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: baseline; padding: 14px 16px 16px; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); }
.sp .om-l + .om-l { margin-top: 30px; }
.sp .om-k { grid-row: 1 / 4; color: var(--lp-muted); font-weight: 600; }
.sp .om-t { grid-column: 2; font: 600 18px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp .om-d { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
.sp .om-by { grid-column: 2; display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--lp-ink); font-weight: 600; }
.sp .om-by::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }
/* the memory layer: framed in ink, its key in the accent's text colour */
.sp .om-l.is-us { border: 2px solid var(--lp-ink); }
.sp .om-l.is-us .om-k { color: var(--lp-accent-text); }
/* the connections: two dashed lines from the layer above, drawn by the layer below */
.sp .om-l + .om-l::before,
.sp .om-l + .om-l::after { content: ""; position: absolute; bottom: 100%; height: 30px; border-inline-start: 2px dashed var(--lp-rule-2); }
.sp .om-l + .om-l::before { inset-inline-start: 30%; }
.sp .om-l + .om-l::after { inset-inline-start: 70%; }
.sp .om-l.is-us::before, .sp .om-l.is-us::after,
.sp .om-l.is-l0::before, .sp .om-l.is-l0::after { border-inline-start-color: var(--lp-accent); }
.sp .om-l.is-us::before, .sp .om-l.is-us::after { margin-bottom: 1px; }

/* ---- 04 provenance: the papers as rows ---- */
.sp .om-papers .list-tag { margin-bottom: 10px; }
.sp .om-papers .lk-x { font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); overflow-wrap: anywhere; }

@media (min-width: 760px) {
  .sp .om-l { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 20px; align-items: center; min-height: 84px; padding: 18px 28px; }
  .sp .om-l + .om-l { margin-top: 40px; }
  .sp .om-l + .om-l::before, .sp .om-l + .om-l::after { height: 40px; }
  .sp .om-l + .om-l::before { inset-inline-start: 35%; }
  .sp .om-l + .om-l::after { inset-inline-start: 65%; }
  .sp .om-k { grid-row: auto; font-size: 13px; }
  .sp .om-t { grid-column: 2; font-size: 20px; }
  .sp .om-d { grid-column: 3; text-align: end; color: var(--lp-muted); }
  .sp .om-by { grid-column: 4; margin-top: 0; }
  .sp .om-l.is-us { min-height: 104px; }
  .sp .om-l:not(.is-us) .om-d { grid-column: 3 / span 2; }
}
@media (min-width: 1180px) {
  .sp .om-def { padding: 28px 32px; }
  .sp .om-def p.om-def-x { font-size: 18px; }
  .sp .om-l { padding: 22px 32px; }
  .sp .om-t { font-size: 22px; }
  .sp .om-d { font-size: 16px; }
}