/* ============================================================================
   CASE STUDIES on the sub page system (9 Oct 2026): /case-studies (use-cases.aspx) and the
   seven /case-studies/{slug} (use-case.aspx). No instrument: the system's header, chapters,
   cards and ledger, plus two things of their own:
   - the index: the industries as a record list beside the title, the cases as cards, the
     reader's own industry as the open seat (its record in orange: it needs the reader);
   - each case's diagram, redrawn as an HTML figure (real text: 12px and up at every width,
     it wraps in German and mirrors in Arabic) in four shapes: flow (a sequence), band (moments
     over one memory), hub (functions round one memory), many (rented tools into one owned
     memory). Drawn from 981px; below that the same figure shows its cards, as before (the
   figure's tag and caption on every width).
   Loaded after sub.css (PageStyles). Tokens only, every rule under .sp.uc, logical properties.
   ============================================================================ */

/* ---- index: the industries beside the title ---- */
@media (max-width: 1179px) { .sp.uc .uc-idx { margin-top: 36px; } }
.sp.uc .uc-idx .links a { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: baseline; min-height: 48px; padding: 12px 0; }
.sp.uc .uc-idx .lk-k { grid-row: auto; padding-top: 0; color: var(--lp-muted); }
.sp.uc .uc-idx .lk-t { grid-column: 2; }
.sp.uc .uc-idx .is-you .lk-k { color: var(--lp-accent-text); font-weight: 600; }
.sp.uc .uc-idx .note { margin-top: 12px; }
.sp.uc .stamp span { min-width: 0; }

/* ---- index: the cases ---- */
.sp.uc .uc-grid { padding-top: 40px; }
.sp.uc .uc-cards > li { display: flex; }
.sp.uc .uc-cards .card { display: flex; flex-direction: column; width: 100%; }
.sp.uc .uc-cards h2 { margin-top: 8px; font: 600 21px/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); text-wrap: balance; }
.sp.uc a.card h2 { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .15s; }
.sp.uc a.card:hover h2, .sp.uc a.card:focus-visible h2 { text-decoration-color: var(--lp-accent); }
.sp.uc .uc-cards .uc-caps { margin-top: 12px; color: var(--lp-muted); }
.sp.uc .uc-go { align-self: flex-start; display: inline-flex; align-items: center; margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 600; color: var(--lp-ink); }
.sp.uc .uc-go::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 10px; }
[dir="rtl"] .sp.uc .uc-go::after { transform: rotate(-135deg); }
.sp.uc .uc-soon { margin-top: auto; padding-top: 18px; color: var(--lp-muted); }
.sp.uc .card.is-soon h2, .sp.uc .card.is-soon p { color: var(--lp-muted); }

/* ---- the closing statement (index and every case) ---- */
.sp.uc .uc-st { font: 600 clamp(28px, 7vw, 40px)/1.12 var(--tos-font-body); letter-spacing: -.03em; color: var(--lp-ink); text-wrap: balance; }
.sp.uc .uc-st span { display: block; }
.sp.uc .uc-st span + span { color: var(--lp-ink-2); }
.sp.uc .uc-end .cta { margin-top: 28px; }
.sp.uc .uc-end .more { margin-top: 20px; }
/* "All case studies" goes back: its chevron leads and points back */
.sp.uc .more.is-back a::after { display: none; }
.sp.uc .more.is-back a::before { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(-135deg); margin-inline-start: 2px; margin-inline-end: 10px; }
[dir="rtl"] .sp.uc .more.is-back a::before { transform: rotate(45deg); }

/* ---- a case: its diagram ---- */
.sp.uc .uc-dg { display: none; margin-top: 8px; }
.sp.uc .uc-dgc + .fig-cap { margin-top: 16px; }
.sp.uc .uc-dg ol, .sp.uc .uc-dg ul { margin: 0; padding: 0; list-style: none; }
.sp.uc .uc-n { position: relative; z-index: 1; min-width: 0; padding: 14px 16px 15px; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); }
.sp.uc .uc-n b { display: block; font: 600 15px/1.3 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); overflow-wrap: anywhere; }
.sp.uc .uc-n .rec { display: block; margin-top: 4px; color: var(--lp-muted); overflow-wrap: anywhere; }
html[lang^="de"] .sp.uc .uc-n b { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* the memory: drawn in ink, twice the line; the moment that waits for a person: the orange square */
.sp.uc .uc-n.is-mem { border: 2px solid var(--lp-ink); }
.sp.uc .uc-n.is-mem b { font-size: 17px; }
.sp.uc .uc-n.is-act b { display: flex; align-items: baseline; gap: 8px; }
.sp.uc .uc-n.is-act b::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }
.sp.uc .uc-n.is-dim { background: var(--lp-paper-2); border-color: var(--lp-rule); padding: 11px 14px; }
.sp.uc .uc-n.is-dim b { font-size: 14px; font-weight: 500; color: var(--lp-ink-2); }
.sp.uc .uc-dgk { margin-top: 14px; color: var(--lp-muted); }

