/* ==========================================================
   Case study: TagForge (/lab/tagforge/). Brain world, neon lab.
   ========================================================== */

.cs-hero { padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); background: radial-gradient(55% 60% at 80% 20%, rgba(53, 227, 255, 0.12), transparent 70%), radial-gradient(45% 50% at 10% 80%, rgba(142, 107, 255, 0.14), transparent 70%); }
.cs-hero .eyebrow a { color: inherit; }
.cs-hero__title { max-width: 18ch; }
.cs-hero__lead { max-width: 62ch; }
.cs-stats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.cs-stats li { display: grid; color: var(--ink-2); font-size: var(--step--1); }
.cs-stats b { font: 700 var(--step-3)/1.05 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.cs-note { color: var(--ink-2); margin-top: 1.25rem; max-width: 70ch; }
.cs-note a { font-weight: 600; }

/* The small idea */
.cs-three { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: three; }
.cs-three li { position: relative; padding: 1.5rem; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--panel); }
.cs-three svg { width: 44px; height: 44px; fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(53, 227, 255, 0.45)); }
.cs-three h3 { margin: 0.75rem 0 0.35rem; font: 700 var(--step-1)/1.2 var(--f-display); }
.cs-three p { margin: 0; color: var(--ink-2); }
.cs-three li::after { counter-increment: three; content: "0" counter(three); position: absolute; top: 1.2rem; right: 1.3rem; font: 500 0.75rem/1 var(--f-mono); color: var(--ink-3); letter-spacing: 0.1em; }

