/* ==========================================================================
   Profusia — the use-cases page (www.profusia.com/use-cases)
   Inherits site.css: the product's own tokens, the nav, the buttons, the
   footer, the reveal. This file is only what this page adds: the compass,
   the sticky module bar, the four spreads with their illustrations and
   captures, and the three-level disclosure (module → feature → mechanics).
   One accent stays on the primary action; a module's tint is an identity
   mark (the same four tints the front page's room cards wear), spent on a
   swatch, a rule and a hover, never on a button.
   ========================================================================== */

/* ------------------------------------------------------------- hero */
.uc-hero .display { max-width: 22ch; }
.uc-hero .lede { max-width: 66ch; }

/* ---------------------------------------------------------- compass */
.compass-wrap { padding-block: 0 clamp(40px, 6vw, 72px); }
.compass {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.tile {
  --tint: var(--accent);
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px 20px; min-height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile::before {
  content: ''; position: absolute; left: 22px; top: 0; width: 44px; height: 3px;
  background: var(--tint); border-radius: 0 0 3px 3px;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tint) 55%, var(--line)); }
.tile-n { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); margin-top: 6px; }
.tile b { font: 660 22px/1.1 var(--font); letter-spacing: -.024em; }
.tile em { font-style: normal; font-weight: 600; font-size: 15.5px; color: color-mix(in srgb, var(--tint) 70%, var(--ink)); }
.tile > span:not(.tile-n) { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.tile-go { margin-top: auto; padding-top: 12px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.tile:hover .tile-go { color: var(--ink); }
.compass-hint { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 18px; }

/* --------------------------------------------------------- module bar */
.modbar {
  position: sticky; top: 64px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.modbar-inner { display: flex; align-items: center; gap: 4px; height: 48px; overflow-x: auto; scrollbar-width: none; }
.modbar-inner::-webkit-scrollbar { display: none; }
.modbar a {
  --tint: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 560; color: var(--ink-2);
  border: 1px solid transparent; transition: background .14s ease, color .14s ease;
}
.modbar a i { width: 9px; height: 9px; border-radius: 3px; background: var(--tint); opacity: .55; }
.modbar a:hover { color: var(--ink); background: var(--raised); }
.modbar a[aria-current="true"] { color: var(--ink); background: var(--surface); border-color: var(--line); }
.modbar a[aria-current="true"] i { opacity: 1; }
.modbar-where { margin-left: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-left: 12px; }

/* ------------------------------------------------------------ spread */
.uc { --tint: var(--accent); scroll-margin-top: 112px; position: relative; }
.uc + .uc { border-top: 1px solid var(--line); }
.uc:nth-of-type(even) { background: var(--surface); }
.uc-head {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start;
}
@media (min-width: 900px) { .uc-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; } }
.uc .kicker { color: color-mix(in srgb, var(--tint) 72%, var(--ink)); }
.uc .h2 { max-width: 20ch; }
.uc-story { margin-top: 18px; color: var(--ink-2); font-size: 1.04rem; max-width: 56ch; }
.uc-story p + p { margin-top: 12px; }

/* The visual column: an illustration on the module's tint, and a real capture. */
.uc-visual { display: grid; gap: 16px; }
.illus {
  border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--tint) 28%, var(--line));
  background:
    radial-gradient(70% 90% at 20% 0%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 7%, var(--surface)), var(--surface));
  padding: 12px 14px 6px; overflow: hidden;
}
.illus svg { display: block; width: 100%; height: auto; }
.illus-cap { font: 500 11.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 6px 4px 8px; }

