/* Rely Health — the ownership split.
   Pairs with lib/blocks/splitowner.mjs. A page using the `ownershipSplit`
   block must declare "/assets/splitowner.css" in its `styles` array, the same
   way /how-rely-works declares caserecord.css.

   OWNED BY THIS FILE: everything prefixed `.so-` plus the `.sec-splitowner`
   scope. NOT owned by this file and never defined here: `.sec-deep`,
   `.mono-label`, `.h-split` and `.deep-panel`. Those are shared primitives from
   AMIGO_PATTERNS.md and they live in assets/site.css. This file only consumes
   them, and only through the tokens `.sec-deep` re-points, so the whole block
   inverts without knowing anything about the deep palette.

   MOTION CONTRACT (AMIGO_PATTERNS.md, "Motion rules"), honoured without
   exception:
     * The figure is COMPLETE AT REST. Nothing here hides anything. The rewind
       rules below are all scoped under `.motion-pending`, which assets/motion.js
       applies only after it has confirmed motion is allowed. JavaScript off,
       blocked or broken means the drawing is simply finished.
     * Transform, opacity and stroke-dashoffset only. No width, height, top or
       left, so nothing in this file can move layout.
     * The one loop is 22s, linear, peak alpha .085, and it is opted into under
       `prefers-reduced-motion: no-preference` rather than opted out of, so a
       reduce preference, an unsupported query and print all resolve to the same
       still frame.
     * site.css line 1026 blanket-kills animation-duration under reduce. A loop
       left running under that rule would snap between frames, which is worse
       than no loop. The hard guards at the bottom of this file remove it
       outright rather than shortening it.

   COLOUR. Three layer keys, and not one new hex among them. They reuse the
   actor colours the casepath figure already taught the reader (assets/motion.css:
   --ok for the customer's licensed team, --brand for Rely, a neutral for
   everything shared), which means the block inherits whatever `.sec-deep` and
   `.deep-panel` have re-pointed those to and would still be legible if it were
   ever dropped on paper ground.

   CONTRAST, measured against --deep #211e1a and --deep-panel #2c2822 with the
   deep-ground accent values site.css sets inside `.sec-deep`:
     --deep-ink-0 #f5f2ec on either            > 15:1   (SVG labels, titles)
     --deep-ink   #b9b3a8 on --deep-panel      7.0:1    (body copy, boundary rule)
     --deep-ink-2 #a49d92 on --deep-panel      5.4:1    (fine print, legend)
     --ok         #7ec6a0 on --deep            8.3:1    (your-layer swatch, marks)
     --brand      #93a9ea on --deep            7.2:1    (Rely-layer swatch, strata)
   Strata are drawn at .62 alpha, which lands the blended stroke above the 3:1
   floor for a graphical object. The band hatch is deliberately below that: it
   is a fill texture, and nothing is understood from it that the two boundary
   rules do not say louder.
*/

.sec-splitowner{
  /* Layer keys. Local to this block; nothing else on the site reads them, and
     every one of them is an existing token rather than a new colour. */
  --so-you:var(--ok);            /* the customer's side. --ok is already the
                                    casepath key for the licensed team */
  --so-joint:var(--ink-2);       /* the agreed seam. Neutral on purpose, because
                                    it belongs to neither side, but bright enough
                                    that the left spine stays continuous */
  --so-rely:var(--brand);        /* Rely's side */
}
.so-col-you,.so-key-you,.so-band-you{--so-c:var(--so-you)}
.so-col-joint,.so-key-joint,.so-band-joint{--so-c:var(--so-joint)}
.so-col-rely,.so-key-rely,.so-band-rely{--so-c:var(--so-rely)}

.so-head{max-width:72ch}
.so-eyebrow{margin:0 0 .9rem}
.so-head .lede{max-width:64ch}

/* ============================================================
   1 · Shell
   Below 960px the figure sits above the columns at its natural portrait
   size. It is never hidden: the drawing was made portrait precisely so a
   320px screen renders it at 0.88 scale rather than a third.
   ============================================================ */
.so-grid{display:grid;gap:clamp(2rem,4.4vw,3rem)}