/* The map */
.om-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem; }
.om-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.om-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: 600 0.88rem/1 var(--f-body); cursor: pointer; }
.om-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.om-chip[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.om-chip--today { --c: var(--green); } .om-chip--cloud { --c: var(--violet); } .om-chip--ai { --c: var(--cyan); } .om-chip--sensor { --c: var(--amber); }
.om { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--gap); align-items: start; }
.om__stage { position: relative; border-radius: var(--radius-l); border: 1px solid var(--line); overflow: hidden; background: radial-gradient(50% 50% at 50% 50%, rgba(53, 227, 255, 0.08), transparent 70%), #04060D; box-shadow: 0 40px 120px -60px rgba(53, 227, 255, 0.4); }
.om__svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.om__back { position: absolute; top: 0.85rem; left: 0.85rem; min-height: 40px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(5, 7, 15, 0.8); color: var(--ink); font: 600 0.88rem/1 var(--f-body); cursor: pointer; backdrop-filter: blur(6px); }
.om__back[hidden] { display: none; }

.om-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 8; }
.om-ring--outer { stroke: rgba(148, 170, 255, 0.08); }
.om-link { fill: none; stroke-width: 1.2; transition: opacity 0.4s, stroke-width 0.4s; }
.om-link--hub { stroke-width: 2; }
.om-link.is-on { stroke-width: 2.2; opacity: 1; }
.is-focus .om-link:not(.is-on) { opacity: 0.18; }
.om-pulse { pointer-events: none; filter: url(#omGlow); }
.om-hit { fill: transparent; }
.om-hub, .om-leaf, .om-core { cursor: pointer; outline: none; transition: opacity 0.4s; }
.om-hub.is-dim { opacity: 0.28; }
.om-ball { stroke-width: 2; transition: transform 0.25s; transform-box: fill-box; transform-origin: center; }
.om-halo { animation: omBreathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.om-hub:hover .om-ball, .om-hub:focus-visible .om-ball, .om-hub.is-on .om-ball { transform: scale(1.12); }
.om-hub:focus-visible .om-ball, .om-leaf:focus-visible .om-dot, .om-core:focus-visible circle:last-of-type { stroke: #fff; stroke-width: 3; }
.om-hub__icon { font-size: 24px; pointer-events: none; }
.om-hub__t { fill: var(--ink); font: 600 calc(var(--upp, 1) * 13px) / 1 var(--f-display); letter-spacing: 0.01em; paint-order: stroke; stroke: #04060D; stroke-width: calc(var(--upp, 1) * 4px); pointer-events: none; }
.om-dot { transition: r 0.25s, opacity 0.3s; }
.om-leaf:hover .om-dot, .om-leaf.is-current .om-dot { r: 11; }
.om-leaf.is-dim { opacity: 0.16; }
.om-leaf.is-match .om-dot { r: 9.5; }
.om-leaf__t { fill: var(--ink-2); font: 500 calc(var(--upp, 1) * 12.5px) / 1 var(--f-body); paint-order: stroke; stroke: #04060D; stroke-width: calc(var(--upp, 1) * 4px); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.om-leaf.is-label .om-leaf__t, .om-leaf:hover .om-leaf__t, .om-leaf:focus-visible .om-leaf__t { opacity: 1; }
.om-leaf.is-current .om-leaf__t { fill: var(--ink); font-weight: 700; }
.om-leaf.is-dim .om-leaf__t { opacity: 0; }
.om-core__halo { fill: rgba(53, 227, 255, 0.08); stroke: rgba(53, 227, 255, 0.35); stroke-dasharray: 3 6; animation: omSpin 40s linear infinite; transform-origin: 500px 500px; }
.om-core__t { fill: #04060D; font: 700 22px/1 var(--f-display); pointer-events: none; }
.om-core__s { fill: #0B1A33; font: 600 9px/1 var(--f-mono); letter-spacing: 0.02em; pointer-events: none; }
@keyframes omBreathe { 50% { transform: scale(1.18); opacity: 0.55; } }
@keyframes omSpin { to { transform: rotate(360deg); } }

.om__panel { position: sticky; top: 90px; padding: 1.4rem; border-radius: var(--radius-l); border: 1px solid var(--line-2); background: var(--panel-solid); min-height: 240px; }
.om__panel h3 { margin: 0.35rem 0 0.6rem; font: 700 var(--step-2)/1.15 var(--f-display); }
.om__panel p { color: var(--ink-2); margin: 0 0 0.75rem; }
.om__kicker { margin: 0; font: 600 0.75rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--h, 190), 90%, 66%) !important; }
.om__items { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.om__items button { display: grid; gap: 0.15rem; width: 100%; text-align: left; padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--ink); cursor: pointer; font: inherit; }
.om__items button:hover, .om__items button:focus-visible { border-color: var(--cyan); background: rgba(53, 227, 255, 0.06); }
.om__items button span { color: var(--ink-3); font-size: 0.85rem; }
.om__items button.is-dim { opacity: 0.4; }
.om__dl { margin: 1rem 0 0; display: grid; gap: 0.2rem; }
.om__dl dt { font: 600 0.72rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.6rem; }
.om__dl dd { margin: 0; color: var(--ink); }
.om__refs-t { margin: 1rem 0 0.35rem !important; font: 600 0.72rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3) !important; }
.om__refs { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.om__refs small { color: var(--ink-3); }
.om__nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.om__btn { min-height: 40px; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 600 0.85rem/1 var(--f-body); cursor: pointer; }
.om__btn:hover { border-color: var(--cyan); }
.om__legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; color: var(--ink-2); font-size: 0.9rem; }
.om-sectors { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.om-sector { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 42px; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid hsla(var(--h), 90%, 62%, 0.35); background: hsla(var(--h), 90%, 62%, 0.06); color: var(--ink); font: 600 0.88rem/1 var(--f-body); cursor: pointer; }
.om-sector small { color: var(--ink-3); font-weight: 500; }
.om-sector[aria-pressed="true"] { background: hsla(var(--h), 90%, 62%, 0.22); border-color: hsl(var(--h), 90%, 62%); }

/* Flags */
.cs-flags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0 0.25rem; }
.cs-flag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.55rem; border-radius: 999px; font: 600 0.72rem/1.2 var(--f-body); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); white-space: nowrap; }
.cs-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cs-flag--today { --c: var(--green); } .cs-flag--cloud { --c: var(--violet); } .cs-flag--ai { --c: var(--cyan); } .cs-flag--sensor { --c: var(--amber); }

/* Layers */
.cs-stack { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; align-items: stretch; gap: 0.75rem; margin-top: 1.75rem; }
.cs-layer { padding: 1.4rem; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--panel); }
.cs-layer--ai { border-color: rgba(53, 227, 255, 0.5); box-shadow: var(--glow-c); background: linear-gradient(160deg, rgba(53, 227, 255, 0.1), rgba(142, 107, 255, 0.08)); }
.cs-layer__n { font: 500 0.75rem/1 var(--f-mono); color: var(--ink-3); letter-spacing: 0.1em; }
.cs-layer h3 { margin: 0.5rem 0 0.4rem; font: 700 var(--step-1)/1.2 var(--f-display); }
.cs-layer p { margin: 0; color: var(--ink-2); }
.cs-plus { align-self: center; font: 700 1.6rem/1 var(--f-display); color: var(--ink-3); }

/* Pulls */
.cs-pulls { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; counter-reset: pull; }
.cs-pulls li { padding: 1.2rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--panel); }
.cs-pulls li::before { counter-increment: pull; content: counter(pull); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 0.8rem/1 var(--f-mono); color: var(--ink-2); margin-bottom: 0.6rem; }
.cs-pulls b { display: block; font: 700 var(--step-1)/1.2 var(--f-display); }
.cs-pulls p { margin: 0.5rem 0 0; color: var(--ink-2); font-size: 0.93rem; }
.cs-cup { display: inline-block; margin-top: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; font: 600 0.7rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.cs-cup--human { color: var(--amber); background: rgba(255, 181, 71, 0.12); }
.cs-cup--ai { color: var(--cyan); background: rgba(53, 227, 255, 0.12); }
.cs-cup--both { color: var(--ink); background: linear-gradient(90deg, rgba(255, 181, 71, 0.2), rgba(53, 227, 255, 0.2)); }

/* Papers */
.cs-papers__group { margin: 2.25rem 0 0.9rem; font: 600 0.8rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cs-paperlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.cs-paper { padding: 1.35rem 1.4rem; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 100px; }
.cs-paper:target { border-color: var(--cyan); box-shadow: var(--glow-c); }
.cs-paper__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; color: var(--ink-3); font: 500 0.78rem/1.2 var(--f-mono); }
.cs-tech { padding: 0.2rem 0.55rem; border-radius: 6px; font-weight: 600; color: var(--cyan); background: rgba(53, 227, 255, 0.1); }
.cs-tech--rfid { color: var(--violet); background: rgba(142, 107, 255, 0.14); }
.cs-tech--rf { color: var(--amber); background: rgba(255, 181, 71, 0.12); }
.cs-paper h4 { margin: 0; font: 700 1.08rem/1.3 var(--f-display); }
.cs-paper h4 a { color: var(--ink); text-decoration: none; }
.cs-paper h4 a:hover { color: var(--cyan); text-decoration: underline; }
.cs-paper__by { margin: 0.35rem 0 0.6rem; color: var(--ink-3); font-size: 0.88rem; }
.cs-paper p { color: var(--ink-2); }
.cs-paper__means { margin-bottom: 0; padding-top: 0.7rem; border-top: 1px dashed var(--line); color: var(--ink) !important; }
.cs-paper__means b { color: var(--cyan); }

/* Full list */
.cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem var(--gap); margin-top: 1.25rem; }
.cs-sector { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--panel); }
.cs-sector summary { cursor: pointer; padding: 0.9rem 1.1rem; font: 600 1rem/1.3 var(--f-display); list-style-position: inside; }
.cs-sector summary small { color: var(--ink-3); font-weight: 500; }
.cs-sector ul { margin: 0; padding: 0 1.1rem 1rem 2.2rem; display: grid; gap: 0.6rem; color: var(--ink-2); font-size: 0.93rem; }
.cs-sector li b { color: var(--ink); }
.cs-sector li .cs-flags { display: flex; }

