/* koffiegeld.nl, calculator (live example + drawer "Rit narekenen"). Themed via --kfg-* tokens: the defaults below are landing A (light/blue); landing B sets its own tokens on (dark/amber). */ :root{ --kfg-accent:#1d4ed8;--kfg-accent-d:#1e40af;--kfg-on-accent:#fff; --kfg-ink:#0f172a;--kfg-dim:#64748b;--kfg-line:#e2e8f0; --kfg-bg:#f8fafc;--kfg-card:#fff;--kfg-soft:#f8fafc;--kfg-input:#fff; --kfg-focus:rgba(29,78,216,.12);--kfg-scheme:light; --kfg-shadow:0 8px 30px rgba(15,23,42,.06);--kfg-overlay:rgba(15,23,42,.45);--kfg-drawer-shadow:-20px 0 60px rgba(15,23,42,.25); --kfg-notice-bg:#fff7ed;--kfg-notice-line:#fdba74;--kfg-notice-ink:#9a3412; --kfg-bad:#dc2626;--kfg-bad-bg:rgba(220,38,38,.06);--kfg-warn:#d97706; } /* live card (on the page and in the drawer) */ .kfg-live{background:var(--kfg-card);border:1px solid var(--kfg-line);border-radius:14px;margin-top:30px;overflow:hidden;box-shadow:var(--kfg-shadow);color:var(--kfg-ink)} .kfg-live .head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--kfg-line);flex-wrap:wrap} .kfg-live .head b{color:var(--kfg-ink)} .kfg-live .head span{font-size:13px;color:var(--kfg-dim)} .kfg-live .head span.kfg-livetag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--kfg-accent-d);color:var(--kfg-on-accent);border-radius:99px;padding:3px 9px;line-height:1.3;vertical-align:middle;margin-left:8px} .kfg-after{margin-top:16px;font-size:14.5px;color:var(--kfg-dim);max-width:680px} /* trip editor */ /* the two date-time fields keep at least 180px (otherwise the browser clips the time); "Opbouw" absorbs the rest */ .kfg-trips{--trip-cols:36px minmax(180px,1fr) minmax(180px,1fr) minmax(0,1.3fr) 96px 30px;font-size:14.5px;color:var(--kfg-ink);padding:6px 20px 16px} .kfg-trips-head,.kfg-trips-row{display:grid;grid-template-columns:var(--trip-cols);gap:10px;align-items:start} .kfg-trips-head{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--kfg-dim);background:var(--kfg-soft);margin:0 -20px;padding:10px 20px;border-bottom:1px solid var(--kfg-line)} .kfg-trips-row{padding:10px 0;border-top:1px solid var(--kfg-line)} .kfg-trips-body>.kfg-trips-row:first-child{border-top:none} .kfg-trips-number{font-weight:600;color:var(--kfg-dim);font-size:13px;padding-top:10px} .kfg-trips-cell{display:flex;flex-direction:column;gap:3px;min-width:0} .kfg-trips input[type=datetime-local]{font:inherit;font-size:14.5px;padding:8px 10px;border:1px solid var(--kfg-line);border-radius:8px;background:var(--kfg-input);color:var(--kfg-ink);color-scheme:var(--kfg-scheme);outline:none;min-width:0;width:100%;font-variant-numeric:tabular-nums;transition:.12s} .kfg-trips input[type=datetime-local]:focus{border-color:var(--kfg-accent);box-shadow:0 0 0 3px var(--kfg-focus)} .kfg-trips-row[data-status=invalid] [data-field=to]{border-color:var(--kfg-warn)} .kfg-trips-weekday{font-size:11.5px;color:var(--kfg-dim);padding-left:2px;min-height:14px} .kfg-trips-message{font-size:11.5px;padding-left:2px} .kfg-trips-message:empty{display:none} .kfg-trips-message.hint{color:var(--kfg-warn)} .kfg-trips-message.err{color:var(--kfg-bad);font-weight:600} .kfg-trips-breakdown{font-size:13px;color:var(--kfg-dim);padding-top:9px;line-height:1.4;min-width:0} .kfg-trips-breakdown-text{color:var(--kfg-ink)} .kfg-trips-why[hidden]{display:none} .kfg-trips-why{display:block;background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:var(--kfg-accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .kfg-trips-amount{text-align:right;font-variant-numeric:tabular-nums;padding-top:8px} .kfg-trips-amount b{display:block;font-size:15px;white-space:nowrap;color:var(--kfg-ink)} .kfg-trips-amount small{display:block;font-size:11px;color:var(--kfg-dim);line-height:1.3} .kfg-trips-row[data-status=multi_day] .kfg-trips-amount b{color:var(--kfg-accent)} .kfg-trips-actions{display:flex;justify-content:flex-end;padding-top:7px} .kfg-trips-actions button{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--kfg-dim);cursor:pointer;font:inherit;font-size:13px;line-height:1;padding:0} .kfg-trips-actions button:hover{border-color:var(--kfg-line);color:var(--kfg-ink)} .kfg-trips-explanation{font-size:13px;color:var(--kfg-dim);padding:0 0 12px 56px;line-height:1.5} .kfg-trips-explanation ol{margin:0;padding-left:18px;display:grid;gap:3px} .kfg-trips-explanation li:last-child{color:var(--kfg-ink);font-weight:600} .kfg-trips-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--kfg-line);padding-top:12px;margin-top:2px} .kfg-ghost{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--kfg-line);background:var(--kfg-card);color:var(--kfg-ink);cursor:pointer} .kfg-ghost:hover{border-color:var(--kfg-accent);color:var(--kfg-accent)} .kfg-trips-total{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--kfg-dim)} .kfg-trips-total b{font-size:22px;color:var(--kfg-ink);font-variant-numeric:tabular-nums} /* overlapping trips: the one departing later is flagged and left out of the total, the other one is marked lightly. Flagged rows stretch into the card's side gutters so the marker sits at the card edge and never touches the row number. */ .kfg-trips-row[data-conflict=culprit],.kfg-trips-row[data-conflict=partner]{position:relative;margin:0 -20px;padding-left:20px;padding-right:20px} .kfg-trips-row[data-conflict=culprit]::before,.kfg-trips-row[data-conflict=partner]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kfg-warn)} .kfg-trips-row[data-conflict=culprit]::before{background:var(--kfg-bad)} .kfg-trips-row[data-conflict=culprit]{background:var(--kfg-bad-bg)} .kfg-trips-row[data-conflict=culprit] input[data-field=from]{border-color:var(--kfg-bad)} .kfg-trips-row[data-conflict=partner] input[data-field=to]{border-color:var(--kfg-warn)} .kfg-trips-row[data-conflict=culprit] .kfg-trips-amount small{color:var(--kfg-bad);font-weight:600} .kfg-trips-row[data-conflict=culprit] .kfg-trips-breakdown-text{color:var(--kfg-dim);text-decoration:line-through} .kfg-trips-overlap{grid-column:1/-1;font-size:12.5px;font-weight:600;color:var(--kfg-bad);padding:0 0 4px 46px} .kfg-trips-overlap[hidden]{display:none} .kfg-trips-count em{font-style:normal;color:var(--kfg-bad);font-weight:600} /* drawer "Rit narekenen" */ .kfg-fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:700;padding:13px 18px;border-radius:99px;border:none;background:var(--kfg-accent);color:var(--kfg-on-accent);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.15s} .kfg-fab:hover{background:var(--kfg-accent-d);transform:translateY(-1px)} @media(max-width:760px){.kfg-fab{bottom:82px;right:14px;padding:11px 14px;font-size:14px}} .kfg-overlay{position:fixed;inset:0;background:var(--kfg-overlay);z-index:80} .kfg-overlay[hidden],.kfg-drawer[hidden]{display:none} .kfg-drawer{position:fixed;top:0;right:0;bottom:0;width:min(1080px,100%);z-index:90;background:var(--kfg-bg);color:var(--kfg-ink);box-shadow:var(--kfg-drawer-shadow);display:flex;flex-direction:column;animation:kfg-in .22s ease-out} @keyframes kfg-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}} .kfg-drawer header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--kfg-line);background:var(--kfg-card)} .kfg-drawer header b{display:block;font-size:18px;color:var(--kfg-ink)} .kfg-drawer header small{color:var(--kfg-dim);font-size:13px} .kfg-close{width:36px;height:36px;border-radius:8px;border:1px solid var(--kfg-line);background:var(--kfg-card);color:var(--kfg-ink);cursor:pointer;font-size:15px} .kfg-drawer-body{flex:1;overflow:auto;padding:20px 24px} .kfg-drawer-body .kfg-live{margin-top:0} .kfg-drawer footer{padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--kfg-line);background:var(--kfg-card)} .kfg-drawer footer .btn{display:block;width:100%;text-align:center;margin:0} @media(max-width:640px){.kfg-drawer{top:auto;height:90vh;width:100%;border-radius:18px 18px 0 0;animation-name:kfg-up}@keyframes kfg-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}} /* mobile */ @media(max-width:760px){ .kfg-trips{padding:6px 14px 14px} .kfg-trips-head{display:none} .kfg-trips-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);row-gap:8px} .kfg-trips-breakdown{grid-column:2/span 2;padding-top:0} .kfg-trips-amount{grid-column:2/span 2;text-align:left;display:flex;gap:8px;align-items:baseline;padding-top:0} .kfg-trips-actions{grid-column:1;grid-row:2;justify-content:flex-start;padding-top:0} .kfg-trips-explanation{padding-left:0} .kfg-trips-row[data-conflict=culprit],.kfg-trips-row[data-conflict=partner]{margin:0 -14px;padding-left:14px;padding-right:14px} .kfg-trips-overlap{padding-left:0} } /* server calculation in flight / failed */ .kfg-trips.is-busy .kfg-trips-amount b,.kfg-trips.is-busy .kfg-trips-total b{opacity:.55;transition:opacity .2s} .kfg-trips-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 4px;padding:10px 14px;border-radius:10px;background:var(--kfg-notice-bg);border:1px solid var(--kfg-notice-line);color:var(--kfg-notice-ink);font-size:13.5px} .kfg-trips-notice[hidden]{display:none}