/* Encounter Office gebruikershandleiding */
.guide-hero {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
    var(--card);
}
@media (min-width: 900px) {
  .guide-hero { grid-template-columns: minmax(0, 1.65fr) minmax(16rem, .75fr); align-items: center; }
}
.guide-eyebrow { margin: 0 0 .45rem; color: var(--primary); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-hero__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 750; letter-spacing: -.025em; }
.guide-hero__text { max-width: 54rem; margin: .65rem 0 0; color: var(--muted-foreground); line-height: 1.7; }
.guide-hero__start { display: grid; gap: .35rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.guide-hero__start span:last-child { color: var(--muted-foreground); font-size: .9rem; line-height: 1.5; }
.guide-hero__step { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.guide-chapter-card { display: flex; min-height: 18rem; flex-direction: column; overflow: hidden; }
.guide-chapter-card > * { display: flex; flex-direction: column; }
.guide-chapter-card__number { display: grid; width: 2rem; height: 2rem; place-items: center; margin-bottom: .6rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: .78rem; font-weight: 800; }
.guide-chapter-card--accent { border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 3.5%, transparent); }
.guide-when { min-height: 4.3rem; margin-bottom: 1rem; color: var(--muted-foreground); font-size: .88rem; line-height: 1.55; }
.guide-chapter-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1050px) {
  .guide-chapter-layout { grid-template-columns: 17rem minmax(0, 1fr); }
  .guide-toc { position: sticky; top: 1rem; }
}
.guide-toc { padding: .9rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--card); }
.guide-toc h2 { margin: 1rem .55rem .55rem; font-size: .83rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.guide-toc ol { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.guide-toc a { display: block; padding: .55rem; border-radius: .45rem; color: var(--muted-foreground); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.guide-toc a:hover { background: var(--muted); color: var(--foreground); }
.guide-content { display: grid; gap: 1rem; min-width: 0; }
.guide-professional-intro, .guide-grid-hero { scroll-margin-top: 1rem; }
.guide-purpose-card { overflow: hidden; border-color: color-mix(in srgb, var(--primary) 26%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, var(--card)), var(--card) 58%); }
.guide-purpose-text { max-width: 62rem; color: var(--foreground); font-size: 1rem; line-height: 1.7; }
.guide-card-label { display: flex; gap: .45rem; align-items: center; width: fit-content; margin-bottom: .5rem; color: var(--primary); font-size: .73rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.guide-card-label--success { color: rgb(5 150 105); }
.dark .guide-card-label--success { color: rgb(110 231 183); }
.guide-fact-grid { display: grid; gap: .75rem; }
@media (min-width: 760px) { .guide-fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-fact { display: grid; gap: .35rem; align-content: start; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in srgb, var(--background) 72%, transparent); }
.guide-fact > span { color: var(--muted-foreground); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.guide-fact > strong { font-size: .9rem; font-weight: 650; line-height: 1.55; }
.guide-fact--result { border-color: color-mix(in srgb, rgb(16 185 129) 34%, var(--border)); background: color-mix(in srgb, rgb(16 185 129) 8%, var(--card)); }
.guide-start-grid { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 760px) { .guide-start-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.guide-start-grid > * { height: 100%; }
.guide-subtitle { display: flex; gap: .55rem; align-items: center; font-size: 1rem; }
.guide-check-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.guide-check-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted-foreground); font-size: .9rem; line-height: 1.5; }
.guide-check-list svg { flex: 0 0 auto; margin-top: .15rem; color: var(--primary); }
.guide-check-list--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .8rem; }
.guide-check-list--large li { padding: .75rem; border-radius: .65rem; background: color-mix(in srgb, rgb(16 185 129) 7%, var(--muted)); color: var(--foreground); }
.guide-check-list--large svg { color: rgb(5 150 105); }
.dark .guide-check-list--large svg { color: rgb(110 231 183); }
.guide-reference-section { scroll-margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in srgb, var(--muted) 32%, var(--card)); }
.guide-reference-heading { margin-bottom: 1rem; }
.guide-reference-heading--steps { margin: .75rem 0 0; padding: 1rem 0 .2rem; }
.guide-reference-heading h2 { margin: 0; font-size: 1.28rem; font-weight: 780; }
.guide-reference-heading > p:last-child { margin: .3rem 0 0; color: var(--muted-foreground); line-height: 1.55; }
.guide-definition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.guide-definition-card { min-height: 100%; box-shadow: none; }
.guide-definition-card > div:first-child { padding-bottom: .35rem; }
.guide-definition-card p { margin: 0; color: var(--muted-foreground); font-size: .88rem; line-height: 1.55; }
.guide-definition-term { font-size: .94rem; }
.guide-definition-card--warning { border-left: 3px solid rgb(245 158 11); }
.guide-completion-card { scroll-margin-top: 1rem; border-color: color-mix(in srgb, rgb(16 185 129) 35%, var(--border)); }
.guide-chapter-layout--datagrid { margin-top: 1.25rem; }
.guide-section--manual { margin-bottom: 1rem; }
.guide-section__heading--manual > span svg { width: 1rem; height: 1rem; }
.guide-section__heading--manual > span { background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); }
.guide-screenshot { overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: .9rem; background: var(--muted); box-shadow: 0 14px 35px rgb(15 23 42 / .08); }
.guide-screenshot img { display: block; width: 100%; max-height: 38rem; object-fit: cover; object-position: top; }
.guide-screenshot figcaption { padding: .65rem .85rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .82rem; }
.guide-section { scroll-margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--card); }
.guide-section__heading { display: flex; gap: .85rem; align-items: flex-start; }
.guide-section__heading > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .82rem; font-weight: 800; }
.guide-section__heading h2 { margin: 0; font-size: 1.1rem; font-weight: 750; }
.guide-section__heading p { margin: .25rem 0 0; color: var(--muted-foreground); line-height: 1.55; }
.guide-steps { display: grid; gap: .65rem; margin: 1rem 0 0 2.9rem; padding: 0; list-style: decimal; }
.guide-steps li { padding-left: .25rem; line-height: 1.6; }
.guide-note { display: flex; gap: .65rem; margin: 1rem 0 0 2.8rem; padding: .8rem; border-radius: .65rem; font-size: .9rem; line-height: 1.5; }
.guide-note svg { flex: 0 0 auto; margin-top: .1rem; }
.guide-note--check { background: rgb(16 185 129 / .11); color: rgb(4 120 87); }
.dark .guide-note--check { color: rgb(110 231 183); }
.guide-note--warning { background: rgb(245 158 11 / .13); color: rgb(146 64 14); }
.dark .guide-note--warning { color: rgb(253 186 116); }
.guide-visual-walkthrough { margin: 1.25rem 0 .25rem 2.8rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.guide-visual-walkthrough__heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .9rem; }
.guide-visual-walkthrough__heading h3 { margin: 0; font-size: 1rem; font-weight: 780; }
.guide-visual-walkthrough__heading p:last-child { max-width: 49rem; margin: .3rem 0 0; color: var(--muted-foreground); font-size: .88rem; line-height: 1.55; }
.guide-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .85rem; }
.guide-visual-frame { display: flex; min-width: 0; }
.guide-visual-card { min-width: 0; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 16%, var(--border)); box-shadow: none; }
.guide-visual-frame > .guide-visual-card { width: 100%; }
.guide-visual-card__header { padding: .85rem .9rem .55rem; }
.guide-visual-card__identity { display: flex; gap: .65rem; align-items: center; }
.guide-visual-card__number { display: grid; width: 1.85rem; height: 1.85rem; flex: 0 0 auto; place-items: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .76rem; font-weight: 850; }
.guide-visual-card__title { font-size: .9rem; }
.guide-visual-card__content { display: grid; gap: .75rem; padding: 0 .9rem .9rem; }
.guide-step-shot-button { display: block; width: 100%; height: auto; padding: 0; border: 0; border-radius: .65rem; background: transparent; white-space: normal; }
.guide-step-shot-button:hover, .guide-step-shot-button:focus-visible { background: transparent; }
.guide-step-shot-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 3px; }
.guide-step-shot { overflow: hidden; aspect-ratio: 16 / 9; margin: 0; border: 1px solid var(--border); border-radius: .65rem; background: var(--muted); }
.guide-step-shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; background: var(--background); }
.guide-step-shot figcaption { display: flex; position: absolute; right: .55rem; bottom: .55rem; gap: .35rem; align-items: center; padding: .35rem .55rem; border-radius: .45rem; background: rgb(15 23 42 / .88); color: white; font-size: .72rem; font-weight: 700; opacity: 0; transition: opacity .15s ease; }
.guide-step-shot-button:hover figcaption, .guide-step-shot-button:focus-visible figcaption { opacity: 1; }
.guide-step-shot-button .guide-step-shot { position: relative; }
.guide-image-viewer { display: grid; width: 96vw !important; max-width: min(96vw, 120rem) !important; height: 94vh; max-height: 94vh; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.guide-image-viewer__keyboard-surface { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; outline: none; }
.guide-image-viewer__figure { display: grid; min-height: 0; margin: 0; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: .75rem; background: rgb(241 245 249); }
.guide-image-viewer__figure img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: calc(94vh - 12rem); object-fit: contain; }
.guide-image-viewer__explanation { margin: 0; color: var(--foreground); font-size: .9rem; line-height: 1.5; }
.guide-image-viewer__footer { align-items: center; }
.guide-image-viewer__counter { margin-right: auto; color: var(--muted-foreground); font-size: .84rem; font-weight: 700; }
.guide-visual-explanation { display: flex; gap: .55rem; align-items: flex-start; padding: .72rem; border-radius: .6rem; background: color-mix(in srgb, var(--primary) 7%, var(--muted)); color: var(--foreground); }
.guide-visual-explanation svg { flex: 0 0 auto; margin-top: .1rem; color: var(--primary); }
.guide-visual-explanation p { margin: 0; font-size: .85rem; line-height: 1.55; }
.guide-visual-explanation--check { background: rgb(16 185 129 / .1); }
.guide-visual-explanation--check svg { color: rgb(5 150 105); }
.guide-visual-explanation--warning { background: rgb(245 158 11 / .12); }
.guide-visual-explanation--warning svg { color: rgb(217 119 6); }
.guide-related { padding: 1.15rem; border: 1px dashed var(--border); border-radius: .9rem; }
.guide-related h2 { margin: 0 0 .8rem; font-size: 1rem; font-weight: 750; }
.guide-chapter-navigation { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); gap: .75rem; align-items: center; padding-top: .5rem; }
@media (max-width: 700px) {
  .guide-steps, .guide-note, .guide-visual-walkthrough { margin-left: 0; }
  .guide-visual-walkthrough__heading { flex-direction: column; }
  .guide-chapter-navigation { grid-template-columns: 1fr; }
  .guide-chapter-navigation > span { display: none; }
}