/* the pages next to the landing page (help, release notes), on top of landing.css */

/* the bar sits in the flow here, no hero under it */
.nav--page { position: relative; }
.nav__links a[aria-current="page"] { color: var(--ink); }

.page-head { padding-top: clamp(56px, 9vh, 112px); }
.page-head__title {
  font-size: clamp(44px, 5.6vw, 84px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.page-head__lead { margin-top: 32px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; }

.foot--page { margin-top: var(--gap-section); }

/* ---------- release notes ---------- */
.rn-head { display: grid; grid-template-columns: 7fr 5fr; gap: 40px clamp(32px, 5vw, 80px); align-items: end; }
.rn-head .hero__actions { margin-top: 40px; }

/* the newest build as a plate, with the shift lights of the app lit up to it */
.plate { position: relative; overflow: clip; padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: #102414; }
.plate .shift span { height: 12px; border-radius: 4px; }
.plate__label { margin-top: 16px; color: #dff5e2; }
.plate__version { margin-top: 36px; font-size: clamp(56px, 6vw, 92px); font-weight: 650; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.plate__meta { margin-top: 16px; color: var(--muted); font-size: var(--t-small); }
.plate a { color: var(--ink); }

.rn { margin-top: clamp(96px, 12vw, 160px); }
.rn__entry {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 16px clamp(32px, 5vw, 80px);
  padding: clamp(28px, 3vw, 44px) 0;
  scroll-margin-top: 24px;
}
.rn__entry + .rn__entry { margin-top: 24px; }
.rn__side { position: sticky; top: 32px; align-self: start; }
.rn__version { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rn__version .tag-new { vertical-align: middle; margin: 0; font-size: 13px; padding: 5px 10px; }
.rn__meta { margin-top: 10px; color: var(--muted); font-size: var(--t-small); }
.rn__link { display: inline-block; margin-top: 14px; color: var(--muted); font-size: var(--t-small); text-decoration: underline; text-decoration-color: var(--surface-3); text-underline-offset: 4px; transition: color 160ms, text-decoration-color 160ms; }
.rn__link:hover { color: var(--ink); text-decoration-color: var(--accent-text); }

/* the notes are written on the Releases page: paragraphs, lists and ## / ### headings */
.rn__body { max-width: 62ch; }
.rn__body > * + * { margin-top: 16px; }
.rn__body h3 { margin-top: 36px; font-size: 26px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.rn__body h3.is-large { margin-top: 44px; font-size: clamp(30px, 2.6vw, 36px); letter-spacing: -0.03em; line-height: 1.1; }
.rn__body > h3.is-large:first-child { margin-top: 0; }
.rn__body h4 { margin-top: 28px; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.rn__body > :first-child { margin-top: 0; }
.rn__body h3 + *, .rn__body h4 + * { margin-top: 10px; }
.rn__body ul li { position: relative; padding: 5px 0 5px 26px; }
.rn__body ul li::before { content: ""; position: absolute; left: 2px; top: 0.82em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.rn__body a { color: var(--accent-text); }
.rn__body strong { font-weight: 650; }

/* the build a link pointed at */
.rn__entry.is-highlighted { padding-inline: clamp(24px, 3vw, 44px); margin-inline: calc(-1 * clamp(24px, 3vw, 44px)); border-radius: 24px; background: var(--surface-1); }

.rn__empty { font-size: var(--t-lead); color: var(--muted); }

.pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 72px; }
.pages a, .pages span { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pages a { background: var(--surface-1); transition: background-color 160ms, transform 160ms var(--ease-out); }
.pages a:hover { background: var(--surface-3); }
.pages a:active { transform: scale(0.96); }
.pages span[aria-current] { background: var(--accent); color: #fff; }
.pages__step { padding: 0 22px !important; }

/* ---------- help ---------- */
.find { display: flex; flex-direction: column; gap: 8px; }
.find__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.find__field { position: relative; }
.find input {
  width: 100%;
  min-height: 52px;
  padding: 0 48px 0 20px;
  border: 2px solid var(--surface-3);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color 160ms, background-color 160ms;
}
.find input::placeholder { color: var(--faint); }
.find input:hover { border-color: #3a3c3a; }
.find input:focus { outline: none; border-color: var(--accent-text); background: var(--surface-2); }
.find__key { position: absolute; right: 16px; top: 50%; translate: 0 -50%; padding: 1px 8px; border: 1px solid var(--surface-3); border-radius: 6px; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; pointer-events: none; }
.find input:focus + .find__key, .find input:not(:placeholder-shown) + .find__key { display: none; }
.find__count { min-height: 1.5em; padding-left: 20px; color: var(--muted); font-size: var(--t-small); }

.help { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.topics { position: sticky; top: 24px; display: grid; gap: 28px; }
.topics__list a {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0;
  font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
  color: var(--faint); text-decoration: none;
  transition: color 200ms var(--ease-out), transform 300ms var(--ease-out);
}
.topics__list a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); transition: background-color 200ms, transform 300ms var(--ease-out); }
.topics__list a:hover { color: var(--ink); }
.topics__list a.is-on { color: var(--ink); transform: translateX(8px); }
.topics__list a.is-on::before { background: var(--signal); transform: scale(1.15); }
.topics__list a.is-empty { opacity: 0.35; }
.topics__n { margin-left: auto; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.topics__ask { padding: 24px; border-radius: 20px; background: var(--surface-1); }
.topics__ask p { color: var(--ink); }
.topics__ask .btn { margin-top: 20px; }

/* the biggest support questions, one step from the top */
.asked { margin-bottom: clamp(56px, 6vw, 80px); }
.asked__title { color: var(--muted); font-size: var(--t-small); font-weight: 600; }
.asked__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.asked__list a {
  display: grid; gap: 6px; height: 100%;
  padding: 18px 20px; border-radius: 16px; background: var(--surface-1);
  font-weight: 600; text-decoration: none; line-height: 1.3;
  transition: background-color 160ms, transform 160ms var(--ease-out);
}
.asked__list a:hover { background: var(--surface-2); }
.asked__list a:active { transform: scale(0.98); }
.asked__list span { color: var(--faint); font-size: var(--t-small); font-weight: 500; }
.asked[hidden] { display: none; }

.topic + .topic { margin-top: clamp(64px, 7vw, 96px); }
.topic { scroll-margin-top: 24px; }
.topic__title { font-size: var(--t-h2); font-weight: 650; line-height: 1; letter-spacing: -0.035em; }

/* every question is a row, its answer opens under it */
.topic__title + .qa { margin-top: 24px; border-top: 1px solid var(--surface-2); }
.qa { border-bottom: 1px solid var(--surface-2); scroll-margin-top: 24px; }
.qa__q { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.qa__q a { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: var(--muted); text-decoration: none; transition: color 160ms; }
.qa__q a:hover, .qa.is-open .qa__q a { color: var(--ink); }
.qa__q .pro { flex: none; }
/* a plus that turns into a minus */
.qa__q a::after {
  content: ""; flex: none; margin-left: auto; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--faint); transition: transform 200ms var(--ease-out);
}
.qa.is-open .qa__q a::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; }
.qa__body { padding-bottom: 36px; }
.qa__body[hidden] { display: none; }
.qa__a { max-width: 62ch; }
.qa__a > * + * { margin-top: 14px; }
.qa__a a { color: var(--accent-text); }
.qa__a ol { counter-reset: n; }
.qa__a ol li, .qa__a ul li { position: relative; padding: 5px 0 5px 34px; }
.qa__a ol li { counter-increment: n; }
.qa__a ol li::before {
  content: counter(n); position: absolute; left: 0; top: 7px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); font-size: 13px; font-weight: 700;
}
.qa__a ul li::before { content: ""; position: absolute; left: 8px; top: 0.82em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.qa.is-target .qa__q a { color: var(--accent-text); }
.qa[hidden], .topic[hidden] { display: none; }
.qa__copy { margin-top: 24px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--surface-3); color: var(--muted); font-size: var(--t-small); transition: color 160ms, border-color 160ms; }
.qa__copy:hover { color: var(--ink); border-color: #3a3c3a; }

/* a setting or key as the app shows it */
.key { display: inline-block; padding: 1px 9px; border-radius: 7px; background: var(--surface-3); color: var(--ink); font-weight: 600; white-space: nowrap; }
mark { background: rgb(26 255 0 / 0.22); color: inherit; border-radius: 3px; }

.qa__fig { margin-top: 24px; }
.qa__fig figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; max-width: 52ch; }
.qa__shot { display: block; width: 100%; max-width: 640px; border-radius: 14px; }
.qa__shot--small { max-width: 300px; }
.qa__shot--medium { max-width: 502px; }
.qa__shot--crop { aspect-ratio: 16 / 7; object-fit: cover; object-position: 0 0; }

.none { margin-top: 32px; padding: 32px; border-radius: 20px; background: var(--surface-1); font-size: var(--t-lead); }
.none a { color: var(--accent-text); }

/* ---------- app fragments: inside data-ui the app's own look applies ---------- */
.ui { /* taste-skill-ignore: data-ui fragment, the app's own panel border */
  display: inline-flex; flex-direction: column; gap: 4px;
  min-width: min(100%, 360px); max-width: 100%;
  padding: 14px; border-radius: 14px;
  background: var(--surface-1); border: 1px solid #252725;
  font-size: 14px; line-height: 1.35;
}
.ui__title { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; color: var(--muted); font-weight: 600; }
.ui__title b { color: var(--ink); font-weight: 600; }
.ui__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 10px; border-radius: 8px; background: var(--bg); }
.ui__row.is-hot { outline: 1px solid var(--accent-text); outline-offset: -1px; } /* taste-skill-ignore: data-ui, the app marks a setting this way */
.ui__value { padding: 3px 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid #323432; /* taste-skill-ignore: data-ui input */ font-variant-numeric: tabular-nums; }
.ui__value.is-edited { color: var(--accent-text); border-color: rgb(65 200 83 / 0.5); }
.ui__step { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ui__step .ui__value { color: var(--accent-text); }
.ui__toggle { position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: #3a3c3a; }
.ui__toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #8a8e8a; }
.ui__toggle.is-on { background: var(--accent); }
.ui__toggle.is-on::after { left: 18px; background: #fff; }
.ui__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 8px; background: var(--surface-3); color: var(--ink); font-weight: 600; }
.ui__button.is-main { background: var(--accent); color: #fff; }
.ui__button.is-hot { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ui__buttons { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.ui__badge { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-weight: 600; font-size: 13px; }
.ui__note { padding: 8px 4px 0; color: var(--muted); }
.ui__url { padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid #323432; /* taste-skill-ignore: data-ui input */ color: var(--accent-text); font-size: 14px; overflow-wrap: anywhere; }
.ui__crumb { color: var(--faint); }
.ui__grid { display: inline-grid; grid-template-columns: repeat(3, 10px); gap: 3px; }
.ui__grid span { width: 10px; height: 10px; border-radius: 2px; background: #3a3c3a; }
.ui__grid span.is-on { background: var(--info); }
.ui__check { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: var(--bg); }
.ui__check::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ui__check > span:first-child { flex: 1; }
.ui__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ui__pair > .ui { min-width: 0; }
.ui__arrow { color: var(--faint); font-size: 22px; }

/* the move hotkey, tried on the page: shown, hidden, unlocked, locked again */
.mover { display: grid; gap: 14px; max-width: 640px; }
.mover__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: clip; border-radius: 12px;
  background: #0b0c0b url("/landing/img/trackmap.png") 50% 120% / 70% auto no-repeat;
  container-type: inline-size; touch-action: none;
}
.mover__screen::before { content: ""; position: absolute; inset: 0; background: rgb(11 12 11 / 0.72); }
.mover__ov { position: absolute; left: var(--x); top: var(--y); width: var(--w); border-radius: 6px; transition: opacity 260ms var(--ease-out), outline-color 200ms; outline: 2px dashed transparent; outline-offset: 3px; user-select: none; -webkit-user-drag: none; }
.mover[data-state="hidden"] .mover__ov { opacity: 0; }
.mover[data-state="unlocked"] .mover__ov { outline-color: var(--info); cursor: grab; opacity: 0.85; }
.mover[data-state="unlocked"] .mover__ov.is-drag { cursor: grabbing; opacity: 1; }
.mover__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mover__key {
  min-width: 64px; min-height: 48px; padding: 0 16px; border-radius: 10px;
  background: var(--surface-3);
  font-weight: 700; font-size: 17px;
  transition: background-color 160ms, transform 120ms var(--ease-out);
}
.mover__key:hover { background: #3a3c3a; }
.mover__key:active { transform: translateY(2px) scale(0.97); }
.mover__state { color: var(--ink); }
.mover__state b { color: var(--accent-text); font-weight: 600; }
.mover__notice { position: absolute; left: 50%; top: 10px; translate: -50% 0; padding: 6px 12px; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity 200ms; }
.mover[data-state="hidden"] .mover__notice, .mover[data-state="unlocked"] .mover__notice { opacity: 1; }

/* ---------- motion ---------- */
/* the head of a page is there from the first frame, only the release notes plate fades in */
@media (prefers-reduced-motion: no-preference) {
  .js .plate { opacity: 0; animation: fade-up 800ms var(--ease-out) 240ms forwards; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .rn-head { grid-template-columns: 1fr; }
  .help { grid-template-columns: 1fr; row-gap: 32px; margin-top: 40px; }
  /* on phones search and topics become one bar that sticks to the top */
  .topics {
    top: 0; z-index: 5; gap: 10px;
    margin-inline: calc(-1 * var(--margin)); padding: 12px var(--margin);
    background: var(--bg); border-bottom: 1px solid var(--surface-2);
  }
  .find__key { display: none; }
  .find__count { display: none; }
  .find__count:not(:empty).is-searching { display: block; }
  .topics__list {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .topics__list::-webkit-scrollbar { display: none; }
  .topics__list a { flex: none; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface-1); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
  .topics__list a::before { display: none; }
  .topics__list a.is-on { transform: none; background: var(--ink); color: var(--bg); }
  .topics__list a.is-on .topics__n { color: var(--bg); opacity: 0.6; }
  .topics__n { font-size: 13px; }
  .topics__ask { display: none; }
  .topic, .qa { scroll-margin-top: 150px; }
  .asked__list { grid-template-columns: 1fr; }
  .foot--page { padding-top: 40px; }
}
@media (max-width: 700px) {
  .rn__entry { grid-template-columns: 1fr; }
  .rn__side { position: static; }
}
@media (max-width: 560px) {
  .ui { min-width: 0; width: 100%; }
  .ui__pair .ui__arrow { display: none; }
  .mover__notice { font-size: 11px; }
}