/* User Guide — additive styles layered over the existing site theme */
.guide-main { background: var(--page); }
.guide-hero {
  padding: 82px 0 54px;
  background:
    radial-gradient(circle at 86% 12%, rgba(194,125,120,.13), transparent 28%),
    linear-gradient(180deg, var(--paper), #eee9e1);
  border-bottom: 1px solid var(--line);
}
.guide-wrap { width: min(calc(100% - 40px), 1100px); margin-inline: auto; }
.guide-back {
  display: inline-flex;
  margin-bottom: 22px;
  color: #6d6663;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
.guide-back:hover, .guide-back:focus-visible { color: var(--ink); }
.guide-hero h1 {
  max-width: 930px;
  margin: 0 0 18px;
  color: var(--ink);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .98;
}
.guide-deck { max-width: 820px; margin: 0; color: #5b5552; font-size: clamp(1.04rem, 1.9vw, 1.22rem); }
.guide-version { margin: 17px 0 0; color: #776f6b; font-size: .88rem; }
.guide-content { padding: 68px 0 98px; }
.guide-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 58px;
  align-items: start;
}
.guide-sidebar {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 136px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f4efe8;
}
.guide-sidebar .eyebrow { margin-bottom: 9px; }
.guide-chapter-nav { display: grid; margin-top: 4px; }
.guide-chapter-nav a {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: #625c59;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}
.guide-chapter-nav a:first-child { border-top: 0; }
.guide-chapter-nav a:hover, .guide-chapter-nav a:focus-visible { color: var(--ink); }
.guide-chapter-nav a[aria-current="page"] { color: var(--terracotta); font-weight: 800; }
.guide-article { min-width: 0; }
.guide-article > :first-child { margin-top: 0; }
.guide-article h2 {
  margin: 48px 0 16px;
  color: var(--ink);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.026em;
}
.guide-article h3 { margin: 30px 0 10px; color: var(--ink); font-size: 1.05rem; }
.guide-article p, .guide-article li { color: #595351; font-size: 1rem; line-height: 1.72; }
.guide-article p { margin: 0 0 17px; }
.guide-article ul, .guide-article ol { margin: 14px 0 25px; padding-left: 25px; }
.guide-article li + li { margin-top: 8px; }
.guide-article strong { color: #34302f; }
.guide-article a { color: var(--plum); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-article code {
  padding: .12em .36em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4efe8;
  color: #473f3d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .9em;
  overflow-wrap: anywhere;
}
.guide-table-scroll { overflow-x: auto; margin: 24px 0 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.guide-code-block {
  margin: 24px 0 32px;
  padding: 22px 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #272326;
  color: #f6f0e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.65;
}
.guide-code-block code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  overflow-wrap: normal;
}

.guide-article table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.guide-article th, .guide-article td { padding: 14px 15px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; text-align: left; }
.guide-article th:last-child, .guide-article td:last-child { border-right: 0; }
.guide-article tr:last-child td { border-bottom: 0; }
.guide-article thead th { background: #e9e4dc; color: var(--ink); font-size: .83rem; }
.guide-article tbody tr:nth-child(even) { background: rgba(247,245,240,.62); }
.guide-note {
  margin: 34px 0;
  padding: 24px 26px;
  border-left: 3px solid var(--terracotta);
  border-radius: 0 18px 18px 0;
  background: #f3ece3;
}
.guide-index .guide-article > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: guide-chapter;
}
.guide-index .guide-article > ol > li {
  counter-increment: guide-chapter;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8f4ee;
}
.guide-index .guide-article > ol > li::before {
  content: counter(guide-chapter, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: var(--terracotta);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.guide-index .guide-article > ol a { color: var(--ink); }
.guide-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.guide-pager a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 105px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f4efe8;
  color: inherit;
  text-decoration: none;
}
.guide-pager a:hover, .guide-pager a:focus-visible { border-color: rgba(194,125,120,.45); }
.guide-pager .guide-pager-next { text-align: right; }
.guide-pager span { color: #7b7470; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-pager strong { margin-top: 5px; color: var(--ink); font-family: ui-serif, Georgia, serif; font-size: 1.08rem; line-height: 1.2; }
.nav a[aria-current="page"] { color: var(--ink); }

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 32px; }
  .guide-sidebar { position: static; max-height: none; overflow: visible; }
  .guide-chapter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .guide-chapter-nav a:nth-child(2) { border-top: 0; }
}
@media (max-width: 640px) {
  .guide-wrap { width: min(calc(100% - 28px), 1100px); }
  .guide-hero { padding: 60px 0 42px; }
  .guide-content { padding: 48px 0 72px; }
  .guide-chapter-nav { grid-template-columns: 1fr; }
  .guide-chapter-nav a:nth-child(2) { border-top: 1px solid var(--line); }
  .guide-index .guide-article > ol { grid-template-columns: 1fr; }
  .guide-pager { grid-template-columns: 1fr; }
  .guide-pager .guide-pager-next { text-align: left; }
}/* User Guide movies: seamless page playback with explicit controls. */
.guide-video-disclosure {
  width: min(100%, 430px);
  margin: 4px 0 18px;
}
/* Landscape desktop workflows use the full article width. The source movies
   include generous Alabaster side margins, so on larger screens we crop only
   those empty horizontal margins to make interface detail easier to read. */
@media (min-width: 641px) {
  .guide-video-disclosure.guide-video-landscape {
    width: 100%;
    max-width: none;
  }
  .guide-video-disclosure.guide-video-landscape .guide-video-inline {
    width: 100%;
    overflow: hidden;
  }
  .guide-video-disclosure.guide-video-landscape .guide-video-inline video {
    width: 120%;
    max-width: none;
    margin-left: -10%;
  }
}
.guide-video-launch {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: .55rem;
  margin: 2px 0 8px;
  padding: .72rem 1rem;
  border: 1px solid rgba(194,125,120,.38);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.guide-video-launch::before {
  content: "▶";
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--page);
  font-size: .62rem;
  line-height: 1;
  padding-left: .08rem;
}
/* Deliberately no hover/open colour change: the control stays visually quiet. */
.guide-video-launch:hover,
.guide-video-launch[aria-expanded="true"] {
  border-color: rgba(194,125,120,.38);
  background: var(--page);
  color: var(--ink);
}
.guide-video-launch:focus-visible,
.guide-video-pause:focus-visible {
  outline: 3px solid rgba(194,125,120,.42);
  outline-offset: 3px;
}
.guide-video-inline[hidden] { display: none !important; }
.guide-video-inline {
  width: 100%;
  margin: 12px 0 0;
}
.guide-video-inline video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 430px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.guide-video-pause {
  display: inline-block;
  min-height: 36px;
  margin: 8px 0 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--plum);
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
}
.guide-video-pause:hover { color: var(--plum); }
@media (max-width: 640px) {
  .guide-video-disclosure,
  .guide-video-inline,
  .guide-video-inline video {
    width: 100%;
    max-width: 100%;
  }
}