/* d6 — Salon: crème, serif-koppen (Newsreader), haarlijnen, veel lucht. Als een jaarverslag dat software werd. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&display=swap");
.db {
  --font-head: "Newsreader", Georgia, serif; --font-body: "Satoshi", sans-serif;
  --sand: #F8F4EC; --bone: #FDFBF6; --line: #E6DFD2;
  --amber: #B8904A; --amber-50: #F7F0E3; --amber-100: #EFE2C8; --amber-200: #E2CDA1; --amber-300: #D4B77C; --amber-600: #9C7736; --amber-800: #5E4519;
  --c900: #1E1B16; --c800: #2B2722; --c700: #4A453D; --c600: #6B655B; --c500: #8B8478; --c400: #ADA69A; --c300: #CFC8BB;
  --em50: #EEF3EC; --em200: #CCDCC8; --em700: #3B6B45; --rose50: #F8ECE7; --rose700: #9E4A34;
  font-size: 14px;
}
.db h1, .db h2, .db h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: -.01em; font-variation-settings: "opsz" 48; }
.db .eyebrow { font-weight: 500; letter-spacing: .24em; font-size: 10px; color: var(--amber-600); }
.db .tab, .db-kpi__val, .db-big, .db-sigcard__impact, .db-goal .big, .db-row .ttl b, .db-funnel__row .n, .db-slider label b { font-family: var(--font-head); font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.db-kpi, .db-sec, .db-sigcard, .db-scout, .db-scencard, .db-goal, .db-super, .db-menu, .db-soon { border-radius: 6px !important; }

.db-side { width: 264px; background: var(--sand); border-right: 1px solid var(--line); }
.db-side__logo { font-family: var(--font-head); font-size: 20px; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 28px 24px 24px; }
.db-side__nav { padding: 0 16px 16px; gap: 26px; }
.db-nav { border-radius: 4px; padding: 7px 10px; font-size: 14px; }
.db-nav:hover { background: rgba(184,144,74,.08); }
.db-nav.is-active { background: transparent; color: var(--c900); box-shadow: inset 2px 0 0 var(--amber); border-radius: 0; font-weight: 500; }
.db-nav.is-active svg { color: var(--amber); }
.db-nav .dot { background: var(--amber); }
.db-nav .pill { background: transparent; border: 1px solid var(--amber-300); color: var(--amber-600); }
.db-ai { background: transparent; border: 1px solid var(--amber-300); color: var(--amber-600); }
.db-super { background: #fff; border-color: var(--line); }
.db-super.is-active { background: var(--c900); border-color: var(--c900); }
.db-super__n { font-family: var(--font-head); font-weight: 400; font-size: 15px; } .db-super__n span { background: var(--amber-100); color: var(--amber-800); }
.db-super.is-active .db-super__n span { background: var(--amber); color: #fff; }
.db-side__foot { border-top-color: var(--line); }
.db-goal { background: #fff; border-color: var(--line); }
.db-goal h3 { font-size: 15px; }
.db-bar { background: var(--line); } .db-bar i, .db-prog i { background: var(--amber); }
.db-avatar--dark { background: var(--c900); border-color: var(--c900); }

.db-top { height: 64px; background: rgba(248,244,236,.9); border-bottom-color: var(--line); }
.db-search input { background: #fff; border-color: var(--line); border-radius: 4px; }
.db-search input:focus { border-color: var(--amber); box-shadow: none; }
.db-search kbd { background: var(--sand); }
.db-tour { background: transparent; border-color: var(--amber-300); color: var(--amber-800); border-radius: 4px; letter-spacing: .04em; }
.db-tour:hover { background: var(--amber-50); }
.db-bell, .db-account { background: #fff; border-color: var(--line); border-radius: 4px; }
.db-bell__dot { background: var(--amber); }
.db-content { padding: 48px 56px; }
.db-view { gap: 44px; }
.db-ph { border-bottom-color: var(--line); padding-bottom: 28px; }
.db-ph h1 { font-size: 44px; font-weight: 300; margin-top: 14px; }
.db-ph .desc { font-size: 15px; color: var(--c600); }

.db-kpi { background: #fff; border-color: var(--line); padding: 26px; }
.db-kpi:hover { border-color: var(--amber-300); box-shadow: none; }
.db-kpi--accent { background: var(--c900); border-color: var(--c900); }
.db-kpi--accent .db-delta--up { background: var(--amber); color: #fff; }
.db-kpi--accent .spark polyline { stroke: var(--amber); }
.spark polyline[stroke="#1F2937"] { stroke: var(--c700); }
.db-kpi__val { font-size: 40px; margin-top: 28px; }
.db-delta { font-weight: 500; font-size: 10.5px; letter-spacing: .04em; border-radius: 2px; }
.db-sec { background: #fff; border-color: var(--line); }
.db-sec--elev { box-shadow: none; }
.db-sec--dark { background: var(--c900); border-color: var(--c900); }
.db-sec--gold { background: var(--bone); border-color: var(--amber-300); box-shadow: none; }
.db-sec__head { padding: 26px 26px 14px; } .db-sec__body { padding: 8px 26px 26px; }
.db-sec__head h3 { font-size: 22px; }
.db-sec__head .desc { margin-top: 6px; }
.db-sec__link { color: var(--amber-800); letter-spacing: .04em; }
.db-chart .grid line { stroke: var(--line); stroke-dasharray: none; } .db-chart text { fill: var(--c500); }
.db-chart path.line[stroke="#F5A623"] { stroke: var(--amber); } .db-chart stop[stop-color="#F5A623"] { stop-color: var(--amber); } .db-legend i[style*="F5A623"] { background: var(--amber) !important; }
.db-chart path.line[stroke="#1F2937"] { stroke: var(--c900); } .db-chart stop[stop-color="#1F2937"] { stop-color: var(--c900); }
.db-tip { background: var(--c900); border-radius: 4px; } .db-tip b { color: var(--amber-200); }
.db-msg__body { background: var(--sand); border-color: transparent; border-radius: 2px 10px 10px 10px; }
.db-msg[data-agent="six"] .db-msg__body { background: var(--c900); }
.db-msg--me .db-msg__body { background: var(--amber-50); border-radius: 10px 2px 10px 10px; }
.db-msg__who { font-family: var(--font-head); font-weight: 500; font-size: 13.5px; }
.db-mark { border-radius: 50%; font-family: var(--font-head); font-weight: 500; }
.db-ask { border-color: var(--line); border-radius: 4px; } .db-ask button { background: var(--c900); border-radius: 3px; }
.db-badge { background: transparent; border-color: var(--line); color: var(--c600); font-weight: 500; letter-spacing: .12em; font-size: 10px; border-radius: 2px; }
.db-badge--success { border-color: var(--em200); color: var(--em700); } .db-badge--amber { border-color: var(--amber-300); color: var(--amber-800); } .db-badge--dark { background: var(--c900); color: #fff; border-color: var(--c900); } .db-badge--rose { border-color: #E4C4B8; color: var(--rose700); }
.db-btn { background: #fff; border-color: var(--line); border-radius: 4px; } .db-btn--dark { background: var(--c900); border-color: var(--c900); color: #fff; }
.db-row .code { background: var(--sand); border-color: var(--line); border-radius: 3px; font-family: var(--font-head); }
.db-list > * + *, .db-table__row + .db-table__row, .db-table__head, .db-sigcard__foot, .db-stat3 { border-color: var(--line); }
.db-table__head { letter-spacing: .16em; font-weight: 500; }
.db-funnel__row .lbl { font-family: var(--font-head); font-size: 15px; }
.db-funnel__track { background: var(--sand); border-radius: 3px; } .db-funnel__bar { border-radius: 3px; }
.db-funnel__bar--1 { background: var(--amber-100); color: var(--amber-800); } .db-funnel__bar--2 { background: var(--amber); color: #fff; } .db-funnel__bar--3 { background: var(--c900); color: #fff; }
.db-prog { background: var(--line); }
.db-sigcard { background: #fff; border-color: var(--line); padding: 24px; }
.db-sigcard[data-sev="hoog"] { border-left: 2px solid var(--rose700); } .db-sigcard[data-sev="midden"] { border-left: 2px solid var(--amber); }
.db-sigcard__title { font-family: var(--font-head); font-weight: 500; font-size: 18px; }
.db-sigcard__impact { font-size: 28px; }
.db-chip { background: #fff; border-color: var(--line); border-radius: 3px; }
.db-chip.is-done { background: var(--c900); border-color: var(--c900); } .db-chip.is-done svg { color: var(--amber); }
.db-scout { background: var(--sand); border-color: transparent; }
.db-scencard { background: #fff; border-color: var(--line); }
.db-scencard.is-rec { border-color: var(--amber); box-shadow: none; }
.db-scencard__k { border-radius: 50%; font-family: var(--font-head); } .db-scencard.is-rec .db-scencard__k { background: var(--amber); color: #fff; }
.db-scencard__t { font-family: var(--font-head); font-weight: 500; font-size: 16px; }
.db-slider label b { font-size: 26px; } .db-slider input[type=range] { accent-color: var(--amber); }
.db-soon { border-color: var(--line); } .db-soon .ic { background: var(--sand); color: var(--amber); }
.db-source { border-radius: 4px; } .db-source .n { font-family: var(--font-head); font-size: 16px; } .db-source .st { background: rgba(184,144,74,.25); color: var(--amber-200); } .db-source .st i { background: var(--amber); }
.db-gov svg { color: var(--amber); }
.db-live { color: var(--em700); }
.db-auto { background: var(--c900); border-radius: 4px; } .db-auto circle.ring { stroke: var(--amber); }