/* Shared illustration marks */
.il { color: var(--tint); }
.il text { font: 500 12px var(--mono); fill: var(--ink-2); text-anchor: middle; }
.il .pg, .il .tbl, .il .site-bg, .il .body { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.il .ttl { fill: var(--ink); opacity: .8; }
.il .sub { fill: var(--line-strong); }

/* Docs: the pile drifting, the shelf still */
.il-docs .chip rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.il-docs .chip { animation: drift 5.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.il-docs .flow { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 6; animation: dash 1.6s linear infinite; opacity: .7; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.il-docs .cell > rect:first-child { fill: var(--surface); stroke: color-mix(in srgb, currentColor 45%, var(--line-strong)); stroke-width: 1.2; }
.il-docs .cell rect + rect { fill: var(--line-strong); }
.il-docs .cell.live rect + rect { fill: currentColor; opacity: .75; }
.il-docs .cell { animation: settle 6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes settle { 0%, 88%, 100% { opacity: 1; } 94% { opacity: .55; } }

/* Live: a packet running the wire, the bars breathing */
.il-live .tbl-h { fill: color-mix(in srgb, currentColor 18%, var(--surface)); stroke: none; }
.il-live .rows rect { fill: var(--line-strong); }
.il-live .rows .num { fill: currentColor; opacity: .7; }
.il-live .wire { fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; }
.il-live .packet, .il-plans .packet { fill: currentColor; }
.il-live .bar { fill: currentColor; opacity: .75; transform-box: fill-box; transform-origin: bottom; animation: breathe 4.8s ease-in-out infinite; }
.il-live .b2 { animation-delay: .4s; } .il-live .b3 { animation-delay: .8s; } .il-live .b4 { animation-delay: 1.2s; } .il-live .b5 { animation-delay: 1.6s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.86); } }
.il-live .pulse { fill: currentColor; }
.il-live .pulse-ring { fill: none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }

/* Audience: the lock, the switch, the lit door */
.il-aud .lock rect { fill: var(--ink-3); } .il-aud .lock path { stroke: var(--ink-3); stroke-width: 3; }
.il-aud .track { fill: color-mix(in srgb, currentColor 22%, var(--line)); animation: track 6s ease-in-out infinite; }
.il-aud .knob { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; animation: knob 6s ease-in-out infinite; }
@keyframes knob { 0%, 30% { transform: translateX(0); } 45%, 85% { transform: translateX(52px); } 100% { transform: translateX(0); } }
@keyframes track { 0%, 30% { fill: var(--line); } 45%, 85% { fill: currentColor; } 100% { fill: var(--line); } }
.il-aud .site-bar { fill: color-mix(in srgb, currentColor 22%, var(--surface)); }
.il-aud .logo { fill: currentColor; } .il-aud .site-name { fill: var(--ink); opacity: .7; }
.il-aud .hero-card { fill: color-mix(in srgb, currentColor 14%, var(--surface)); stroke: color-mix(in srgb, currentColor 40%, var(--line)); }
.il-aud .card { fill: var(--raised); stroke: var(--line); }
.il-aud .door rect { fill: var(--ink-3); animation: doorlit 6s ease-in-out infinite; } .il-aud .door circle { fill: var(--surface); }
@keyframes doorlit { 0%, 35% { fill: var(--ink-3); } 50%, 85% { fill: currentColor; } 100% { fill: var(--ink-3); } }
.il-aud .visitors circle { fill: currentColor; opacity: 0; animation: arrive 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes arrive { 0%, 50% { opacity: 0; translate: 0 6px; } 62%, 85% { opacity: .85; translate: 0 0; } 100% { opacity: 0; } }
.il-aud .site { animation: none; }

/* Plans: the cards, the loop, the terminal */
.il-plans .body { fill: var(--ink); stroke: none; }
.il-plans .screen { fill: var(--surface); }
.il-plans .notch { fill: var(--ink); opacity: .8; }
.il-plans .card > rect { fill: var(--raised); stroke: var(--line); stroke-width: 1; }
.il-plans .card circle { fill: var(--ink-3); }
.il-plans .card rect + rect { fill: var(--line-strong); }
.il-plans .card.done circle { fill: currentColor; }
.il-plans .card.active > rect { stroke: currentColor; }
.il-plans .card.active circle { fill: currentColor; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.il-plans .loop { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.il-plans .term-bg { fill: #0f1524; }
.il-plans .term-bar { fill: #1a2236; }
.il-plans .dot { fill: #3b4666; }
.il-plans .prompt { fill: #9ee3d6; text-anchor: start; font-size: 11px; }
.il-plans .ln { fill: #2f3b5a; animation: typed 3.2s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: left; }
@keyframes typed { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.il-plans .ok { fill: color-mix(in srgb, currentColor 30%, #0f1524); }
.il-plans .ok-t { fill: #9ee3d6; text-anchor: start; font-size: 10px; }

/* ---------------------------------------------------------- captures */
.shot {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--raised); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.shot-bar span { margin-left: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot-open img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 9px 12px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
.shot.small { box-shadow: none; }

/* ---------------------------------------------------------- features */
.feats { margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--line); }
.feats-kicker { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 22px 0 8px; }
.feat { border-bottom: 1px solid var(--line); }
.feat > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 14px;
  padding: 18px 4px; transition: background .14s ease;
}
.feat > summary::-webkit-details-marker { display: none; }
.feat > summary:hover { background: color-mix(in srgb, var(--tint) 5%, transparent); }
.feat-n { font: 500 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.feat[open] .feat-n { color: color-mix(in srgb, var(--tint) 75%, var(--ink)); }
.feat-t b { display: block; font: 630 17.5px/1.25 var(--font); letter-spacing: -.016em; }
.feat-t span { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.feat-chev { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; justify-self: end; transition: transform .2s ease, border-color .2s ease; }
.feat-chev::before { content: ''; position: absolute; left: 7px; top: 5px; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); }
.feat[open] .feat-chev { transform: rotate(180deg); border-color: var(--ink-2); }
.feat-body {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
  padding: 2px 4px 26px 52px;
  animation: fade-up .32s ease both;
}
@media (min-width: 900px) { .feat-body:has(.shot) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feat-copy p { color: var(--ink-2); font-size: 15.5px; line-height: 1.62; max-width: 62ch; }

/* The third level: the mechanics */
.deeper { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.uc:nth-of-type(even) .deeper { background: var(--canvas); }
.deeper > summary {
  list-style: none; cursor: pointer; padding: 10px 14px; font: 560 13.5px/1 var(--font); color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.deeper > summary::-webkit-details-marker { display: none; }
.deeper > summary::before { content: '+'; font: 500 14px/1 var(--mono); color: var(--ink-3); width: 14px; }
.deeper[open] > summary::before { content: '−'; }
.deeper ul { padding: 0 14px 6px 14px; }
.deeper li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.deeper li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--tint); }
.deeper-link { display: inline-block; margin: 2px 14px 12px; font-size: 13.5px; font-weight: 560; color: var(--accent); }
.deeper-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------------------------------------------------------- lightbox */
.uc-lightbox[hidden] { display: none; }
.uc-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 8, 20, .92); display: flex; flex-direction: column; }
.uc-lb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #eef1f8; }
.uc-lb-title { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; opacity: .8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-lb-close { font: 560 14px/1 var(--font); color: #eef1f8; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.uc-lb-view { flex: 1; overflow: auto; padding: 0 14px 14px; -webkit-overflow-scrolling: touch; }
.uc-lb-view img { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; border-radius: 10px; }
body.uc-lb-open { overflow: hidden; }

/* ---------------------------------------------------------- phone */
@media (max-width: 720px) {
  .compass { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 18px 16px 16px; }
  .tile b { font-size: 19px; }
  .modbar { top: 64px; }
  .modbar-where { display: none; }
  .uc { scroll-margin-top: 116px; }
  .feat > summary { grid-template-columns: 24px 1fr 24px; gap: 10px; padding: 16px 0; }
  .feat-body { padding-left: 0; }
}
@media (max-width: 440px) {
  .compass { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .il *, .il-docs .flow, .il-live .bar, .il-live .pulse-ring, .il-aud .knob, .il-aud .track, .il-aud .door rect, .il-aud .visitors circle, .il-plans .ln, .il-plans .card.active circle { animation: none !important; }
  .il animateMotion { display: none; }
  .il-aud .knob { transform: translateX(52px); } .il-aud .track { fill: currentColor; } .il-aud .door rect { fill: currentColor; } .il-aud .visitors circle { opacity: .85; }
  .il-plans .ln { transform: none; }
  .feat-body { animation: none; }
  .tile { transition: none; }
}