@import url('guide-samples.css');
@font-face{font-family:Inter;src:url("assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

.guide-page{background:var(--ink);color:var(--ink)}.guide-nav{position:sticky;top:1rem;z-index:10;margin-top:1rem;padding:.5rem;border:1px solid var(--ink);background:var(--paper)}.guide-nav a{display:inline-block;padding:.5rem 1rem;border-radius:.75rem}.guide-nav a:first-child{background:#fff}.guide-nav a:hover{background:#fff}
.guide-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:6rem 0}.guide-logo{width:126px;height:32px}.guide-header-name{margin-top:1.5rem;font-size:.875rem}.guide-section-title{font:700 3.5rem/1.5 "Inter",Arial,sans-serif;padding:.25rem .5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--ink)}
.guide-group{display:grid;gap:1rem;padding-bottom:4rem}.guide-group-title{font:700 2rem/1 "Inter",Arial,sans-serif;padding:1rem;margin-bottom:1rem;background:var(--paper)}.guide-group-title span{font-size:1rem;font-weight:400;line-height:1}.guide-small-title{font:400 1rem/1 var(--font)}
.guide-example-row{display:grid;grid-template-columns:15rem 1fr;column-gap:1.5rem;align-items:start}.guide-label{width:max-content;max-width:100%;font:400 .75rem/1.5 var(--font);padding:.25rem .5rem;background:#e8edff;color:#1e51f7}.guide-html-label{background:#f9eff6;color:#bb4198}.guide-example-body{min-width:0}.guide-example-card{display:grid;gap:1rem;padding-bottom:1rem}.guide-buttons{display:grid;grid-template-columns:1fr;gap:1.5rem 1rem;padding:1.5rem 0}.guide-button-row{grid-template-columns:19rem auto;width:max-content}.guide-black{background:var(--ink)}.guide-hidden{display:none}.guide-icons{display:flex;flex-wrap:wrap;gap:1rem}.guide-form-examples{padding-right:1.5rem}.guide-schemes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.guide-empty-box{width:3rem;height:3rem;background:#eee;position:relative}.guide-empty-space{height:4rem;padding:2rem;display:flex;position:relative;border:1px dashed #d0d0d0}.guide-example-field{width:100%}.guide-example ul,.guide-example ol{padding-left:2.5rem;list-style:disc}.guide-example ol{list-style:decimal}.guide-rich p{margin-bottom:1rem}.guide-demo-form{display:grid;gap:1rem}.guide-icon{width:24px;height:24px}
@media(max-width:767px){.guide-header{padding:3rem 0}.guide-example-row{grid-template-columns:auto 1fr}.guide-button-row{grid-template-columns:19rem auto}.guide-schemes{grid-template-columns:1fr}.guide-header-name{font-size:.875rem}}
/* Match the reference documentation surface and its reusable example rows. */
.guide-page{background:#fff}.guide-nav{border:0}.guide-header{padding:3rem 0;align-items:flex-start}.guide-logo{width:158px;height:64px;padding:16px;background:#121212;margin-left:6px}.guide-header-name{font-size:1rem;line-height:1.5}
.guide-header .pill{border:1px solid rgba(1,1,3,.05);color:var(--ink);background:none;backdrop-filter:none;font-family:"Inter",Arial,sans-serif;padding:.75rem 1rem}
.guide-labels{display:flex;gap:4px;flex-wrap:wrap}.guide-icons{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}.guide-rich::before,.guide-rich::after{content:"";display:table}.guide-rich::after{clear:both}
.guide-text-style-2lines,.guide-text-style-3lines{display:-webkit-box!important;-webkit-box-orient:vertical;overflow:hidden}.guide-text-style-2lines{-webkit-line-clamp:2}.guide-text-style-3lines{-webkit-line-clamp:3}.guide-text-style-italic{font-style:italic}.guide-text-style-strikethrough{text-decoration:line-through}.guide-text-style-allcaps{text-transform:uppercase}.guide-text-style-nowrap{white-space:nowrap}
.guide-radius-list{display:grid;gap:24px}.guide-radius-large{grid-template-columns:repeat(2,1fr)}.guide-radius-medium{grid-template-columns:repeat(3,1fr)}.guide-radius-small{grid-template-columns:repeat(6,1fr)}.guide-radius-box{aspect-ratio:1;background:#eee}.guide-radius-large .guide-radius-box{border-radius:16px}.guide-radius-medium .guide-radius-box{border-radius:12px}.guide-radius-small .guide-radius-box{border-radius:8px}.guide-shadows{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:991px){.guide-icons{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.guide-icons{grid-template-columns:1fr}.guide-shadows{grid-template-columns:repeat(4,1fr)}}
.guide-section-title{border:0}.guide-example-row{align-items:center}

.guide-button-group{flex-wrap:wrap}.guide-icon{max-width:100%;width:100%;height:100%}
.guide-example-field[type=checkbox],.guide-example-field[type=radio]{width:auto;min-height:0;position:absolute}
.guide-example-card{justify-items:start}.guide-card-stretch{justify-items:stretch}
.guide-example-card:has(>.guide-example-body>.guide-hidden)>.guide-example-body{display:none}
.guide-demo-aspect-ratio-square{width:48px;aspect-ratio:1}.guide-demo-aspect-ratio-portrait{width:48px;aspect-ratio:2/3}.guide-demo-aspect-ratio-landscape{width:48px;aspect-ratio:3/2}.guide-demo-aspect-ratio-widescreen{width:48px;aspect-ratio:16/9}
.guide-demo-rl-styleguide_ratio-bg{position:absolute;inset:0}.guide-demo-rl-styleguide_color-spacer{height:16px}
.guide-empty-space{border:0}.guide-header-icon{width:16px;height:16px;display:flex}
@media(max-width:991px){.guide-example-card:has(>.guide-example-body>.guide-demo-hide-tablet)>.guide-example-body{display:none}}
@media(max-width:767px){.guide-example-card:has(>.guide-example-body>.guide-demo-hide-mobile-landscape)>.guide-example-body{display:none}}
@media(max-width:479px){.guide-example-card:has(>.guide-example-body>.guide-demo-hide-mobile-portrait)>.guide-example-body{display:none}}
.guide-example-body>ul,.guide-example-body>ol{display:flow-root}
.guide-rich li:last-child,.guide-rich>p:last-child{margin-bottom:0}
.guide-forms-demo{display:grid;gap:24px;margin-bottom:15px}
.guide-forms-demo .field label{font-weight:400}.guide-forms-demo .field textarea{height:180px;min-height:180px}
.guide-forms-demo select{width:100%;height:52px;padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f4f3ea;font:400 16px/1.4 var(--font)}
.guide-choice{display:flex;align-items:center;gap:8px;height:24px;font:400 16px/24px var(--font)}
.guide-choice input{appearance:none;width:18px;height:18px;min-height:0;margin:0;border:1px solid #010103;background:transparent;flex:none;position:static;opacity:1}
.guide-checkbox{border-radius:4px}.guide-radio{border-radius:50%}.guide-choice input:checked{background:#b6e400;box-shadow:inset 0 0 0 3px #fff}
.guide-submit{padding:12px 24px;border:1px solid #010103;border-radius:0;background:#010103;color:#fff;font:400 16px/24px var(--font);cursor:pointer}
.guide-form-dark .field label,.guide-form-dark .guide-choice{color:#fff}.guide-form-dark .field input,.guide-form-dark .field textarea,.guide-form-dark select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.4);color:#fff}.guide-form-dark .guide-choice input{border-color:#fff}.guide-form-dark .guide-submit{background:#fff;border-color:#fff;color:#010103}
.guide-label{display:inline-block}
.guide-logo-box{width:158px;max-width:100%;padding:16px;background:#121212}
.guide-logo{display:inline-block;vertical-align:middle;width:auto;height:auto;max-width:100%;padding:0;background:none;margin:0}
@media(max-width:767px){.guide-header-name{margin-top:20px}}
.guide-logo-box{width:max-content;min-width:0;max-width:100%;padding:16px;background:#121212}
@media(max-width:991px){.guide-icons{grid-template-columns:1fr}.guide-example-row{grid-template-columns:auto 1fr}.guide-button-row{grid-template-columns:19rem auto}}
.guide-logo-box{width:auto}.guide-header-icon{width:24px;height:24px}.guide-header .pill{border:0}
.guide-demo-rl-styleguide_ratio-bg{position:relative;inset:auto;z-index:-1;height:100%}
.guide-radius-box{background:transparent;border:1px solid #010103}.guide-radius-large .guide-radius-box{border-radius:240px}.guide-radius-medium .guide-radius-box{border-radius:0}.guide-radius-small .guide-radius-box{border-radius:12px}
.guide-example-card{justify-items:stretch}.guide-empty-box{width:100%}
.guide-example-card{justify-items:start}.guide-card-stretch{justify-items:stretch}
.guide-example-card:has(.guide-demo-container-small,.guide-demo-container-medium,.guide-demo-container-large,.guide-demo-padding-global,.guide-demo-page-wrapper,.guide-demo-main-wrapper)>.guide-example-body{width:100%}
.guide-example-card:has(.guide-button-group)>.guide-example-body{width:100%}
.guide-button-group>.guide-empty-box{width:48px;flex:none}
.guide-example-card:has(.guide-demo-page-wrapper,.guide-demo-main-wrapper)>.guide-example-body{width:48px}
.guide-demo-container-small,.guide-demo-container-medium,.guide-demo-container-large{margin-left:auto;margin-right:auto}
.guide-demo-max-width-full-tablet,.guide-demo-max-width-full-mobile-landscape,.guide-demo-max-width-full-mobile-portrait{width:48px}
@media(max-width:991px){.guide-demo-max-width-full-tablet{width:100%}}
@media(max-width:767px){.guide-demo-max-width-full-mobile-landscape{width:100%}}
@media(max-width:479px){.guide-demo-max-width-full-mobile-portrait{width:100%}}
.guide-split-word,.guide-split-char{position:relative;display:inline-block}.guide-split-char{opacity:0}
.guide-example-row:has(input:not([type=checkbox]):not([type=radio]))>.guide-example-body{min-width:227px}

/* Eigen responsive correctie: inhoud blijft binnen zijn kolom. */
.guide-section,.guide-group,.guide-example-row,.guide-example-body,.guide-group-title,.guide-label{min-width:0;max-width:100%}.guide-group-title span,.guide-label{white-space:normal;overflow-wrap:anywhere}.guide-example-body{overflow-wrap:anywhere}@media(max-width:767px){.guide-example-row{grid-template-columns:minmax(0,1fr)!important;display:grid!important;gap:16px!important}.guide-label{width:auto!important}.guide-header{flex-wrap:wrap}.guide-nav{flex-wrap:wrap}.guide-form-row{grid-template-columns:minmax(0,1fr)!important}}

.guide-buttons,.guide-labels,.guide-button-row,.guide-example-card{min-width:0;max-width:100%;width:100%}.guide-buttons{grid-template-columns:minmax(0,1fr)}.guide-example-row:has(input:not([type=checkbox]):not([type=radio]))>.guide-example-body{min-width:0}.guide-example{max-width:100%}@media(max-width:767px){.guide-button-row{width:100%;grid-template-columns:minmax(0,1fr)}.guide-text-style-nowrap{white-space:normal!important}.guide-example{overflow-wrap:anywhere}}

.guide-section-title,.guide-group-title{overflow-wrap:anywhere}@media(max-width:767px){.guide-section-title{font-size:2rem;line-height:1.2}.guide-group-title{font-size:1.5rem;line-height:1.2}.guide-shadows{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-shadows .guide-example{min-width:0;overflow-wrap:anywhere}}

.guide-rich,.guide-rich *{color:#111!important}.guide-black input,.guide-black textarea{color:#fff!important}.guide-black input::placeholder,.guide-black textarea::placeholder{color:#b7b7b7!important}.guide-icons img{min-width:16px;min-height:16px;object-fit:contain}