/* Help site. Every size, color and radius comes from @crystelis/design-system tokens (tokens.css),
   including the compact and touch densities; this file only composes them. */
@font-face {
  font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/noto-sans-latin-51ca196f49a3.woff2") format("woff2");
}
:root {
  --gutter: max(var(--cr-space-4), env(safe-area-inset-left, 0px));
  --gutter-end: max(var(--cr-space-4), env(safe-area-inset-right, 0px));
  --head-h: calc(var(--cr-control-height) + var(--cr-space-3));
  --shot-outline: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shot-outline: rgba(255, 255, 255, 0.1) } }
:root[data-theme="dark"] { --shot-outline: rgba(255, 255, 255, 0.1) }
@media (min-width: 64rem) { :root { --gutter: max(var(--cr-space-8), env(safe-area-inset-left, 0px)); --gutter-end: max(var(--cr-space-8), env(safe-area-inset-right, 0px)) } }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--cr-workspace-ground); color: var(--cr-ink);
  font: var(--cr-weight-regular) var(--cr-text-base) / var(--cr-leading-normal) var(--cr-font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--cr-selection) }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: var(--cr-weight-semibold); line-height: var(--cr-leading-tight) }
p { margin: 0; text-wrap: pretty }
a { color: var(--cr-link); text-underline-offset: 3px }
img { max-width: 100% }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent }
:focus-visible { outline: var(--cr-focus-ring-width) solid var(--cr-focus-ring); outline-offset: var(--cr-focus-offset) }
.ico { width: 16px; height: 16px; flex: none }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cr-space-2);
  min-height: var(--cr-control-height); padding: 0 var(--cr-space-4); border: 1px solid var(--cr-rule);
  border-radius: var(--cr-radius-control); background: var(--cr-document); color: var(--cr-ink);
  font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--cr-duration) var(--cr-ease), transform var(--cr-duration-fast) var(--cr-ease);
}
.btn:hover { background: var(--cr-document-muted) }
.btn:active { transform: scale(0.97) }
.btn.primary { background: var(--cr-action); border-color: var(--cr-action); color: var(--cr-action-ink) }
.btn.primary:hover { background: var(--cr-action-hover) }
.btn.primary:active { background: var(--cr-action-pressed) }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: var(--cr-z-sticky); display: flex; align-items: center; gap: var(--cr-space-4);
  min-height: var(--head-h); padding: env(safe-area-inset-top, 0px) var(--gutter-end) 0 var(--gutter);
  background: var(--cr-document); border-bottom: 1px solid var(--cr-rule);
}
.brand { display: flex; align-items: center; gap: var(--cr-space-2); color: var(--cr-ink); text-decoration: none; font-weight: var(--cr-weight-semibold); font-size: var(--cr-text-md); white-space: nowrap }
.brand-symbol { width: 24px; height: 24px; color: var(--cr-ink) }
.brand-area { font-weight: var(--cr-weight-regular); color: var(--cr-ink-secondary) }
.app-link { white-space: nowrap }
.search { position: relative; flex: 1; min-width: 0; max-width: 26rem; margin-left: auto }
.search-box {
  display: flex; align-items: center; gap: var(--cr-space-2); min-height: var(--cr-control-height-compact); padding: 0 var(--cr-space-3);
  border: 1px solid var(--cr-control-rule); border-radius: var(--cr-radius-control); background: var(--cr-control-fill); color: var(--cr-ink-secondary);
}
.search-box:focus-within { outline: var(--cr-focus-ring-width) solid var(--cr-focus-ring); outline-offset: 1px }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cr-ink); font: inherit; padding: var(--cr-space-1) 0 }
.search-box input::-webkit-search-cancel-button { cursor: pointer }
.search-results {
  position: absolute; top: calc(100% + var(--cr-space-1)); left: 0; right: 0; z-index: var(--cr-z-dropdown);
  display: grid; padding: var(--cr-space-1); background: var(--cr-document); border: 1px solid var(--cr-rule);
  border-radius: var(--cr-radius-card); box-shadow: var(--cr-elevation-menu);
}
.search-results[hidden] { display: none }
.search-results a { display: grid; gap: 2px; padding: var(--cr-space-2) var(--cr-space-3); border-radius: var(--cr-radius-control); color: var(--cr-ink); text-decoration: none }
.search-results a:hover, .search-results a:focus-visible { background: var(--cr-document-muted); outline: 0 }
.search-results small { color: var(--cr-ink-secondary); font-size: var(--cr-text-xs) }
.search-results p { padding: var(--cr-space-2) var(--cr-space-3); color: var(--cr-ink-secondary) }