.cs-end__box { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: var(--gap); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-l); border: 1px solid rgba(53, 227, 255, 0.35); background: linear-gradient(120deg, rgba(53, 227, 255, 0.08), rgba(142, 107, 255, 0.1)); }
.cs-end__box .cs-actions { margin: 0; }

/* Lab: case study banner */
.lab-case { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; margin: 0 0 1.75rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-l); border: 1px solid rgba(53, 227, 255, 0.35); background: linear-gradient(120deg, rgba(53, 227, 255, 0.08), rgba(142, 107, 255, 0.08)); color: var(--ink); text-decoration: none; }
.lab-case:hover { border-color: var(--cyan); box-shadow: var(--glow-c); }
.lab-case__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #04060D; border: 1px solid var(--line-2); font-size: 1.5rem; }
.lab-case b { display: block; font: 700 var(--step-1)/1.2 var(--f-display); }
.lab-case span { color: var(--ink-2); }
.lab-case em { font-style: normal; font-weight: 600; color: var(--cyan); white-space: nowrap; }

@media (max-width: 1080px) {
	.cs-pulls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.om { grid-template-columns: 1fr; }
	.om__panel { position: static; min-height: 0; }
	.cs-stack { grid-template-columns: 1fr; }
	.cs-plus { justify-self: center; }
	.cs-paperlist, .cs-list, .cs-three { grid-template-columns: 1fr; }
	.cs-end__box { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.om:not(.is-focus) .om-hub__t { display: none; }
	.om-hub__icon { font-size: 30px; }
	.cs-pulls { grid-template-columns: 1fr; }
	.lab-case { grid-template-columns: auto minmax(0, 1fr); }
	.lab-case em { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.om-halo, .om-core__halo { animation: none; }
}
.cs-next__box { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-l); border: 1px dashed rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.05); }