@media (min-width:961px){
  .so-grid{
    grid-template-columns:minmax(240px,300px) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
}

/* The figure holds still while the three panels scroll past it, so each panel
   can be read against its own band. Gated on viewport height as well as width:
   a figure taller than the space it is sticking in is worse than one that
   scrolls away. */
@media (min-width:961px) and (min-height:780px){
  .so-fig{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}

.so-fig{margin:0;min-width:0}
.so-stage{max-width:320px;margin-inline:auto}
.so-svg{display:block;width:100%;height:auto}

/* ============================================================
   2 · The drawing
   ============================================================ */
.so-ground{fill:var(--surface)}

/* Top layer lightest, seam hatched, operating layer deepest. A section cut
   reads from the surface down. */
.so-band-you .so-fill{fill:#fff;opacity:.06}
.so-band-joint .so-fill{fill:#fff;opacity:.028}
.so-band-rely .so-fill{fill:#000;opacity:.16}

.so-strip{fill:var(--so-c);opacity:.17}
.so-edge{fill:var(--so-c)}
/* Defines the block as one object. Without it the deepest band and the section
   ground behind it are within a few percent of each other and the stack loses
   its bottom edge. */
.so-outline{fill:none;stroke:var(--line);stroke-width:1}

.so-lab{
  font-family:var(--mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:13px;font-weight:600;letter-spacing:.13em;
  fill:var(--ink);
}

.so-mark{stroke:var(--so-c);stroke-width:3.5;stroke-linecap:round;opacity:.6;fill:none}

.so-hatch-line{stroke:var(--so-joint);stroke-width:1;opacity:.42}

.so-strat{stroke:var(--so-rely);stroke-width:1.2;stroke-linecap:round;opacity:.62;fill:none}
/* Dashed is the qualifier drawn. Navigator work exists only where a program
   includes it, so its strata are the ones that are not continuous. */
.so-strat-nav{stroke-dasharray:5 6}
/* Neutral and faint on purpose. It separates two kinds of stratum; it is not
   a third boundary and must never compete with the two that are. */
.so-divide{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 4;opacity:.3;fill:none}

/* The two most insistent marks in the figure, because "the boundary is
   explicit" is the whole argument. Everything else in the drawing is 1.4px or
   thinner and dimmer. The stitching is what turns a line between two fills
   into a joint somebody made. */
.so-rule{stroke:var(--ink-2);stroke-width:2;opacity:.9;fill:none}
.so-stitch path{stroke:var(--ink-2);stroke-width:1;opacity:.5;fill:none}

/* Ambient. A slow pass of light down the operating layer, and only down that
   layer: the layer the customer decides does not move, because it does not.
   Opted in, never opted out of. The travel range is set inline by the block
   from the band's own geometry, so the drawing and the keyframe cannot drift
   apart. */
.so-scan{display:none}
@media (prefers-reduced-motion:no-preference){
  .so-scan{display:block;animation:so-scan 22s linear infinite}
}
@keyframes so-scan{
  from{transform:translateY(var(--s0,0px))}
  to{transform:translateY(var(--s1,0px))}
}

/* Arrival. Scoped entirely under .motion-pending, which only ever exists when
   assets/motion.js has confirmed motion is allowed. */
.so-stage.motion-pending{opacity:1;transform:none;transition:none}
.so-stage.motion-pending .so-band{opacity:0;transition:opacity 420ms var(--ease) var(--d,0ms)}
.so-stage.motion-pending.is-in .so-band{opacity:1}
.so-stage.motion-pending .so-rule{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 560ms var(--ease) var(--d,0ms);
}
.so-stage.motion-pending.is-in .so-rule{stroke-dashoffset:0}
.so-stage.motion-pending .so-stitch{opacity:0;transition:opacity 300ms var(--ease) var(--d,0ms)}
.so-stage.motion-pending.is-in .so-stitch{opacity:1}

/* ============================================================
   3 · Legend
   ============================================================ */
.so-caption{margin-top:1.4rem}
.so-key{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.so-key li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:start}
.so-key-sw{
  flex:none;width:.85rem;height:.85rem;border-radius:4px;
  margin-top:.34em;background:var(--so-c);
}
.so-key-t{font-size:var(--t--1);line-height:1.5;color:var(--ink-3);overflow-wrap:break-word}
.so-key-t b{display:block;color:var(--ink);font-weight:800}
.so-fignote{
  margin:1rem 0 0;font-size:var(--t--2);line-height:1.6;color:var(--ink-3);
  padding-top:.85rem;border-top:1px solid var(--line);
}

/* ============================================================
   4 · The three columns
   .deep-panel supplies the fill, the border, the radius and the padding.
   Nothing here restates any of them.
   ============================================================ */
.so-cols{display:grid;gap:1rem}
.so-col{min-width:0}

.so-col-key{margin:0 0 .6rem;display:flex;align-items:center;gap:.65rem}
.so-col-key::before{content:"";flex:none;width:1.5rem;height:3px;border-radius:3px;background:var(--so-c)}

.so-col-title{font-size:1.25rem;margin:0 0 .4rem;color:var(--ink)}
.so-col-lede{margin:0 0 1.15rem;color:var(--ink-2);max-width:62ch}

.so-list{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.so-list li{
  position:relative;padding-left:1.3rem;
  font-size:var(--t--1);line-height:1.55;color:var(--ink-2);
  overflow-wrap:break-word;
}
.so-list li::before{
  content:"";position:absolute;left:0;top:.56em;
  width:7px;height:7px;border-radius:2px;background:var(--so-c);opacity:.9;
}

.so-col-foot{
  margin:1.2rem 0 0;padding-top:.95rem;
  border-top:1px solid var(--line);
  font-size:var(--t--2);line-height:1.65;color:var(--ink-3);
  max-width:70ch;
}

/* Wide panels can take two item columns without the measure getting long. */
@media (min-width:1080px){
  .so-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
}

.so-note{max-width:78ch}

/* ============================================================
   5 · Hard guards
   Independent of assets/motion.js. These cover the preference flipping while
   a class is already applied, printing, and a script that dies between
   marking the stage and revealing it. Every rule resolves to the finished
   frame, and the finished frame is the one the figure rests in anyway.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .so-scan{display:none !important;animation:none !important}
  .so-stage.motion-pending .so-band,
  .so-stage.motion-pending.is-in .so-band,
  .so-stage.motion-pending .so-stitch,
  .so-stage.motion-pending.is-in .so-stitch{opacity:1 !important;transition:none !important}
  .so-stage.motion-pending .so-rule,
  .so-stage.motion-pending.is-in .so-rule{
    stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important;
  }
}

@media print{
  .so-scan{display:none !important;animation:none !important}
  .so-fig{position:static !important}
  .so-stage.motion-pending .so-band,
  .so-stage.motion-pending .so-stitch{opacity:1 !important}
  .so-stage.motion-pending .so-rule{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}