/* Home */
.home { width: 100%; max-width: calc(52rem + var(--gutter) + var(--gutter-end)); margin: 0 auto; padding: var(--cr-space-10) var(--gutter-end) var(--cr-space-16) var(--gutter); display: grid; gap: var(--cr-space-8); align-content: start; flex: 1 }
.home h1 { font-size: var(--cr-text-2xl) }
.search-big { max-width: none; margin: 0 }
.search-big .search-box { min-height: var(--cr-control-height) }
.area { display: grid; gap: var(--cr-space-3) }
.area h2 { font-size: var(--cr-text-xl) }
.task { display: grid; gap: var(--cr-space-3) }
.task-main {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--cr-rule); border-radius: var(--cr-radius-card); background: var(--cr-document); color: var(--cr-ink); text-decoration: none;
  transition: border-color var(--cr-duration) var(--cr-ease);
}
.task-main:hover { border-color: var(--cr-control-rule) }
.task-text { display: grid; gap: var(--cr-space-2); align-content: start; padding: var(--cr-space-4) }
.task-text h3 { font-size: var(--cr-text-md) }
.task-text p { color: var(--cr-ink-secondary) }
.task-meta { color: var(--cr-ink-secondary); font-size: var(--cr-text-xs); font-variant-numeric: tabular-nums }
.task-main img { width: 100%; height: 100%; min-height: 10rem; max-height: 14rem; object-fit: cover; object-position: left top; border-left: 1px solid var(--cr-rule) }
.jumps { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin: 0; padding: 0; list-style: none }
.jumps a {
  display: inline-flex; align-items: center; min-height: var(--cr-control-height-compact); padding: 0 var(--cr-space-3);
  border: 1px solid var(--cr-rule); border-radius: var(--cr-radius-control); background: var(--cr-document); color: var(--cr-ink); text-decoration: none; font-size: var(--cr-text-sm);
}
.jumps a:hover { border-color: var(--cr-control-rule) }
.empty, .notfound p { color: var(--cr-ink-secondary) }

/* Guide, readable without JavaScript: every screen in order */
.guide { flex: 1; display: flex; flex-direction: column; min-height: 0 }
.guide-head { display: grid; gap: var(--cr-space-2); padding: var(--cr-space-4) var(--gutter-end) 0 var(--gutter) }
.crumbs { color: var(--cr-ink-secondary); font-size: var(--cr-text-sm) }
.crumbs a { color: var(--cr-ink-secondary) }
.guide-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-2) var(--cr-space-3) }
.guide-title h1 { font-size: var(--cr-text-2xl) }
.guide-count { color: var(--cr-ink-secondary); font-size: var(--cr-text-sm); font-variant-numeric: tabular-nums }
.guide-actions { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin-left: auto }
.guide-lead { color: var(--cr-ink-secondary); max-width: 65ch }
.screen { padding: var(--cr-space-6) var(--gutter-end) var(--cr-space-6) var(--gutter); border-top: 1px solid var(--cr-rule); scroll-margin-top: var(--head-h) }
.screen-text { display: grid; gap: var(--cr-space-3); align-content: start; min-width: 0; max-width: 65ch }
.screen-text h2 { font-size: var(--cr-text-xl) }
.step-n { color: var(--cr-action); font-variant-numeric: tabular-nums }
.prose p, .prose li { line-height: 1.6 }
.prose ul, .prose ol { display: grid; gap: var(--cr-space-2); margin: 0; padding-left: 1.25rem }
.prose strong { font-weight: var(--cr-weight-semibold) }
.prose code { font-family: var(--cr-font-mono); font-size: 0.92em; padding: 0 var(--cr-space-1); border-radius: var(--cr-radius-focus); background: var(--cr-document-muted) }
.beat { display: grid; gap: var(--cr-space-3) }
.shot { margin: 0 }
.shot img, .stage-figure img { display: block; height: auto; border-radius: 8px; outline: 1px solid var(--shot-outline); outline-offset: -1px; background: var(--cr-document-muted) }
.shot img { width: 100%; max-width: 56rem }
.video { display: grid; gap: var(--cr-space-2); justify-items: start }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--cr-radius-card) }
.video-note { color: var(--cr-ink-secondary); font-size: var(--cr-text-xs) }
.pager[hidden], .segs[hidden] { display: none }

