/* ============================================================================
   /own-your-memory (sub page system v1.1, 9 Oct 2026). Linked from the PageStyles placeholder,
   so it loads AFTER sub.css: a rule of the same weight here wins. Tokens only; every rule under .sp.

   THE LIVE FIGURE (the header's): .live.oym-live[data-s] with two moments, drawn here from data-s.
     0 Rented: six functions in dashed frames, each with the vendor that holds its memory; the
       layer underneath is only an outline.
     1 Owned: the frames close, the vendor lines are struck through, the six settle onto the layer,
       which is framed in ink and lit (the orange square: the state the page argues for).
   sub.js sets data-s (tabs, autoplay while visible, Pause). Without JavaScript and with reduced
   motion it rests on 1 (data-rest), and every word of both moments stays on the page.
   The page draws the idea ONCE (founder, 9 Oct 2026): the still FIG. 01 of chapter 01, the same
   lease and deed again, is gone with its rules.
   ============================================================================ */

/* ---- the copy ---- */
.sp .oym-mu { display: block; color: var(--lp-muted); }
.sp .oym-st .ln { display: block; color: var(--lp-muted); }
.sp .oym-st .ln.is-own { color: var(--lp-ink); }

/* ---- the header's live figure ---- */
.sp .oym-fig .fig-top { flex-wrap: wrap; row-gap: 4px; }
.sp .oym-bar { color: var(--lp-muted); }
.sp .oym-c { position: relative; }
.sp .oym-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp .oym-g li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 12px; border: 1px dashed var(--lp-rule-2); background: var(--lp-paper-2); transition: border-color .4s ease, background-color .4s ease, transform .6s var(--dl-ease); }
.sp .oym-fn { font: 600 15px/1.25 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink-2); overflow-wrap: anywhere; transition: color .4s ease; }
.sp .oym-vd { color: var(--lp-muted); overflow-wrap: anywhere; text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color .3s ease; }
/* "consolidates": a short line with a chevron pointing at the layer */
.sp .oym-consol { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 12px; color: var(--lp-muted); transition: color .4s ease; }
.sp .oym-consol::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: none; }
.sp .oym-base { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1px dashed var(--lp-rule-2); font: 600 16px/1.35 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-muted); transition: border-color .4s ease, color .4s ease; }
.sp .oym-base::before { content: ""; width: 10px; height: 10px; background: var(--lp-dot-off); flex: none; transition: background-color .4s ease .2s; }
/* moment 1: Owned */
.sp .oym-live[data-s="1"] .oym-g li { border-style: solid; border-color: var(--lp-ink); background: var(--lp-paper); transform: translateY(6px); }
.sp .oym-live[data-s="1"] .oym-g li:nth-child(2) { transition-delay: .06s; }
.sp .oym-live[data-s="1"] .oym-g li:nth-child(3) { transition-delay: .12s; }
.sp .oym-live[data-s="1"] .oym-g li:nth-child(4) { transition-delay: .18s; }
.sp .oym-live[data-s="1"] .oym-g li:nth-child(5) { transition-delay: .24s; }
.sp .oym-live[data-s="1"] .oym-g li:nth-child(6) { transition-delay: .30s; }
.sp .oym-live[data-s="1"] .oym-fn { color: var(--lp-ink); }
.sp .oym-live[data-s="1"] .oym-vd { text-decoration-color: var(--lp-muted); }
.sp .oym-live[data-s="1"] .oym-consol { color: var(--lp-accent-text); transition-delay: .5s; }
.sp .oym-live[data-s="1"] .oym-base { border: 2px solid var(--lp-ink); padding: 11px 15px; color: var(--lp-ink); transition-delay: .7s; }
.sp .oym-live[data-s="1"] .oym-base::before { background: var(--lp-accent); transition-delay: .9s; }
/* a jump back to moment 0 (sub.js .reset): no travelling */
.sp .oym-live.reset, .sp .oym-live.reset * { transition: none !important; }
.sp .oym-live .live-steps .ls-x { font-size: 16px; }

/* ---- 02 every function: the runs, the last one across the row ---- */
.sp .oym-fns li.is-more { flex-basis: 100%; }
.sp .oym-fns li.is-more b { color: var(--lp-ink-2); font-weight: 500; }
.sp .oym-fns li { flex-basis: 50%; }
.sp .oym-fns b { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

@media (min-width: 600px) {
  .sp .oym-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp .oym-fns li { flex-basis: 33.333%; }
}
@media (min-width: 1180px) {
  .sp .oym-g li { min-height: 72px; padding: 12px 14px; }
  .sp .oym-fn { font-size: 16px; }
  .sp .oym-base { font-size: 17px; min-height: 64px; }
}