@media (min-width: 981px) {
  .sp.uc .uc-dg { display: block; padding-block: 12px 4px; }
  .sp.uc .uc-dgc { display: none; }

  /* flow: one step after another, a dotted line and a head between each */
  .sp.uc .is-flow ol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .9fr); column-gap: 64px; align-items: stretch; }
  .sp.uc .is-flow li + li::before { content: ""; position: absolute; top: 50%; inset-inline-end: calc(100% + 12px); width: 42px; border-top: 2px dotted var(--lp-accent); }
  .sp.uc .is-flow li + li::after { content: ""; position: absolute; top: 50%; inset-inline-end: calc(100% + 2px); margin-top: -5px; border-block: 5px solid transparent; border-inline-start: 8px solid var(--lp-muted); }

  /* band: three moments over the one memory, each with its line down into it */
  .sp.uc .is-band ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 64px; }
  .sp.uc .is-band li:not(.is-mem) { justify-self: center; width: min(100%, 300px); text-align: center; }
  .sp.uc .is-band li:not(.is-mem)::after { content: ""; position: absolute; top: calc(100% + 1px); inset-inline-start: 50%; height: 63px; border-inline-start: 2px dotted var(--lp-accent); }
  .sp.uc .is-band .is-mem { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 24px; }
  .sp.uc .is-band .is-mem .rec { margin-top: 0; text-align: end; }

  /* hub: every function round the one memory, a line from each to the centre */
  .sp.uc .is-hub { position: relative; }
  .sp.uc .is-hub .uc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .sp.uc .is-hub .uc-lines line { stroke: var(--lp-accent); stroke-width: 2px; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
  .sp.uc .is-hub ul { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr) minmax(0, 1.3fr) minmax(0, .5fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(84px, auto)); }
  .sp.uc .is-hub li { align-self: center; text-align: center; }
  .sp.uc .is-hub .p-1 { grid-area: 1 / 1; } .sp.uc .is-hub .p-2 { grid-area: 1 / 5; }
  .sp.uc .is-hub .p-3 { grid-area: 2 / 1; } .sp.uc .is-hub .p-4 { grid-area: 2 / 5; }
  .sp.uc .is-hub .p-5 { grid-area: 3 / 1; } .sp.uc .is-hub .p-6 { grid-area: 3 / 5; }
  .sp.uc .is-hub .is-mem { grid-area: 2 / 3; padding: 16px 18px; }

  /* many: the rented tools on one side, the one owned memory on the other */
  .sp.uc .is-many { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 120px; align-items: center; }
  .sp.uc .uc-from ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; align-items: start; padding-bottom: 24px; }
  .sp.uc .uc-from li:nth-child(even) { transform: translateY(24px); }
  .sp.uc .uc-to { position: relative; }
  .sp.uc .uc-to::before { content: ""; position: absolute; top: -12px; bottom: -12px; inset-inline-start: -72px; border-inline-start: 2px dotted var(--lp-rule-2); }
  .sp.uc .uc-to::after { content: ""; position: absolute; top: 50%; inset-inline-start: -46px; margin-top: -6px; border-block: 6px solid transparent; border-inline-start: 10px solid var(--lp-accent); }
  .sp.uc .uc-to .is-mem { padding: 26px 28px; text-align: center; }
  .sp.uc .uc-to .uc-dgk { text-align: end; }
}

@media (min-width: 1180px) {
  .sp.uc .uc-cards h2 { font-size: 22px; }
  .sp.uc .uc-st { font-size: clamp(34px, 3.1vw, 48px); }
  .sp.uc .uc-end { padding-block: 96px 112px; }
  .sp.uc .uc-n b { font-size: 16px; }
  .sp.uc .uc-n.is-mem b { font-size: 18px; }
}

/* ---- the open seat's record on a desktop: the system's desktop orange is 3.4:1 at 12px; a touch of
   ink keeps it orange and takes it to 4.9:1 (the phone already draws it this way, landing.css) ---- */
@supports (color: color-mix(in srgb, red, blue)) {
  .sp.uc .card.is-invite .card-k.is-on, .sp.uc .uc-idx .is-you .lk-k { color: color-mix(in srgb, var(--lp-accent) 80%, var(--lp-ink)); }
}