/* The household app (/join, /box): phone-first, big tap targets, pictures over words, light on data.
   Colours follow the 7khalas Box theme; the font is Caveat Brush (kh-handdrawn.css). */
:root { --kh-page: #f3eedf; --kh-surface: #fffdf7; --kh-soft: #ece5d2; --kh-ink: #231f1c; --kh-muted: var(--kh-muted, #6b6255); --kh-green: #3d8b2f; --kh-green-dark: #2f7124; --kh-leaf: #7cc243; --kh-terra: #c8794b; --kh-teal: #8a4b22; --kh-border: #e2d9c3; }
html, body { background: var(--kh-page); color: var(--kh-ink); margin: 0; }
body.kh-app { min-height: 100vh; padding-bottom: 150px; }
.kh-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: var(--kh-surface); border-bottom: 1px solid var(--kh-border); }
.kh-top img { height: 40px; width: auto; }
.kh-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(61, 139, 47, .12); color: var(--kh-green-dark); font-size: 1.1rem; text-decoration: none; border: 0; }
.kh-wrap { max-width: 640px; margin: 0 auto; padding: 1rem; }
.kh-card { background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: 18px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.kh-h { font-size: 1.6rem; margin: 0 0 .25rem; line-height: 1.1; }
.kh-sub { color: var(--kh-muted); margin: 0 0 .8rem; font-size: 1.05rem; }
.kh-countdown { display: flex; align-items: center; gap: .8rem; }
.kh-countdown .mdi { font-size: 2.2rem; color: var(--kh-terra); }
.kh-countdown strong { display: block; font-size: 1.4rem; }
.kh-banner { border-radius: 14px; padding: .7rem .9rem; margin-bottom: 1rem; display: flex; gap: .6rem; align-items: center; font-size: 1.1rem; }
.kh-banner.ok { background: rgba(124, 194, 67, .2); color: #24581b; }
.kh-banner.warn { background: rgba(233, 185, 73, .25); color: #6d4b05; }
.kh-banner.info { background: rgba(233, 185, 73, .2); color: #6b3a19; }
.kh-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.kh-tier { border: 2px solid var(--kh-border); border-radius: 16px; background: var(--kh-surface); padding: .7rem .5rem; text-align: center; cursor: pointer; font: inherit; color: inherit; }
.kh-tier .mdi { font-size: 2rem; color: var(--kh-green); }
.kh-tier b { display: block; font-size: 1.2rem; font-weight: 400; }
.kh-tier .price { font-size: 1.35rem; color: var(--kh-green-dark); }
.kh-tier small { display: block; color: var(--kh-muted); font-size: .95rem; }
.kh-tier.on { border-color: var(--kh-green); background: rgba(124, 194, 67, .14); box-shadow: 0 6px 16px -10px rgba(61, 139, 47, .8); }
.kh-count { float: right; font-size: 1.05rem; color: var(--kh-muted); }
.kh-count.full { color: var(--kh-green-dark); }
.kh-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; clear: both; }
.kh-item { position: relative; border: 2px solid var(--kh-border); border-radius: 16px; background: var(--kh-surface); padding: .7rem .6rem .6rem; text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 118px; }
.kh-item .mdi { font-size: 1.9rem; color: var(--kh-green); }
.kh-item b { display: block; font-size: 1.15rem; font-weight: 400; line-height: 1.1; }
.kh-item small { display: block; color: var(--kh-muted); font-size: .92rem; line-height: 1.15; }
.kh-item .farm { color: var(--kh-teal); }
.kh-item.on { border-color: var(--kh-green); background: rgba(124, 194, 67, .14); }
.kh-item.on::after { content: "\F012C"; font-family: "Material Design Icons"; position: absolute; top: .4rem; right: .5rem; font-size: 1.4rem; color: var(--kh-green); }
.kh-item:disabled { opacity: .45; cursor: not-allowed; }
.kh-bar { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 30; padding: .7rem 1rem; background: var(--kh-surface); border-top: 1px solid var(--kh-border); box-shadow: 0 -8px 20px -14px rgba(35, 31, 28, .5); }
.kh-bar-in { max-width: 640px; margin: 0 auto; display: flex; gap: .6rem; align-items: center; }
.kh-btn { flex: 1 1 auto; min-height: 52px; border-radius: 999px; border: 2px solid var(--kh-green); background: var(--kh-green); color: #fff; font: inherit; font-size: 1.25rem; padding: .4rem 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; }
.kh-btn:hover { background: var(--kh-green-dark); border-color: var(--kh-green-dark); color: #fff; }
.kh-btn.ghost { background: var(--kh-surface); color: var(--kh-green-dark); }
.kh-btn.ghost:hover { background: rgba(124, 194, 67, .14); color: var(--kh-green-dark); }
.kh-btn:disabled { opacity: .55; cursor: not-allowed; }
.kh-link { background: none; border: 0; color: var(--kh-muted); text-decoration: underline; font: inherit; font-size: 1.05rem; cursor: pointer; padding: .3rem; }
.kh-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; height: 64px; display: flex; background: var(--kh-surface); border-top: 1px solid var(--kh-border); }
.kh-tabs button { flex: 1; border: 0; background: none; font: inherit; color: var(--kh-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 1rem; cursor: pointer; }
.kh-tabs button .mdi { font-size: 1.6rem; }
.kh-tabs button.on { color: var(--kh-green-dark); }
.kh-field { display: block; margin-bottom: .8rem; }
.kh-field span { display: block; font-size: 1.1rem; margin-bottom: .25rem; }
.kh-input { width: 100%; min-height: 50px; border: 1.5px solid var(--kh-border); border-radius: 14px; background: #fffefa; padding: .5rem .8rem; font: inherit; font-size: 1.2rem; color: var(--kh-ink); box-sizing: border-box; }
.kh-input:focus { outline: none; border-color: var(--kh-green); box-shadow: 0 0 0 3px rgba(124, 194, 67, .28); }
.kh-code { letter-spacing: .5em; text-align: center; font-size: 1.8rem; }
.kh-balance { font-size: 2.6rem; color: var(--kh-green-dark); line-height: 1; }
.kh-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .6rem 0; }
.kh-amounts button { min-height: 48px; border-radius: 14px; border: 2px solid var(--kh-border); background: var(--kh-surface); font: inherit; font-size: 1.2rem; cursor: pointer; }
.kh-amounts button.on { border-color: var(--kh-green); background: rgba(124, 194, 67, .14); }
.kh-history { list-style: none; margin: 0; padding: 0; }
.kh-history li { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--kh-border); font-size: 1.05rem; }
.kh-history .in { color: var(--kh-green-dark); } .kh-history .out { color: var(--kh-ink); }
.kh-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.kh-pin { display: flex; gap: .5rem; align-items: center; color: var(--kh-muted); }
.kh-hide { display: none !important; }
.kh-join { max-width: 440px; margin: 0 auto; padding: 2rem 1.2rem; text-align: center; }
.kh-join img { height: 64px; margin-bottom: 1rem; }
.kh-join .kh-card { text-align: left; }
.kh-err { color: #b3341f; font-size: 1.05rem; margin: .3rem 0 .6rem; }
@media (max-width: 380px) { .kh-tiers { grid-template-columns: 1fr; } .kh-amounts { grid-template-columns: repeat(2, 1fr); } }
.kh-toast { position: fixed; left: 50%; top: 12px; z-index: 100; width: min(92vw, 420px); transform: translate(-50%, -140%); transition: transform .25s; background: var(--kh-surface); border-radius: 16px; padding: .7rem 1rem; box-shadow: 0 12px 30px -12px rgba(35, 31, 28, .5); border-left: 6px solid var(--kh-green); }
.kh-toast.in { transform: translate(-50%, 0); }
.kh-toast b { display: block; font-size: 1.2rem; font-weight: 400; }
.kh-toast span { color: var(--kh-muted); font-size: 1.05rem; }
.kh-toast-warning { border-left-color: #e9b949; }
.kh-toast-danger { border-left-color: #c4452f; }
.kh-join a, .kh-app a { color: var(--kh-green-dark); }

/* Driver app (/driver): one screen, ordered stops, big buttons, works with no signal. */
body.kh-driver { padding-bottom: 2rem; }
.kd-bar { height: 12px; border-radius: 999px; background: var(--kh-soft); overflow: hidden; margin-top: .5rem; }
.kd-bar span { display: block; height: 100%; width: 0; background: var(--kh-leaf); transition: width .3s; }
.kd-route-card { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.kd-route-card .mdi { font-size: 2.2rem; color: var(--kh-green); }
.kd-stop { position: relative; }
.kd-stop.done { opacity: .62; }
.kd-seq { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--kh-green); color: #fff; font-size: 1.3rem; }
.kd-stop.failed .kd-seq { background: #c4452f; }
.kd-stop.delivered .kd-seq { background: var(--kh-leaf); }
.kd-stop h3 { font-size: 1.45rem; font-weight: 400; margin: 0 3rem .2rem 0; }
.kd-where { font-size: 1.15rem; margin: 0 0 .2rem; }
.kd-landmark { color: var(--kh-teal); font-size: 1.1rem; margin: 0 0 .2rem; }
.kd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; }
.kd-actions .kh-btn { min-height: 54px; font-size: 1.15rem; }
.kd-actions .wide { grid-column: 1 / -1; }
.kd-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(35, 31, 28, .45); display: flex; align-items: flex-end; justify-content: center; padding: .6rem; }
.kd-sheet .kh-card { width: 100%; max-width: 560px; margin: 0; border-radius: 22px; }
.kd-crates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.kd-crates span { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.kd-step { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--kh-border); border-radius: 14px; background: #fffefa; }
.kd-step button { width: 52px; height: 52px; border: 0; background: none; font-size: 1.8rem; color: var(--kh-green-dark); cursor: pointer; }
.kd-step b { font-size: 1.6rem; font-weight: 400; }
.kd-reasons { display: grid; gap: .5rem; margin-bottom: .8rem; }
.kd-reasons label { display: flex; gap: .6rem; align-items: center; border: 1.5px solid var(--kh-border); border-radius: 14px; padding: .7rem .8rem; font-size: 1.15rem; cursor: pointer; }
.kd-reasons input { width: 1.3rem; height: 1.3rem; }

/* Phone pages: a touch smaller overall so text is not oversized (everything here is sized in rem). */
html:has(body.kh-app) { font-size: 14.5px; }

/* Agent page (/agent): the link with its QR, money tiles, the road to Area Partner. */
.ka-share { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.ka-qr { background: var(--kh-field, #fff); border: 1px solid var(--kh-border); border-radius: 14px; padding: .4rem; line-height: 0; }
.ka-qr svg { width: 120px; height: 120px; }
.ka-code { font-family: var(--kh-display); font-size: 2rem; letter-spacing: .12em; color: var(--kh-green-dark); }
.ka-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ka-money .kh-card { padding: .8rem; margin-bottom: 1rem; text-align: center; }
.ka-money span { display: block; color: var(--kh-muted); }
.ka-money b { display: block; font-family: var(--kh-display); font-weight: 400; font-size: 1.6rem; color: var(--kh-green-dark); }
.ka-money small { display: block; color: var(--kh-muted); font-size: .85rem; line-height: 1.2; }
.kh-app .kd-bar { height: 12px; border-radius: 999px; background: var(--kh-soft); overflow: hidden; }
.kh-app .kd-bar span { display: block; height: 100%; width: 0; background: var(--kh-leaf); }

/* Buttons that are links keep their own text colour. */
.kh-app a.kh-btn { color: #fff; text-decoration: none; }
.kh-app a.kh-btn.ghost { color: var(--kh-green-dark); }

/* Farmer page (/farmer): one row per product with how many and the price. */
.kf-row { display: grid; grid-template-columns: 2.4rem 1fr 6.4rem 6.4rem; gap: .5rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--kh-border); }
.kf-row > .mdi { font-size: 1.7rem; color: var(--kh-green); }
.kf-name b { display: block; font-weight: 400; font-size: 1.1rem; line-height: 1.1; }
.kf-name small { color: var(--kh-muted); }
.kf-row label span { display: block; font-size: .8rem; color: var(--kh-muted); }
.kf-row .kh-input { min-height: 42px; padding: .3rem .5rem; font-size: 1.1rem; }
.kf-ok { color: var(--kh-green-dark); }

/* Supplier products (kh-farmer-products.js) */
.kp-head { display: flex; gap: .8rem; align-items: center; }
.kp-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; flex: 0 0 auto; }
.kp-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.kp-thumb { position: relative; } .kp-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block; }
.kp-thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1d1915; color: #fff; line-height: 1; cursor: pointer; }
.kp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kp-choice .kh-tier { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; }
.kp-choice .kh-tier small { color: var(--kh-muted, #6b6255); } .kp-choice .kh-tier:disabled { opacity: .55; cursor: not-allowed; }
.kp-card details summary { cursor: pointer; }

.kd-items { margin: .3rem 0 .2rem; padding-left: 1.1rem; font-size: 1.05rem; } .kd-items li { margin: .1rem 0; }

/* Driver evidence: guide, product checks, photos */
.kd-guide { background: #fff3d6; border-radius: 14px; padding: .65rem .85rem; margin-bottom: .7rem; font-size: .98rem; line-height: 1.4; }
.kd-guide b { font-weight: 400; color: #8a4b22; }
.kd-q { border: 1.5px solid #e7dfca; border-radius: 16px; padding: .7rem .8rem; margin-bottom: .6rem; }
.kd-q.good { border-color: #7cc243; background: #f3f9ea; } .kd-q.bad { border-color: #c4452f; background: #fbeee9; }
.kd-q-h { display: flex; justify-content: space-between; gap: .5rem; } .kd-q-h b { font-weight: 400; font-size: 1.1rem; } .kd-q-h small { color: var(--kh-muted, #6b6255); }
.kd-q-g { margin: .3rem 0 .5rem; color: var(--kh-text2, #4a433a); font-size: .95rem; line-height: 1.35; }
.kd-q-b { display: flex; gap: .5rem; } .kd-q-b button { flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid #cfc6b3; background: var(--kh-field, #fff); font: inherit; cursor: pointer; }
.kd-q-b button[data-ok="1"].on { background: #3d8b2f; border-color: #3d8b2f; color: #fff; } .kd-q-b button[data-ok="0"].on { background: #c4452f; border-color: #c4452f; color: #fff; }
.kd-q .kh-input { margin-top: .5rem; }
.kd-photos { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.kd-camera { flex: 0 0 auto; cursor: pointer; } .kd-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; }
.kd-thumbs img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 2px solid #7cc243; }
#kd-deliver .kh-card { max-height: 88dvh; overflow-y: auto; }
.kf-ev { margin-top: .6rem; } .kf-ev div { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; } .kf-ev img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }

/* Driver tabs: trip board and me & money */
body.kh-driver { padding-bottom: 80px; }
.kd-tabs button { position: relative; } .kd-tabs button.on { color: var(--kh-primary, #3d8b2f); }
.kd-trip-n { position: absolute; top: 6px; right: 26%; min-width: 18px; height: 18px; border-radius: 999px; background: #c4452f; color: #fff; font-style: normal; font-size: .7rem; line-height: 18px; }
.kd-trip-h { display: flex; align-items: center; gap: .7rem; } .kd-trip-h div { flex: 1; } .kd-trip-h b { display: block; font-weight: 400; font-size: 1.15rem; } .kd-trip-h small { color: var(--kh-muted, #6b6255); }
.kd-trip-ic { width: 46px; height: 46px; border-radius: 14px; background: #8a4b22; color: #fff; display: grid; place-items: center; font-size: 1.5rem; } .kd-trip-ic.c { background: #c8794b; }
.kd-pay { font-size: 1.3rem; color: #1f4d18; }
.kd-trip-m { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .2rem; } .kd-trip-m span { background: #f3eedf; border-radius: 999px; padding: .15rem .65rem; font-size: .9rem; }
.kd-money small { color: var(--kh-muted, #6b6255); } .kd-big { font-size: 2.6rem; color: #1f4d18; line-height: 1.1; }
.kd-mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; } .kd-mrow div { background: #f3eedf; border-radius: 14px; padding: .55rem; } .kd-mrow b { display: block; font-weight: 400; font-size: 1.1rem; } .kd-mrow small { font-size: .78rem; }
.kd-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; } .kd-chips button { border: 1.5px solid #cfc6b3; background: var(--kh-field, #fff); border-radius: 999px; padding: .4rem .8rem; font: inherit; cursor: pointer; } .kd-chips button.on { background: #1f4d18; border-color: #1f4d18; color: #fff; }

.kp-tips { background: #fff3d6; border-radius: 16px; padding: .8rem 1rem; margin-bottom: .8rem; font-size: .98rem; line-height: 1.4; }
.kp-tips b { font-weight: 400; } .kp-tips > b { color: #8a4b22; } .kp-tips ol { margin: .4rem 0; padding-left: 1.2rem; } .kp-tips p { margin: 0; color: var(--kh-text2, #4a433a); }
.kp-agree.sent { border: 2px solid #e9b949; } .kp-agree.accepted { border: 2px solid #7cc243; }
.kd-rating { font-size: 1.3rem; color: #b07a10; margin-bottom: .4rem; } .kd-rating small { color: var(--kh-muted, #6b6255); font-size: .85rem; }

/* Supplier weekly sheet: our icons, units, and "Something else?" */
.kf-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: rgba(124,194,67,.14); color: #1f4d18; font-size: 1.5rem; }
.kf-ic svg.ks-i { width: 1em; height: 1em; fill: none; stroke: currentColor; }
.kf-filter { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; font-size: .95rem; } .kf-filter .kh-sub { margin: 0; font-size: .9rem; }
.kf-other { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--kh-border); }
.kf-other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.kf-other-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--kh-border); } .kf-other-row > span:first-child { flex: 1; } .kf-other-row b { font-weight: 400; }
.kf-st { font-size: .8rem; border-radius: 999px; padding: .1rem .55rem; background: #fbf0d6; color: #6b3a19; } .kf-st.added { background: #e2edd2; color: #1f4d18; } .kf-st.declined { background: #f3e4de; color: #8a2f1c; }
@media (max-width: 420px) { .kf-row { grid-template-columns: 2.2rem 1fr 4.9rem 4.9rem; } }
html.kh-dark .kf-ic { color: #a9de7a; }
.kh-out { display: flex; flex-direction: column; gap: .6rem; } .kh-row-link { color: inherit; text-decoration: none; font-size: 1.1rem; } .kh-logout { color: #9b2f1d !important; border-color: #c4452f !important; }

.kp-desc { margin-top: .7rem; padding: .7rem .8rem; border-radius: 14px; background: #fbf7ec; } .kp-desc p { margin: .3rem 0; }
.kp-desc-st { display: block; margin: .2rem 0 .3rem; } .kp-desc-st--ok { color: #2f7124; } .kp-desc-st--warn { color: #9a5532; } .kp-desc-st--info { color: #6b6255; }
.kd-pens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.kd-pen-i { padding: .7rem .8rem; border-radius: 14px; background: #fbf7ec; display: flex; flex-direction: column; gap: .2rem; }
.kd-pen-top { display: flex; justify-content: space-between; gap: .6rem; } .kd-pen-amt { color: #a12f1d; font-weight: 700; white-space: nowrap; } .kd-pen-amt.gone { text-decoration: line-through; color: #8a8170; }
.kd-pen-st { align-self: flex-start; font-size: .78rem; padding: .05rem .55rem; border-radius: 999px; }
.kd-pen-st--warn { background: #fff1cc; color: #8a5a00; } .kd-pen-st--info { background: #e6eef8; color: #2f5a8a; } .kd-pen-st--bad { background: #fde1dc; color: #a12f1d; } .kd-pen-st--ok { background: #e3f2d9; color: #2f7124; }
.kd-pen-reply { color: #5b5346; font-style: italic; }
html.kh-dark .kd-pen-i { background: #1b2a20; }
.kh-portal-bar { margin-left: auto; } .kh-portal-bar:empty { display: none; }
/* Supplier: business check and feedback */
.kb-st { display: inline-flex; gap: .4rem; align-items: center; padding: .25rem .7rem; border-radius: 999px; font-size: .9rem; margin-bottom: .4rem; }
.kb-st--warn { background: #fff1cc; color: #8a5a00; } .kb-st--info { background: #e6eef8; color: #2f5a8a; } .kb-st--ok { background: #e3f2d9; color: #2f7124; } .kb-st--bad { background: #fde1dc; color: #a12f1d; }
.kb-h { font-weight: 700; font-size: 1rem; margin: 1.1rem 0 .5rem; }
.kb-form { display: flex; flex-direction: column; gap: .5rem; }
.kb-docs { display: flex; flex-direction: column; gap: .6rem; }
.kb-doc { border: 1px solid #e7dfca; border-radius: 14px; padding: .6rem .7rem; }
.kb-file { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; } .kb-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ds { font-style: normal; font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; } .kb-ds--info { background: #e6eef8; color: #2f5a8a; } .kb-ds--ok { background: #e3f2d9; color: #2f7124; } .kb-ds--bad { background: #fde1dc; color: #a12f1d; }
.kb-up { margin-top: .45rem; display: inline-flex; width: auto; min-height: 38px; padding: .3rem .9rem; cursor: pointer; }
.kb-miss { background: #fff8e6; border-radius: 12px; padding: .6rem .8rem; margin: .8rem 0; } .kb-miss ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.kb-stand { display: flex; gap: .7rem; border-radius: 14px; padding: .7rem .8rem; margin-bottom: .6rem; } .kb-stand .mdi { font-size: 1.8rem; } .kb-stand p { margin: .2rem 0; }
.kb-stand--warn { background: #fff1cc; } .kb-stand--bad { background: #fde1dc; }
.kb-rate b { font-size: 1.3rem; } .kb-quote { margin: .3rem 0; }
.kb-issue { border-top: 1px solid #efe7d3; padding: .7rem 0; display: flex; flex-direction: column; gap: .35rem; } .kb-issue p { margin: 0; }
.kb-ph { display: flex; gap: .4rem; } .kb-ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
html.kh-dark .kb-doc { border-color: #2a3b2e; } html.kh-dark .kb-miss { background: #2a2614; } html.kh-dark .kb-stand--warn { background: #2a2614; } html.kh-dark .kb-stand--bad { background: #2c1714; }
.kv-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; } .kv-check input { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; }

/* "Chat with 7 Colors" row on the phone portals */
.kd-chat-row { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kd-chat-row > .mdi:first-child { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(61,139,47,.12); color: var(--kh-green-dark); font-size: 1.4rem; flex: 0 0 auto; }
.kd-chat-row span { flex: 1; } .kd-chat-row b { display: block; font-weight: 400; font-size: 1.1rem; } .kd-chat-row small { color: var(--kh-muted); }