/* Guide, one screen at a time (help.js adds .paged) */
.paged .guide-lead, .paged .crumbs { display: none }
.paged .guide-head { padding-top: var(--cr-space-3); gap: var(--cr-space-1) }
.paged .screen-text { gap: var(--cr-space-2) }
.paged .split .screen-text { max-width: none }
.paged .screen { display: none; border-top: 0; padding-block: var(--cr-space-3) }
.paged .screen.on { display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); gap: var(--cr-space-8); align-items: start }
.paged .screen.on.split { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.paged .site-foot { display: none }
.paged .screen.on:not(.split):not(:has(.screen-stage)) { grid-template-columns: minmax(0, 65ch) }
.paged .beat.can-pick { margin-inline: calc(var(--cr-space-3) * -1); padding: var(--cr-space-1) var(--cr-space-3); border-radius: var(--cr-radius-control); color: var(--cr-ink-secondary); cursor: pointer; transition: color var(--cr-duration) var(--cr-ease), background-color var(--cr-duration) var(--cr-ease) }
.paged .beat.can-pick:hover { color: var(--cr-ink) }
.paged .beat.can-pick.on { color: var(--cr-ink); background: var(--cr-document-muted) }
.screen-stage { display: grid; gap: var(--cr-space-2); min-width: 0; justify-items: start }
.stage-figure { margin: 0; max-width: 100% }
.stage-figure[hidden] { display: none }
.stage-figure img { width: auto; max-width: 100%; max-height: var(--stage-max, 70dvh); object-fit: contain }
.thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-2) }
.thumbs button { width: 4.75rem; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 1px solid var(--cr-rule); border-radius: var(--cr-radius-control); background: none; opacity: 0.6; cursor: pointer; transition: opacity var(--cr-duration) var(--cr-ease) }
.thumbs button:hover { opacity: 0.85 }
.thumbs button.on { opacity: 1; border-color: var(--cr-action) }
.thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top }
.thumbs span { color: var(--cr-ink-secondary); font-size: var(--cr-text-xs); font-variant-numeric: tabular-nums }
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--cr-space-1); margin: var(--cr-space-2) 0 0; padding: 0; list-style: none }
.segs a { position: relative; display: block; height: 1.25rem }
.segs a::before { content: ""; position: absolute; inset: calc(50% - 1.5px) 0; border-radius: var(--cr-radius-focus); background: var(--cr-rule) }
.segs a.done::before { background: color-mix(in srgb, var(--cr-action) 40%, var(--cr-rule)) }
.segs a.on::before { inset: calc(50% - 2px) 0; background: var(--cr-action) }
.pager {
  position: sticky; bottom: 0; z-index: var(--cr-z-sticky); display: flex; align-items: center; gap: var(--cr-space-3); margin-top: auto;
  padding: var(--cr-space-2) var(--gutter-end) max(var(--cr-space-2), env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: var(--cr-document); border-top: 1px solid var(--cr-rule);
}
.pager-next { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cr-ink-secondary); font-size: var(--cr-text-sm); text-align: right }

.site-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cr-space-2) var(--cr-space-4);
  padding: var(--cr-space-3) var(--gutter-end) max(var(--cr-space-3), env(safe-area-inset-bottom, 0px)) var(--gutter);
  border-top: 1px solid var(--cr-rule); color: var(--cr-ink-secondary); font-size: var(--cr-text-xs);
}
.site-foot a { color: var(--cr-ink-secondary) }

/* Touch density and narrow screens: one column, the bar stays reachable */
@media (max-width: 63.99rem) {
  .paged .screen.on { grid-template-columns: minmax(0, 1fr); gap: var(--cr-space-4) }
  .stage-figure img { max-height: none }
  .paged .screen.on.split { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 40rem) {
  .app-link { display: none }
  .brand-area { display: none }
  .task-main { grid-template-columns: minmax(0, 1fr) }
  .task-main img { border-left: 0; border-top: 1px solid var(--cr-rule); max-height: 11rem }
  .guide-actions { margin-left: 0 }
  .pager-next { display: none }
  .pager .primary { margin-left: auto }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }