/* =====================================================================
   1coder — case.css
   Case-study page layer (loaded after main.css + pro.css).
   ===================================================================== */

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--faint);
  margin-bottom: 18px;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--fg); }
.crumb span { opacity: .5; }

.case-hero { padding-top: 118px; }
.case-hero .kicker { margin-bottom: 12px; }
.case-hero h1 {
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.28;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  max-width: 34rem;
}
.case-hero .lead {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 2;
  max-width: 40rem;
  margin: 0;
}
.case-hero .case-acts { margin-top: 26px; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 40px 0 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.facts div { background: var(--surface); padding: 20px; }
.facts dt { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
.facts dd { margin: 0; font-size: 14.5px; font-weight: 600; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }

/* live demo stage */
.live { margin-top: 46px; }
.live-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.live-head h2 { font-size: 20px; margin: 0; }
.live-shell {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fg) 3%, var(--surface));
  padding: 14px;
  box-shadow: var(--shadow);
}
.live-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 4px 12px;
}
.live-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}
.live-bar u {
  flex: 1;
  text-decoration: none;
  margin-inline-start: 10px;
  font-size: 11.5px;
  color: var(--faint);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 7px;
  padding: 5px 10px;
  direction: ltr;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-stage { display: flex; justify-content: center; }
.live-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: max-width var(--t) var(--ease);
}
.live-stage[data-device="tablet"] .live-frame { max-width: 680px; aspect-ratio: 3 / 4; }
.live-stage[data-device="mobile"] .live-frame { max-width: 360px; aspect-ratio: 9 / 16; }
.live-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.live-note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; line-height: 1.9; }

/* narrative */
.narr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 52px;
}
@media (max-width: 860px) { .narr { grid-template-columns: 1fr; } }
.nbox {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 26px;
}
.nbox h2 { font-size: 17px; margin: 0 0 12px; display: flex; gap: 9px; align-items: center; }
.nbox h2 svg { width: 18px; height: 18px; color: var(--accent); }
.nbox p { font-size: 14px; color: var(--muted); line-height: 2.05; margin: 0 0 12px; }
.nbox p:last-child { margin-bottom: 0; }
.nbox ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 9px; }
.nbox li { font-size: 13.8px; color: var(--muted); line-height: 1.95; }

.shots { margin-top: 52px; display: grid; gap: 18px; }
.shots figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { font-size: 12.5px; color: var(--faint); padding: 12px 16px; border-top: 1px solid var(--line); }

.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.nextp {
  margin-top: 60px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.nextp small { display: block; font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.nextp b { font-size: 17px; font-weight: 600; }

/* demo back badge (injected into demo pages) */
.demo-badge {
  position: fixed;
  z-index: 2147483000;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font: 500 13px/1 Tahoma, sans-serif;
  padding: 11px 15px;
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 16, 24, .86);
  backdrop-filter: blur(10px);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  direction: rtl;
}
.demo-badge:hover { background: rgba(12, 16, 24, .96); }

/* reload-the-demo button inside the fake browser bar */
.live-bar { display: flex; align-items: center; gap: 6px; }
.live-bar u { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms linear, border-color 150ms linear;
}
.live-refresh:hover { color: var(--fg); border-color: var(--line-2); }

/* =========================================================
   NATIVE SCROLLBAR + CURSOR HANDOFF
   A DOM cursor can never paint above the browser scrollbar, so the
   scrollbar is styled to match the UI and the system cursor is restored
   whenever the pointer is over that strip.
   ========================================================= */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 26%, transparent) transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--fg) 26%, transparent);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background-clip: content-box;
  }
}
html.cursor-native,
html.cursor-native * { cursor: auto !important; }
html.cursor-native a,
html.cursor-native button,
html.cursor-native [role="button"],
html.cursor-native label { cursor: pointer !important; }
html.cursor-native .cur-dot,
html.cursor-native .cur-ring,
html.cursor-native .cur-glow { opacity: 0 !important; }

/* =========================================================
   IN-PAGE SCROLLBAR (#vbar)
   The native scrollbar is hidden only when this one is live (the class is
   added by JS), so without JS the page keeps a normal scrollbar.
   ========================================================= */
@media (pointer: fine) {
  html.vbar-on { scrollbar-width: none; -ms-overflow-style: none; }
  html.vbar-on::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
  html.vbar-on body::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
}
#vbar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 16px;
  height: 100vh;
  z-index: 2147481500;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.vbar-on #vbar { display: block; }
#vbar i {
  position: absolute;
  top: 0;
  right: 5px;
  left: auto;
  width: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 32%, transparent);
  opacity: .5;
  transform: translate3d(0, 0, 0);
  transition: width 160ms var(--ease), right 160ms var(--ease),
              opacity 260ms linear, background-color 160ms linear;
  will-change: transform;
}
#vbar:hover i,
#vbar.is-drag i {
  width: 10px;
  right: 3px;
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 74%, transparent);
}
html.vbar-idle #vbar i { opacity: .2; }
html.vbar-drag { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { #vbar i { transition: none; } }

/* direct #hash landings clear the sticky header */
section[id] { scroll-margin-top: 92px; }