/* BEDKO shared components. Needs bedko.css (the --bk-* tokens). Class prefix bk-.
Grows as Babel and Lector need components (#213: bk-appbar, bk-statusbar, bk-picker, bk-card, bk-row, bk-sheet, bk-bottombar). */
/* IBM Plex, served by the app itself (_content/Bedko.Web/fonts, SIL OFL 1.1: fonts/LICENSE-OFL.txt): no Google Fonts call,
so the CSP allows fonts and styles from 'self' only. Sans 400/500/600, Mono 400/500; IBM release @ibm/plex-sans 1.1.0, @ibm/plex-mono 2.5.0. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
/* icons from the kit sprite (bedko-icons.svg):
Stroke 1.75 with round caps and joins for every icon (ruling 11.10 19:45); colour follows the text (currentColor).
A few Lucide icons draw filled dots: those parts carry fill="currentColor" in the sprite and keep it. */
.bk-icon {
display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: middle;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.bk-icon--16 { width: 16px; height: 16px; }
.bk-icon--24 { width: 24px; height: 24px; } /* picker rows, phone tab bar */
/* BEDKO mark (_BedkoLogo partial, 0.9.0; before: bedko-login.css and each app's sheet): chip in the brand blue, wordmark in
the page greys. The size is the app's (nav bar, login card): set width/height on .bedko-logo in the app's own sheet. */
.bedko-logo { display: block; }
.bedko-logo .bedko-chip { stroke: var(--bk-logo-blue); } /* 0.12.0 (WO13 A3): the brand colours as tokens (tokens.json) */
.bedko-logo .bedko-chip-dot { fill: var(--bk-logo-blue); }
.bedko-logo .bedko-word { fill: var(--bk-logo-word); font-family: var(--bk-font-ui); font-size: 28px; font-weight: 600; }
.bedko-logo .bedko-sub { fill: var(--bk-soft); font-family: var(--bk-font-ui); font-size: 10.5px; font-weight: 500; }
/* Users page (kit Pages/Users, 0.7.0) */
.bk-users { font-family: var(--bk-font-ui); color: var(--bk-ink); }
.bk-users h1 { font-size: 24px; margin: 18px 0 6px; }
.bk-users h2 { font-size: 17px; margin: 26px 0 8px; color: var(--bk-ink); border: none; }
.bk-users-note { color: var(--bk-soft); font-size: 13px; margin: 6px 0; }
.bk-users-done { color: var(--bk-green); font-size: 14px; }
.bk-users-error { color: var(--bk-red); font-size: 14px; font-weight: 500; }
.bk-users-list { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.bk-users-list th { text-align: left; color: var(--bk-faint); font-weight: 500; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--bk-line); }
.bk-users-list td { padding: 8px; border-bottom: 1px solid var(--bk-line); vertical-align: top; }
.bk-users-off td { color: var(--bk-faint); }
.bk-users-tag { margin-left: 6px; font-size: 11px; color: var(--bk-faint); border: 1px solid var(--bk-line); border-radius: 8px; padding: 0 6px; }
.bk-users-none { color: var(--bk-faint); } /* 0.13.0 (A1): no email; the kind badge beside it says how they sign in */
.bk-users-kind { white-space: nowrap; }
.bk-users-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bk-users-actions form { margin: 0; }
.bk-users-actions .bk-login-link { padding: 0; font-size: 13px; }
.bk-users-inline { display: flex; gap: 6px; align-items: center; }
.bk-users-inline input { width: 140px; padding: 2px 6px; font-size: 13px; background: var(--bk-page); border: 1px solid var(--bk-line); border-radius: 6px; color: var(--bk-ink); }
.bk-users-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bk-users-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--bk-soft); }
.bk-users-form input, .bk-users-form select { background: var(--bk-page); border: 1px solid var(--bk-line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--bk-ink); }
.bk-users-form button { min-height: 38px; border-radius: 19px; border: 1px solid var(--bk-green); background: var(--bk-green); color: var(--bk-on-green); padding: 0 16px; font: inherit; font-weight: 500; cursor: pointer; }
/* real buttons (0.8.3, Ole 15.10 16:36: the Connector page's text links were "impossible to see") */
.bk-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 19px;
border: 1px solid var(--bk-green); background: var(--bk-green); color: var(--bk-on-green); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.bk-button:hover { filter: brightness(1.08); }
.bk-button:focus-visible { outline: 2px solid var(--bk-green); outline-offset: 2px; }
.bk-button--ghost { background: transparent; color: var(--bk-ink); border-color: var(--bk-line); }
.bk-button--ghost:hover { background: var(--bk-surface); filter: none; }
/* 0.13.0 (A2, Babel 2): a small button for row actions, and danger for what takes something away (Remove) */
.bk-button--small { min-height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; }
.bk-button--danger { background: transparent; color: var(--bk-red); border-color: var(--bk-red); }
.bk-button--danger:hover { background: var(--bk-surface); filter: none; }
.bk-button--danger:focus-visible { outline-color: var(--bk-red); }
@media (pointer: coarse) { .bk-button--small { min-height: 40px; padding: 0 14px; border-radius: 20px; } } /* finger-sized */
/* 0.13.0 (A2; Census 3): a text field: the page's ground, a line border, green focus ring, red when the browser finds it invalid */
.bk-field { box-sizing: border-box; background: var(--bk-page); border: 1px solid var(--bk-line); border-radius: 8px; padding: 8px 10px;
font: inherit; font-size: 14px; color: var(--bk-ink); }
.bk-field:focus { outline: none; border-color: var(--bk-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk-green) 35%, transparent); }
.bk-field:user-invalid { border-color: var(--bk-red); }
.bk-field--small { padding: 4px 8px; font-size: 13px; min-height: 30px; }
/* 0.13.0 (A3, Babel 3): the in-page confirm of bedko-confirm.js: " [Yes] [Cancel]" */
.bk-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* a hidden kit button stays hidden (.bk-button sets display, which beat the browser's [hidden] rule) */
.bk-button[hidden] { display: none; }
.bk-confirm-q { font-size: 13px; font-weight: 500; color: var(--bk-ink); }
/* 0.14.1 (WO22): the confirm stays in place. While it asks, the form's buttons keep their place, invisible (the script sets
this inline as well, so no app button class can show them again: Praxis 0.5.7 request); nothing in the row moves.
The question is a raised pill over the clicked button (.bk-confirm-anchor is the form while it asks); when that does not
fit the screen, it goes on a line of its own below a wrapping row's buttons (.bk-confirm-line), or just below the button
(--drop). --measuring: laid out but unseen until the page's fonts have loaded (Babel 0.24.0 request 5) */
[data-bk-confirm-hidden] { visibility: hidden !important; }
.bk-confirm--pop { box-sizing: border-box; flex-wrap: nowrap; white-space: nowrap; padding: 3px 3px 3px 12px; border: 1px solid var(--bk-line); border-radius: 999px;
background: var(--bk-raised); color: var(--bk-ink); font-family: var(--bk-font-ui); }
.bk-confirm-anchor { position: relative; }
.bk-confirm-anchor > .bk-confirm--pop { position: absolute; z-index: 20; width: max-content; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.bk-confirm--measuring { visibility: hidden; }
.bk-confirm--drop { flex-wrap: wrap; white-space: normal; max-width: calc(100vw - 16px); border-radius: var(--bk-radius-card); }
.bk-confirm-line { flex: 0 0 100%; display: flex; min-width: 0; }
.bk-confirm--below { flex-wrap: wrap; white-space: normal; max-width: 100%; border-radius: var(--bk-radius-card); }
/* 0.13.0 (A3, Praxis 0.5.3 request 3): "removed · Undo" for something taken away that can come back. In a list: a row with
.bk-removed (the name struck through, an Undo button); or a .bk-toast at the bottom of the screen with the same Undo */
.bk-removed .bk-removed-name { color: var(--bk-faint); text-decoration: line-through; }
.bk-removed .bk-removed-note { color: var(--bk-faint); font-size: 12px; font-style: italic; }
.bk-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 16px; border-radius: 22px;
background: var(--bk-raised); color: var(--bk-ink); font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.bk-toast form { margin: 0; }
.bk-users-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.bk-users-buttons form { margin: 0; }
.bk-users-token { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.bk-users-token input { flex: 1 1 320px; min-width: 0; background: var(--bk-page); border: 1px solid var(--bk-green); border-radius: 8px; padding: 8px 10px;
font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--bk-ink); }
/* Copy invite (0.9.0, #214): the message under an invited row */
.bk-users-list tr:has(+ .bk-users-invite-row) td { border-bottom: none; }
.bk-users-invite-row td { border-bottom: 1px solid var(--bk-line); padding-top: 0; }
.bk-users-invite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bk-users-invite input { flex: 1 1 320px; min-width: 0; background: var(--bk-page); border: 1px solid var(--bk-line); border-radius: 8px; padding: 6px 10px;
font: inherit; font-size: 13px; color: var(--bk-ink); }
@media (max-width: 600px) { .bk-users-list th:nth-child(5), .bk-users-list td:nth-child(5) { display: none; } }
/* 0.13.1 (WO17): on a phone each row of a .bk-users-list is a block (name, email + badge, role and status on one line, then the
buttons): the table fits 375 px instead of running off the screen (it laid out 621 px wide with the 0.13.0 buttons) */
@media (max-width: 600px) {
.bk-users-list, .bk-users-list tbody, .bk-users-list tr, .bk-users-list td { display: block; }
.bk-users-list thead { display: none; }
.bk-users-list tr { padding: 10px 0; border-bottom: 1px solid var(--bk-line); }
.bk-users-list tr:has(+ .bk-users-invite-row) { border-bottom: none; padding-bottom: 0; }
.bk-users-list td { border: none; padding: 2px 0; overflow-wrap: anywhere; }
.bk-users-list td:nth-child(3), .bk-users-list td:nth-child(4) { display: inline-block; margin-right: 10px; color: var(--bk-soft); font-size: 13px; }
.bk-users-list td:nth-child(5) { display: none; }
.bk-users-list td.bk-users-actions { display: flex; padding-top: 6px; }
.bk-users-invite-row td { padding-top: 0; }
.bk-users-inline input { width: 100%; flex: 1 1 140px; }
}
/* uploads (0.11.0, bedko-upload.js): a form with data-bk-upload is the drop zone */
.bk-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--bk-line); border-radius: var(--bk-radius-card); color: var(--bk-soft); font-size: 14px; }
.bk-upload input[type="file"] { max-width: 100%; color: var(--bk-soft); font: inherit; font-size: 13px; }
.bk-upload--over { border-color: var(--bk-green); background: var(--bk-surface); }
.bk-upload--busy { opacity: 0.8; }
.bk-upload [data-bk-upload-status] { font-size: 13px; }
.bk-upload .bk-upload-error { color: var(--bk-red); }
/* 0.14.0 (WO18 C1, Census request): a card (a titled block on the page), a row (label + value, one per line, touch height)
and a status bar fixed at the bottom of the window. Tokens only.
*/
.bk-card { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-card); padding: 12px 16px; margin: 0 0 16px; }
.bk-card > h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--bk-ink); }
.bk-row { display: flex; align-items: center; gap: 12px; min-height: var(--bk-touch); padding: 8px 12px; border-bottom: 1px solid var(--bk-line); }
.bk-row:last-child { border-bottom: 0; }
.bk-row-label { width: 140px; flex: none; color: var(--bk-soft); }
.bk-statusbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 6px 16px;
background: var(--bk-titlebar); border-top: 1px solid var(--bk-line); color: var(--bk-soft); font-size: 13px; z-index: 10; }
.bk-statusbar b { color: var(--bk-ink); font-weight: 500; }
.bk-statusbar-msg { color: var(--bk-red); }
@media (max-width: 600px) { .bk-row { flex-wrap: wrap; } .bk-row-label { width: auto; } }