/* ==========================================================================
   KidKPI design system — "sticker sheet" style
   Chunky ink outlines, hard offset shadows, sunny palette, rounded type.
   ========================================================================== */

:root {
    --kk-ink: #1f2a44;
    --kk-paper: #fff9f0;
    --kk-white: #ffffff;
    --kk-coral: #ff6b6b;
    --kk-sunny: #ffd93d;
    --kk-mint: #6bcb77;
    --kk-sky: #4d96ff;
    --kk-grape: #b088f9;
    --kk-peach: #ffb4a2;
    --kk-shadow: 4px 4px 0 var(--kk-ink);
    --kk-shadow-sm: 3px 3px 0 var(--kk-ink);
    --kk-radius: 18px;
    --kk-font-display: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
    --kk-font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

html, body {
    font-family: var(--kk-font-body);
    color: var(--kk-ink);
    background-color: var(--kk-paper);
    /* subtle confetti-dot background */
    background-image:
        radial-gradient(circle at 25px 25px, rgba(77, 150, 255, .12) 3px, transparent 3px),
        radial-gradient(circle at 75px 75px, rgba(255, 107, 107, .12) 3px, transparent 3px),
        radial-gradient(circle at 50px 120px, rgba(107, 203, 119, .12) 3px, transparent 3px);
    background-size: 100px 150px;
}

h1, h2, h3, h4, h5, .kk-display {
    font-family: var(--kk-font-display);
    font-weight: 600;
    color: var(--kk-ink);
}

h1 { font-size: 2.4rem; }
h1:focus { outline: none; }

a { color: var(--kk-sky); }

/* ---------- Shell layout (no sidebar!) ---------- */

.kk-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.kk-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

.kk-footer {
    text-align: center;
    padding: 1rem;
    font-size: .85rem;
    color: rgba(31, 42, 68, .55);
}

/* ---------- Header & nav ---------- */

.kk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .8rem 1.5rem;
    background: var(--kk-white);
    border-bottom: 3px solid var(--kk-ink);
    position: sticky;
    top: 0;
    z-index: 100;
}

.kk-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-family: var(--kk-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--kk-ink);
    line-height: 1;
}

.kk-logo:hover { color: var(--kk-ink); }

.kk-logo em {
    font-style: normal;
    color: var(--kk-coral);
}

.kk-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.kk-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .95rem;
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-white);
    color: var(--kk-ink);
    font-family: var(--kk-font-display);
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .1s ease, box-shadow .1s ease;
}

.kk-nav a:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--kk-shadow-sm);
}

.kk-nav a.active {
    background: var(--kk-sunny);
    box-shadow: var(--kk-shadow-sm);
}

.kk-nav-emoji { font-size: 1.05rem; }

/* ---------- Sticker cards (overrides bootstrap .card) ---------- */

.card {
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    background: var(--kk-white);
    overflow: hidden;
}

.card-header {
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    padding: .65rem 1.1rem;
}

/* sticker tilt for member cards */
.kk-sticker {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1rem 1.25rem .75rem;
    text-align: center;
    transition: transform .15s ease;
}

.kk-sticker:nth-child(odd)  { transform: rotate(-2deg); }
.kk-sticker:nth-child(even) { transform: rotate(2deg); }
.kk-sticker:hover { transform: rotate(0deg) scale(1.06); z-index: 2; }

.kk-sticker .kk-sticker-name {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: .25rem;
}

.kk-sticker .kk-sticker-role {
    font-size: .78rem;
    color: rgba(31, 42, 68, .6);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* family-wide views — secondary strip below the crew, so the members stay the star */
.kk-familywide { margin-top: 1.6rem; border-top: 2.5px dashed rgba(31,42,68,.22); padding-top: 1rem; }
.kk-familywide-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.kk-familywide-label { font-family: var(--kk-font-display); font-weight: 600; color: rgba(31,42,68,.6); margin-right: .3rem; }

/* ---- Dashboard: the ranked "Do this next" stack ---- */
.kk-now-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .3rem; border-bottom: 1px solid rgba(31,42,68,.1); }
.kk-now-row:last-of-type { border-bottom: none; }
.kk-now-row.late { background: rgba(255,107,107,.09); border-radius: 8px; }
.kk-now-when { font-weight: 700; font-size: .76rem; min-width: 4.6rem; color: rgba(31,42,68,.55); font-variant-numeric: tabular-nums; }
.kk-now-row.late .kk-now-when { color: var(--kk-coral); }
.kk-now-job { flex: 1 1 auto; min-width: 0; }
.kk-now-done { flex: 0 0 auto; }
.kk-now-clear { text-align: center; padding: 1rem; font-weight: 600; color: rgba(31,42,68,.6); margin: 0; }
.kk-now-pending { display: block; margin-top: .6rem; color: #d98a00; font-weight: 700; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; }
.kk-now-pending:hover { text-decoration: underline; }
.kk-now-foot { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; padding-top: .5rem; border-top: 1.5px dashed rgba(31,42,68,.15); font-size: .85rem; }
.kk-now-donecount { font-weight: 600; }
.kk-now-more { margin-left: auto; color: var(--kk-sky); text-decoration: none; font-weight: 700; }
.kk-houserules-toggle { width: 100%; text-align: left; background: transparent; border: none; padding: .6rem 1rem; font-family: var(--kk-font-display); font-weight: 600; color: rgba(31,42,68,.7); cursor: pointer; }

/* ---- Home "crew" tab: clickable member cards with a wellness face ---- */
.kk-crewgrid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: .4rem 0; }
.kk-crewcard { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--kk-ink); border: 2.5px solid var(--kk-ink); border-radius: 16px; background: #fff; padding: .7rem .9rem; width: 8.6rem; box-shadow: 3px 3px 0 var(--kk-ink); transition: transform .08s ease, box-shadow .08s ease; }
.kk-crewcard:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--kk-ink); color: var(--kk-ink); }
.kk-crewcard-av { position: relative; line-height: 0; }
.kk-crewcard-face { position: absolute; bottom: -4px; right: -8px; font-size: 1.4rem; background: #fff; border: 2.5px solid var(--kk-ink); border-radius: 50%; line-height: 1; width: 1.95rem; height: 1.95rem; display: flex; align-items: center; justify-content: center; }
.kk-crewcard-name { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.05rem; margin-top: .35rem; }
.kk-crewcard-status { font-size: .78rem; font-weight: 700; }
.kk-crewcard.solid .kk-crewcard-status { color: var(--kk-mint); }
.kk-crewcard.wobbly .kk-crewcard-status { color: #d98a00; }
.kk-crewcard.slipping .kk-crewcard-status { color: #ff9f45; }
.kk-crewcard.never .kk-crewcard-status { color: var(--kk-coral); }
.kk-crewcard.none .kk-crewcard-status { color: rgba(31,42,68,.5); }
.kk-now-penalties { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 0; }

/* the whole sticker is now a link into that member's folder */
.kk-sticker-link { display: block; text-decoration: none; color: var(--kk-ink); cursor: pointer; }
.kk-sticker-link:hover { color: var(--kk-ink); }
.kk-sticker .kk-sticker-open {
    margin-top: .35rem; font-size: .72rem; font-weight: 700; color: var(--kk-sky);
    opacity: 0; transition: opacity .15s ease;
}
.kk-sticker-link:hover .kk-sticker-open { opacity: 1; }

/* ---------- Buttons ---------- */

.btn {
    font-family: var(--kk-font-display);
    font-weight: 500;
    border: 2.5px solid var(--kk-ink) !important;
    border-radius: 14px;
    color: var(--kk-ink);
    transition: transform .1s ease, box-shadow .1s ease;
}

.btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--kk-shadow-sm);
    color: var(--kk-ink);
}

.btn:active:not(:disabled) {
    transform: translate(1px, 1px);
    box-shadow: none;
}

.btn-primary   { background: var(--kk-sky) !important;   color: #fff !important; }
.btn-success   { background: var(--kk-mint) !important;  color: var(--kk-ink) !important; }
.btn-warning   { background: var(--kk-sunny) !important; color: var(--kk-ink) !important; }
.btn-info      { background: var(--kk-grape) !important; color: #fff !important; }
.btn-danger, .btn-outline-danger { background: var(--kk-white); color: var(--kk-coral); border-color: var(--kk-coral) !important; }
.btn-outline-secondary { background: var(--kk-white); }

.btn:disabled {
    background: #e9e6df !important;
    color: rgba(31, 42, 68, .4) !important;
    border-color: rgba(31, 42, 68, .3) !important;
}

/* ---------- Forms ---------- */

.form-control, .form-select {
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
    font-family: var(--kk-font-body);
    font-weight: 600;
    background-color: var(--kk-white);
}

.form-control:focus, .form-select:focus {
    border-color: var(--kk-sky);
    box-shadow: 3px 3px 0 var(--kk-sky);
}

.form-label {
    font-family: var(--kk-font-display);
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: .25rem;
}

/* ---------- Badges ---------- */

.badge {
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    font-family: var(--kk-font-display);
    font-weight: 500;
    padding: .35em .8em;
}

.badge.bg-success   { background: var(--kk-mint) !important;  color: var(--kk-ink) !important; }
.badge.bg-primary   { background: var(--kk-sky) !important; }
.badge.bg-warning   { background: var(--kk-sunny) !important; color: var(--kk-ink) !important; }
.badge.bg-secondary { background: #e9e6df !important; color: var(--kk-ink) !important; }
.badge.bg-info      { background: var(--kk-grape) !important; }

/* ---------- Tables ---------- */

.table { --bs-table-striped-bg: rgba(255, 217, 61, .12); }
.table > :not(caption) > * > * { border-bottom-color: rgba(31, 42, 68, .15); }
.table thead {
    font-family: var(--kk-font-display);
    font-weight: 600;
}

/* ---------- Hero (home page) ---------- */

.kk-hero {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
}

.kk-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
}

.kk-hero h1 .kk-hi { color: var(--kk-coral); }

.kk-hero p {
    font-size: 1.15rem;
    color: rgba(31, 42, 68, .7);
    max-width: 640px;
    margin: .5rem auto 0;
}

/* the "car rear window" family strip */
.kk-window {
    position: relative;
    margin: 1.5rem auto;
    max-width: 900px;
    background: linear-gradient(180deg, #dff1ff 0%, #c7e5fb 60%, #b5dbf7 100%);
    border: 4px solid var(--kk-ink);
    border-radius: 46px 46px 26px 26px;
    box-shadow: var(--kk-shadow);
    padding: 2rem 2rem 1.5rem;
}

.kk-window::after {
    /* windscreen glare */
    content: "";
    position: absolute;
    top: 10px; left: 8%;
    width: 26%; height: 30px;
    background: rgba(255, 255, 255, .5);
    border-radius: 999px;
    transform: rotate(-4deg);
    pointer-events: none;
}

.kk-window-strip {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.kk-window-name {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
}

/* quick action tiles */
.kk-tile {
    display: block;
    text-decoration: none;
    text-align: center;
    color: var(--kk-ink);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1.4rem .75rem;
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform .12s ease;
}

.kk-tile:hover { transform: translate(-3px, -3px); color: var(--kk-ink); }
.kk-tile .kk-tile-emoji { display: block; font-size: 2.4rem; margin-bottom: .4rem; }

.kk-tile-coral { background: var(--kk-peach); }
.kk-tile-sunny { background: var(--kk-sunny); }
.kk-tile-mint  { background: var(--kk-mint); }
.kk-tile-sky   { background: #bcd8ff; }

/* ---------- Scoreboard podium ---------- */

.kk-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.kk-podium-spot { text-align: center; width: 150px; }

.kk-podium-block {
    border: 3px solid var(--kk-ink);
    border-radius: 14px 14px 0 0;
    box-shadow: var(--kk-shadow-sm);
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-podium-1 .kk-podium-block { height: 110px; background: var(--kk-sunny); }
.kk-podium-2 .kk-podium-block { height: 80px;  background: #dcdcdc; }
.kk-podium-3 .kk-podium-block { height: 60px;  background: #e8b98a; }

.kk-podium-name {
    font-family: var(--kk-font-display);
    font-weight: 600;
    margin-top: .3rem;
}

.kk-podium-points {
    font-size: .85rem;
    color: rgba(31, 42, 68, .65);
}

.kk-crown { font-size: 1.6rem; line-height: 1; }

/* ---------- Splash / loading screen ---------- */

.kk-splash {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--kk-paper);
}

.kk-splash-figure {
    font-size: 4rem;
    animation: kk-bounce 1s ease-in-out infinite;
}

.kk-splash-text {
    font-family: var(--kk-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kk-ink);
}

@keyframes kk-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.loading-progress {
    display: block;
    width: 6rem;
    height: 6rem;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(31, 42, 68, .15);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--kk-coral);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    font-family: var(--kk-font-display);
    font-weight: 600;
    color: var(--kk-ink);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ---------- Misc / template plumbing ---------- */

.valid.modified:not([type=checkbox]) { outline: 2px solid var(--kk-mint); }
.invalid { outline: 2px solid var(--kk-coral); }
.validation-message { color: var(--kk-coral); }

#blazor-error-ui {
    background: var(--kk-sunny);
    border-top: 3px solid var(--kk-ink);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .1);
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--kk-font-display);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.alert {
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
    font-weight: 700;
}

.alert-info    { background: #dff1ff; color: var(--kk-ink); }
.alert-success { background: #e2f7e5; color: var(--kk-ink); }

/* ---------- Marketing pages ---------- */

.kk-main-wide { max-width: 1100px; }

.kk-hero-landing { padding-top: 2.5rem; }

.kk-hero-landing h1 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.05;
}

.kk-hero-sub {
    font-size: 1.25rem !important;
    max-width: 680px !important;
}

.kk-hero-ctas {
    display: flex;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 .5rem;
}

.kk-hero-why {
    display: inline-block;
    font-family: var(--kk-font-display);
    font-weight: 600;
    color: var(--kk-ink);
    text-decoration: none;
    border-bottom: 2.5px dashed var(--kk-sky);
    padding-bottom: 1px;
    margin: .4rem 0 .8rem;
}
.kk-hero-why:hover { color: var(--kk-sky); }

.kk-window-caption {
    text-align: center;
    font-family: var(--kk-font-display);
    font-size: .95rem;
    color: rgba(31, 42, 68, .6);
    margin: 1rem 0 0;
}

.kk-section { padding: 3rem 0 1rem; }

.kk-section-title {
    text-align: center;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 2rem;
}

.kk-step {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1.75rem 1.5rem;
    height: 100%;
    text-align: center;
}

.kk-step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--kk-ink);
    border-radius: 50%;
    font-family: var(--kk-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: var(--kk-shadow-sm);
}

.kk-feature {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1.4rem 1.2rem;
    height: 100%;
    transition: transform .12s ease;
}

.kk-feature:hover { transform: translate(-3px, -3px); }
.kk-feature-emoji { font-size: 2rem; display: block; margin-bottom: .5rem; }
.kk-feature h5 { font-size: 1.05rem; }
.kk-feature p { font-size: .9rem; margin: 0; color: rgba(31, 42, 68, .75); }

.kk-twohomes { background: linear-gradient(135deg, #eef6ff 0%, #fdf0ff 100%); }
.kk-lead { font-size: 1.15rem; }

.kk-checklist {
    list-style: none;
    padding: 0;
    font-size: 1.08rem;
}

.kk-checklist li {
    padding: .6rem .9rem;
    margin-bottom: .6rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
}

.kk-faq { max-width: 760px; margin: 0 auto; }

.kk-faq details {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
    padding: .9rem 1.2rem;
    margin-bottom: .8rem;
}

.kk-faq summary {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
}

.kk-faq details p { margin: .7rem 0 0; }

.kk-cta-band {
    text-align: center;
    background: var(--kk-sky);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    color: #fff;
    padding: 3rem 1.5rem;
    margin: 3rem 0 1rem;
}

.kk-cta-band h2 { color: #fff; font-size: 2rem; }
.kk-cta-band p { font-size: 1.1rem; opacity: .9; }

.kk-nav-cta {
    background: var(--kk-coral) !important;
    color: #fff !important;
}

/* ---------- Auth pages ---------- */

.kk-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.kk-auth-card { width: 100%; max-width: 480px; }

.kk-mode-toggle {
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.kk-mode-toggle .btn { flex: 1; font-size: .9rem; }

.kk-logout {
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-peach);
    font-family: var(--kk-font-display);
    font-weight: 500;
    font-size: .95rem;
    padding: .45rem .95rem;
    transition: transform .1s ease, box-shadow .1s ease;
}

.kk-logout:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--kk-shadow-sm);
}

/* ---------- Setup wizard ---------- */

.kk-wizard-steps {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin: 0 0 1.5rem;
}

.kk-wizard-dot {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--kk-ink);
    border-radius: 50%;
    background: var(--kk-white);
    font-family: var(--kk-font-display);
    font-weight: 700;
}

.kk-wizard-dot.active { background: var(--kk-sunny); box-shadow: var(--kk-shadow-sm); }
.kk-wizard-dot.done   { background: var(--kk-mint); }

.kk-choice {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.2rem .8rem;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    font-family: var(--kk-font-display);
    text-align: center;
    transition: transform .1s ease, box-shadow .1s ease;
}

.kk-choice:hover { transform: translate(-2px, -2px); box-shadow: var(--kk-shadow-sm); }
.kk-choice.selected { background: var(--kk-sunny); box-shadow: var(--kk-shadow); }
.kk-choice .kk-choice-emoji { font-size: 2.2rem; }
.kk-choice small { font-family: var(--kk-font-body); font-size: .78rem; color: rgba(31,42,68,.65); }

/* ---------- Profile / avatar editor ---------- */

.kk-profile-preview {
    display: inline-block;
    padding: 1.5rem 2.5rem;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
}

.kk-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.kk-swatch {
    width: 38px; height: 38px;
    border: 3px solid var(--kk-ink);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .1s ease;
}

.kk-swatch:hover { transform: scale(1.15); }
.kk-swatch.selected { outline: 3px solid var(--kk-sunny); outline-offset: 2px; transform: scale(1.15); }

/* ---------- Family portrait ---------- */

.kk-portrait {
    position: relative;
    max-width: 950px;
    margin: 1rem auto;
    background: linear-gradient(180deg, #dff1ff 0%, #eef8ff 55%, #fdf6e3 100%);
    border: 4px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    overflow: hidden;
}

.kk-portrait-scene {
    display: block;
    width: 100%;
    height: auto;
}

.kk-portrait-strip {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 24%; /* keep the family on the lawn, off the doorstep */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    /* NEVER wrap: transform:scale() shrinks the strip visually but layout still measures
       it full-size, so wrapping made a second row that pushed the first row's heads out
       the top of the scene. One row always; the scale below fits it to the frame. */
    flex-wrap: nowrap;
    padding: 0 1rem;
}

/* shoulder-to-shoulder, like posing for the photo (overlap set inline per figure) */
.kk-portrait-person { position: relative; display: inline-block; text-decoration: none; cursor: pointer; }
.kk-portrait-person:hover { z-index: 2; text-decoration: none; }
.kk-portrait-person:hover .kk-avatar, .kk-portrait-person:hover svg { transform: translateY(-4px); transition: transform .1s ease; }
/* mood face floating just above each figure's head */
.kk-portrait-mood {
    position: absolute; top: 2%; left: 50%; transform: translateX(-50%);
    font-size: 1.5rem; z-index: 4; line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.9)) drop-shadow(0 0 2px rgba(255,255,255,.9));
    pointer-events: none;
}
.kk-portrait-caption { text-align: center; font-family: var(--kk-font-display); font-weight: 600; margin: .8rem 0 0; color: var(--kk-ink); }

.kk-portrait-name {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .8rem;
    background: rgba(255, 255, 255, .85);
    border-radius: 8px;
    padding: 0 .4rem;
    display: inline-block;
}

/* ---------- Printable weekly chart (fridge-worthy, full colour) ---------- */

.kk-print {
    max-width: 1050px;
    margin: 0 auto;
    padding: 1.2rem;
    font-family: var(--kk-font-body);
    color: var(--kk-ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.kk-sheet {
    border: 4px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    padding: 1.2rem 1.4rem;
    background: #fff;
}

.kk-sheet-head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 3px solid var(--kk-ink);
    padding-bottom: .8rem;
    margin-bottom: 1rem;
}

.kk-sheet-title { flex: 1; }
.kk-sheet-title h1 { font-size: 2.3rem; margin: 0; color: var(--member, var(--kk-ink)); }
.kk-sheet-dates { font-family: var(--kk-font-display); font-size: 1.05rem; color: rgba(31,42,68,.65); }

.kk-sheet-brand {
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 1.6rem;
}
.kk-sheet-brand span { color: #ff6b6b; }

.kk-sheet-grid { width: 100%; border-collapse: collapse; }

.kk-sheet-grid th, .kk-sheet-grid td {
    border: 2.5px solid var(--kk-ink);
    padding: .35rem .5rem;
}

.kk-sheet-grid thead th {
    color: #fff;
    font-family: var(--kk-font-display);
    text-align: center;
    font-size: 1rem;
}

.kk-sheet-grid thead th.kk-sheet-job-col { background: var(--kk-ink); }
.kk-sheet-daynum { font-size: 1.3rem; }

.kk-sheet-job { font-family: var(--kk-font-display); font-weight: 500; white-space: nowrap; }
.kk-sheet-icon { font-size: 1.25rem; margin-right: .3rem; }
.kk-sheet-time {
    font-size: .75rem;
    color: rgba(31,42,68,.6);
    margin-left: .35rem;
}

.kk-sheet-pts {
    background: var(--kk-sunny);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    font-size: .75rem;
    padding: 0 .45rem;
    margin-left: .4rem;
}

.kk-sheet-box {
    display: inline-block;
    width: 26px; height: 26px;
    border: 2.5px solid var(--kk-ink);
    border-radius: 7px;
    background: #fff;
    font-weight: 700;
    line-height: 22px;
    font-size: 1rem;
}

.kk-sheet-done { background: var(--kk-mint); }
.kk-sheet-pending { background: var(--kk-sunny); font-size: .8rem; }
.kk-sheet-skip { color: rgba(31,42,68,.3); font-size: 1.2rem; }

.kk-sheet-weekly h3, .kk-sheet-events h3 {
    font-size: 1.1rem;
    margin: .9rem 0 .4rem;
}

.kk-sheet-weekly-row { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }

.kk-sheet-weekly-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--kk-font-display);
}

.kk-sheet-events { margin-top: .4rem; }

.kk-sheet-event {
    display: inline-block;
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    padding: .1rem .7rem;
    margin: 0 .4rem .4rem 0;
    font-family: var(--kk-font-display);
    font-size: .85rem;
}

.kk-sheet-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid var(--kk-ink);
    margin-top: 1rem;
    padding-top: .7rem;
    font-family: var(--kk-font-display);
    font-size: 1.05rem;
}

.kk-sheet-blank {
    display: inline-block;
    width: 70px;
    border-bottom: 2.5px solid var(--kk-ink);
    height: 1.1em;
    vertical-align: bottom;
}

.kk-sheet-url { color: rgba(31,42,68,.5); }

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; background-image: none !important; }
    .kk-print { padding: 0; }
    .kk-sheet { border-width: 3px; }
    @page { size: landscape; margin: 1cm; }
}

/* ---------- Insights ---------- */

.kk-stat {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1rem;
    text-align: center;
    height: 100%;
}

.kk-stat-num { font-family: var(--kk-font-display); font-size: 2.2rem; font-weight: 700; }
.kk-stat-label { font-family: var(--kk-font-display); font-size: .85rem; color: rgba(31,42,68,.65); }
.kk-stat-delta { font-size: .8rem; font-weight: 700; }
.kk-stat-delta.up { color: #2e7d32; }
.kk-stat-delta.down { color: #c62828; }

.kk-observation {
    padding: .55rem .9rem;
    margin-bottom: .5rem;
    background: var(--kk-paper);
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
    font-size: 1.02rem;
}

.kk-trend-title { font-family: var(--kk-font-display); font-weight: 600; margin-bottom: .2rem; }
.kk-trend-axis { display: flex; justify-content: space-between; font-size: .68rem; color: rgba(31,42,68,.55); }

/* ---- AI Coach ---- */
.kk-coach-loading { display: flex; align-items: center; gap: .5rem; padding: 1rem .2rem; color: rgba(31,42,68,.6); font-weight: 600; }
.kk-coach-spin { display: inline-block; animation: kk-coach-pulse 1.4s ease-in-out infinite; font-size: 1.3rem; }
@keyframes kk-coach-pulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }

.kk-coach-note {
    position: relative;
    background: linear-gradient(180deg, #fffdf6 0%, var(--kk-paper) 100%);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;
    box-shadow: var(--kk-shadow);
    padding: 1.4rem 1.2rem 1.1rem;
    margin: .2rem 0 1.4rem;
}
.kk-coach-note-tag {
    position: absolute; top: -14px; left: 16px;
    background: var(--kk-sunny); color: var(--kk-ink);
    border: 2.5px solid var(--kk-ink); border-radius: 999px;
    padding: .12rem .7rem; font-family: var(--kk-font-display); font-weight: 600; font-size: .9rem;
}
.kk-coach-note-body { color: var(--kk-ink); font-size: 1.03rem; line-height: 1.5; }
.kk-coach-note-body p { margin: 0 0 .5rem; }
.kk-coach-note-body .kk-coach-h { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.08rem; margin: .7rem 0 .25rem; }
.kk-coach-note-body .kk-coach-h:first-child { margin-top: 0; }
.kk-coach-note-body .kk-coach-li { position: relative; padding-left: 1.1rem; margin-bottom: .3rem; }
.kk-coach-note-body .kk-coach-li::before { content: "•"; position: absolute; left: .2rem; color: var(--kk-sky); font-weight: 800; }
/* ---- one-tap fixes (AI config tune-up) ---- */
.kk-tuneup { margin-top: 1.4rem; }
.kk-tuneup-head { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.1rem; }
.kk-tuneup-sub { color: rgba(31,42,68,.6); font-size: .88rem; margin: .1rem 0 .8rem; }
.kk-tuneup-card {
    display: flex; align-items: center; gap: .7rem;
    border: 2.5px solid var(--kk-ink); border-left: 8px solid var(--kk-sky);
    border-radius: 14px; background: #fff; padding: .6rem .75rem; margin-bottom: .6rem;
    box-shadow: 3px 3px 0 var(--kk-ink);
}
.kk-tuneup-card.retire { border-left-color: var(--kk-coral); }
.kk-tuneup-card.retime { border-left-color: #ff9f45; }
.kk-tuneup-card.reassign { border-left-color: var(--kk-mint); }
.kk-tuneup-ico { font-size: 1.5rem; flex: 0 0 auto; }
.kk-tuneup-body { flex: 1 1 auto; min-width: 0; }
.kk-tuneup-title { font-family: var(--kk-font-display); font-weight: 600; }
.kk-tuneup-reason { font-size: .9rem; color: rgba(31,42,68,.75); }
.kk-tuneup-change { font-size: .85rem; font-weight: 700; color: var(--kk-ink); margin-top: .1rem; }
.kk-tuneup-apply { flex: 0 0 auto; }

.kk-coach-note-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; padding-top: .5rem; border-top: 1.5px dashed rgba(31,42,68,.15); }
.kk-coach-stamp { font-size: .78rem; color: rgba(31,42,68,.55); }
.kk-coach-refresh { border: 2px solid var(--kk-ink); background: #fff; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.kk-coach-refresh:hover:not(:disabled) { background: var(--kk-sunny); }
.kk-coach-refresh:disabled { opacity: .5; cursor: default; }

.kk-grid-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin: .2rem 0 .7rem; }
.kk-grid-title { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.05rem; }
.kk-grid-legend { display: flex; gap: .8rem; font-size: .78rem; color: rgba(31,42,68,.65); margin-left: auto; }
.kk-grid-legend span { display: inline-flex; align-items: center; gap: .28rem; }
.kk-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--kk-ink); display: inline-block; }
.kk-dot.solid { background: var(--kk-mint); }
.kk-dot.wobbly { background: var(--kk-sunny); }
.kk-dot.slipping { background: #ff9f45; }
.kk-dot.never { background: var(--kk-coral); }

.kk-relrow {
    border: 2.5px solid var(--kk-ink); border-left: 8px solid var(--kid, var(--kk-sky));
    border-radius: 14px; background: #fff; padding: .7rem .8rem; margin-bottom: .7rem;
}
.kk-relrow-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .55rem; }
.kk-relrow-name { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.1rem; }
.kk-relrow-pct {
    font-family: var(--kk-font-display); font-weight: 700; font-size: 1.1rem;
    background: var(--kid, var(--kk-sky)); color: #fff; border: 2px solid var(--kk-ink);
    border-radius: 999px; padding: .05rem .55rem; -webkit-text-stroke: .3px var(--kk-ink);
}
.kk-relrow-streak { font-weight: 700; font-size: .9rem; }
.kk-relrow-sub { margin-left: auto; font-size: .82rem; font-weight: 600; color: rgba(31,42,68,.62); }
.kk-relrow-jobs { display: flex; flex-wrap: wrap; gap: .4rem; }
/* sticker-style chip: chunky ink border, hard offset shadow, display font, brand fills */
.kk-jobchip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 2.5px solid var(--kk-ink); border-radius: 12px; padding: .3rem .6rem;
    font-family: var(--kk-font-display); font-weight: 600; font-size: .9rem;
    max-width: 100%; color: var(--kk-ink); cursor: pointer; text-align: left;
    background: #fff; box-shadow: 2px 2px 0 var(--kk-ink);
    transition: transform .08s ease, box-shadow .08s ease;
}
.kk-jobchip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--kk-ink); }
.kk-jobchip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--kk-ink); }
.kk-jobchip-ico { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.kk-jobchip-txt { white-space: normal; }   /* full title — no truncation */
.kk-jobchip-pct { font-weight: 700; flex: 0 0 auto; }

/* the kid row's head is a link into their file */
.kk-relrow-link { text-decoration: none; color: var(--kk-ink); border-radius: 10px; }
.kk-relrow-link:hover { background: rgba(31,42,68,.04); }
.kk-relrow-open { margin-left: .5rem; font-size: .8rem; font-weight: 700; color: var(--kk-sky); }
.kk-relrow-head .kk-relrow-streak { margin-left: .2rem; }

/* ---- "The kids" tab: legible, tappable summary card ---- */
.kk-kidsum {
    display: block; text-decoration: none; color: var(--kk-ink);
    border: 2.5px solid var(--kk-ink); border-left: 8px solid var(--kid, var(--kk-sky));
    border-radius: 16px; background: #fff; padding: .8rem 1rem; height: 100%;
    box-shadow: 3px 3px 0 var(--kk-ink); transition: transform .08s ease;
}
.kk-kidsum:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--kk-ink); color: var(--kk-ink); }
.kk-kidsum-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.kk-kidsum-name { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.15rem; }
.kk-kidsum-pct {
    margin-left: auto; font-family: var(--kk-font-display); font-weight: 700; font-size: 1.1rem;
    border: 2px solid var(--kk-ink); border-radius: 999px; padding: .05rem .55rem; color: #fff;
}
.kk-kidsum.solid .kk-kidsum-pct { background: var(--kk-mint); color: var(--kk-ink); }
.kk-kidsum.wobbly .kk-kidsum-pct { background: var(--kk-sunny); color: var(--kk-ink); }
.kk-kidsum.slipping .kk-kidsum-pct { background: #ff9f45; color: var(--kk-ink); }
.kk-kidsum.never .kk-kidsum-pct { background: var(--kk-coral); }
.kk-kidsum-line { font-size: 1rem; margin-bottom: .25rem; }
.kk-kidsum-weak { font-size: .88rem; color: rgba(31,42,68,.7); margin-bottom: .4rem; }
.kk-kidsum-foot { display: flex; align-items: center; gap: .8rem; font-size: .85rem; font-weight: 600; }
.kk-kidsum-go { margin-left: auto; color: var(--kk-sky); }
.kk-jobchip.solid { background: var(--kk-mint); }
.kk-jobchip.wobbly { background: var(--kk-sunny); }
.kk-jobchip.slipping { background: #ff9f45; }
.kk-jobchip.never { background: var(--kk-coral); }
.kk-jobchip.none { background: #eceff4; }

/* ---- kid-first chore editor (member file → Chores tab) ---- */
.kk-kidchores-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.kk-kidchores-headbtns { display: flex; gap: .4rem; flex-wrap: wrap; }
.kk-sugrow { display: flex; align-items: center; gap: .5rem; padding: .35rem .1rem; border-bottom: 1px solid rgba(31,42,68,.08); cursor: pointer; }
.kk-sugrow:last-of-type { border-bottom: none; }
.kk-sugrow-title { font-weight: 600; }
.kk-sugrow-meta { margin-left: auto; font-size: .82rem; color: rgba(31,42,68,.6); }
.kk-kidchores-title { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.2rem; }
.kk-kidchores-msg { background: var(--kk-sunny); border: 2px solid var(--kk-ink); border-radius: 10px; padding: .35rem .7rem; margin-bottom: .7rem; font-weight: 600; font-size: .92rem; }
.kk-kidchores-empty { text-align: center; color: rgba(31,42,68,.6); border: 2.5px dashed rgba(31,42,68,.3); border-radius: 14px; padding: 1.4rem 1rem; }

.kk-addjob { border: 2.5px dashed var(--kk-ink); border-radius: 14px; background: var(--kk-paper); padding: .8rem; margin-bottom: 1rem; }
.kk-addjob-label { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; color: rgba(31,42,68,.8); }
.kk-addjob-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.kk-addjob-chip { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 2px solid var(--kk-ink); border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; font-weight: 600; cursor: pointer; }
.kk-addjob-chip:hover { background: #f2f8ff; }
.kk-addjob-plus { color: var(--kk-sky); font-weight: 800; }
.kk-newjob { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kk-newjob-icon { width: 3rem; text-align: center; flex: 0 0 auto; }
.kk-newjob-title { flex: 1 1 10rem; min-width: 8rem; }
.kk-newjob-pts { width: 4.5rem; flex: 0 0 auto; }

.kk-jobedit { border: 2.5px solid var(--kk-ink); border-left: 8px solid var(--kid, var(--kk-sky)); border-radius: 14px; background: #fff; padding: .6rem .75rem; margin-bottom: .6rem; }
.kk-jobedit.penalty { border-left-color: var(--kk-coral); }

/* two-home chore editor: a section per home */
.kk-home-section { margin-bottom: 1.1rem; }
.kk-home-section-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--kk-font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--kk-ink); margin: .2rem 0 .5rem;
    padding-bottom: .35rem; border-bottom: 2px dashed rgba(31,42,68,.18);
}
.kk-home-section-empty { color: rgba(31,42,68,.5); font-size: .88rem; margin: 0 0 .5rem .2rem; }
/* the "lives at" home mover on each job */
.kk-jobedit-home { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed rgba(31,42,68,.12); }
.kk-jobedit-home-lbl { font-size: .8rem; font-weight: 700; color: rgba(31,42,68,.55); margin-right: .1rem; }
.kk-homepill {
    background: var(--kk-paper, #fff9f0); border: 2px solid var(--kk-ink); border-radius: 999px;
    font-family: var(--kk-font-display); font-weight: 700; font-size: .78rem;
    color: var(--kk-ink); padding: .1rem .55rem;
}
.kk-homepill.on { background: var(--kk-sunny); box-shadow: 1px 1px 0 var(--kk-ink); }
.kk-addjob-target { font-size: .85rem; color: rgba(31,42,68,.7); margin-bottom: .5rem; }
.kk-jobedit-top { display: flex; align-items: center; gap: .5rem; }
.kk-jobedit-name { font-weight: 600; flex: 1 1 auto; }
.kk-jobedit-pts { font-weight: 800; color: var(--kk-mint); }
.kk-jobedit.penalty .kk-jobedit-pts { color: var(--kk-coral); }
.kk-jobedit-remove { border: none; background: transparent; color: var(--kk-coral); font-weight: 800; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.kk-jobedit-sched { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: .55rem; }
.kk-daychips-sm { display: flex; gap: .25rem; }
.kk-daychips-sm .kk-daychip { padding: .12rem .4rem; font-size: .78rem; min-width: 1.9rem; }
.kk-jobedit-time { display: flex; align-items: center; gap: .35rem; }
.kk-jobedit-by { color: rgba(31,42,68,.6); font-size: .85rem; }
.kk-jobedit-save { padding: .15rem .7rem; }

/* ---- planner: timed per-person agenda ---- */
.kk-agenda { display: flex; flex-direction: column; }
.kk-agendarow { display: flex; align-items: center; gap: .5rem; padding: .45rem .2rem; border-bottom: 1px solid rgba(31,42,68,.1); }
.kk-agendarow:last-child { border-bottom: none; }
.kk-agendarow.kk-eventrow { cursor: pointer; }
.kk-agendarow.kk-eventrow:hover { background: rgba(77,150,255,.06); }
.kk-agenda-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.1rem; color: var(--kk-ink); }
.kk-agenda-tick { font-size: 1.15rem; line-height: 1; min-width: 1.4rem; text-align: center; }
.kk-agenda-title { flex: 1 1 auto; min-width: 0; }
.kk-agenda-who { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: rgba(31,42,68,.7); white-space: nowrap; }
/* points: a neutral cream chip — NOT green, so green is left to mean "done" */
.kk-agenda-pts {
    flex: 0 0 auto;
    font-family: var(--kk-font-display);
    font-weight: 700; font-size: .8rem;
    background: var(--kk-paper, #fff9f0);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .02rem .5rem;
    color: var(--kk-ink);
}
.kk-agendarow.penalty .kk-agenda-pts { background: var(--kk-coral); color: #fff; }
/* the "log it" action — sky blue, so it reads as DO-THIS, distinct from the green done-tick */
.kk-done-btn {
    background: var(--kk-sky, #4d96ff); color: #fff;
    border: 2px solid var(--kk-ink); border-radius: 10px;
    font-family: var(--kk-font-display); font-weight: 700;
    box-shadow: 2px 2px 0 var(--kk-ink);
}
.kk-done-btn:hover { color: #fff; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--kk-ink); }
.kk-done-btn:disabled { opacity: .5; }
.kk-agenda-anylabel { font-family: var(--kk-font-display); font-weight: 600; margin: .6rem 0 .1rem; color: rgba(31,42,68,.7); }

/* planner: compact member-filter strip (one scrolling row, not a stack) */
.kk-planner-week { font-weight: 700; white-space: nowrap; }
.kk-planner-filter {
    display: flex; flex-wrap: nowrap; gap: .4rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 0 .7rem; margin-bottom: .6rem;
    border-bottom: 2px dashed rgba(31,42,68,.15);
}
.kk-pfilter {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    background: #fff; border: 2.5px solid var(--kk-ink); border-radius: 999px;
    font-family: var(--kk-font-display); font-weight: 700; font-size: .85rem;
    color: var(--kk-ink); padding: .25rem .7rem; flex: 0 0 auto;
    box-shadow: 2px 2px 0 rgba(31,42,68,.12);
}
.kk-pfilter.on { background: var(--kk-sunny); box-shadow: 2px 2px 0 rgba(31,42,68,.22); }
.kk-pfilter-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--kk-ink); flex: 0 0 auto; }

.kk-memberplanner .kk-mp-nav { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.kk-mp-week { font-family: var(--kk-font-display); font-weight: 600; }

/* ---- member folder: Rewards ---- */
.kk-mr-balance { font-family: var(--kk-font-display); font-size: 1.2rem; margin-bottom: .8rem; }
.kk-reward {
    border: 2.5px solid var(--kk-ink); border-radius: 14px; background: #fff; padding: .7rem .6rem;
    text-align: center; height: 100%; display: flex; flex-direction: column; gap: .3rem; align-items: center;
}
.kk-reward.afford { background: #e7f7e9; box-shadow: 3px 3px 0 var(--kk-ink); }
.kk-reward-icon { font-size: 2rem; line-height: 1; }
.kk-reward-title { font-weight: 600; }
.kk-reward-cost { font-weight: 800; color: var(--kk-sky); }
.kk-reward-short { font-size: .82rem; color: rgba(31,42,68,.6); font-weight: 600; }
.kk-reward-kind { font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; border: 2px solid var(--kk-ink); }
.kk-reward-kind.anytime { background: #d9f0ff; }
.kk-reward-kind.ceremony { background: var(--kk-sunny); }

/* ---- member folder: Redemptions ---- */
.kk-redrow {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .2rem;
    border-bottom: 1px solid rgba(31,42,68,.1);
}
.kk-redrow:last-child { border-bottom: none; }
.kk-red-icon { font-size: 1.3rem; }
.kk-red-title { font-weight: 600; }
.kk-red-when { font-size: .8rem; color: rgba(31,42,68,.55); }
.kk-red-cost { font-weight: 800; color: var(--kk-coral); }
.kk-red-status { margin-left: auto; font-size: .85rem; font-weight: 600; }
.kk-redrow.requested .kk-red-status { color: #d98a00; }
.kk-redrow.approved .kk-red-status { color: var(--kk-mint); }
.kk-redrow.declined .kk-red-status { color: rgba(31,42,68,.5); }

.kk-rhythm { display: flex; gap: .5rem; }

.kk-rhythm-day {
    flex: 1;
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
    text-align: center;
    padding: .6rem 0;
}

.kk-rhythm-label { font-family: var(--kk-font-display); font-weight: 700; font-size: .85rem; }
.kk-rhythm-count { font-size: 1.15rem; font-weight: 700; }

/* ---------- Day-of-week chips ---------- */

.kk-daychips { display: flex; gap: .25rem; flex-wrap: wrap; }

.kk-daychip {
    width: 32px; height: 32px;
    border: 2.5px solid var(--kk-ink);
    border-radius: 50%;
    background: var(--kk-white);
    font-family: var(--kk-font-display);
    font-size: .72rem;
    font-weight: 700;
    padding: 0;
    transition: transform .08s ease;
}

.kk-daychip:hover { transform: scale(1.12); }
.kk-daychip.on { background: var(--kk-sunny); }

/* ---------- Pack peek modal ---------- */

.kk-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 42, 68, .5);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.kk-modal {
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
}

.kk-peek-hint {
    /* a pill, not an underlined hyperlink — house rule: buttons only, no web links */
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--kk-ink);
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .15rem .6rem;
    text-decoration: none;
    cursor: pointer;
}

/* ---------- Kid Mode ---------- */

.kk-kid-pick { cursor: pointer; }

.kk-pin-dots { display: flex; justify-content: center; gap: .6rem; }

.kk-pin-dot {
    width: 18px; height: 18px;
    border: 3px solid var(--kk-ink);
    border-radius: 50%;
    background: var(--kk-white);
}

.kk-pin-dot.filled { background: var(--kk-sunny); }

.kk-pinpad {
    display: grid;
    grid-template-columns: repeat(3, 84px);
    gap: .6rem;
    justify-content: center;
}

.kk-pinkey {
    height: 74px;
    font-family: var(--kk-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;
    box-shadow: var(--kk-shadow-sm);
    transition: transform .08s ease;
}

.kk-pinkey:active { transform: translate(2px, 2px); box-shadow: none; }
.kk-pinkey-go { background: var(--kk-mint); }
.kk-pinkey-soft { background: var(--kk-peach); }

.kk-kid-greeting { font-size: 2.2rem; }

.kk-kid-section { margin-top: 1.2rem; }

.kk-kid-job {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1rem 1.2rem;
}

.kk-kid-job.kk-kid-late { border-color: var(--kk-coral); background: #fff4f2; }

/* a completed job stays right where it was, clearly ticked off — never disappears on the kid */
.kk-kid-job.kk-kid-job-done { background: #eafaef; border-color: #1e8a4c; }
.kk-kid-job.kk-kid-job-done .kk-kid-job-title { text-decoration: line-through; opacity: .75; }
/* ---- member Progress tab: headline stats + colour legend ---- */
.kk-progress-stats { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kk-progress-stat {
    flex: 1 1 140px;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(31, 42, 68, .18);
    padding: .7rem .9rem;
    text-align: center;
}
.kk-progress-stat strong { display: block; font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif; font-size: 1.5rem; color: var(--kk-ink); }
.kk-progress-stat span { color: #55617a; font-size: .82rem; }
.kk-rel-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; font-size: .85rem; color: #55617a; }
.kk-rel-key { display: inline-flex; align-items: center; gap: .35rem; }
.kk-rel-key i { width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--kk-ink); display: inline-block; }
.kk-rel-key i.solid { background: var(--kk-mint); }
.kk-rel-key i.wobbly { background: var(--kk-sunny); }
.kk-rel-key i.slipping { background: #ff9f45; }
.kk-rel-key i.never { background: var(--kk-coral); }

.kk-red-stats { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* compact pack cards in balanced rows — denser than the old 3-wide giants */
.kk-choice-compact { padding: .7rem .8rem; gap: .15rem; }
.kk-choice-compact .kk-choice-emoji { font-size: 1.7rem; }
.kk-choice-compact small { line-height: 1.25; }
.kk-peek-hint-inline { color: #7a86a0; font-style: italic; }

/* ---- balanced card rows (crew, prize shop, packs): every row fills the width evenly ---- */
.kk-crew-row { display: flex; justify-content: center; align-items: flex-end; gap: 1.6rem; padding: .55rem 0; }
.kk-prize-row { display: grid; gap: .9rem; margin-bottom: .9rem; }
.kk-prize-card {
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(31, 42, 68, .16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kk-prize-head {
    padding: .45rem .75rem;
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    border-bottom: 2.5px solid var(--kk-ink);
    background: var(--kk-sunny);
}
.kk-prize-body { padding: .55rem .7rem .65rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.kk-prize-meta { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 700; color: var(--kk-ink); }
.kk-prize-act { display: flex; gap: .45rem; margin-top: auto; }
.kk-prize-who {
    flex: 1 1 auto; min-width: 0;
    border: 2px solid var(--kk-ink); border-radius: 999px;
    padding: .3rem .7rem; font-weight: 600; background: #fff; color: var(--kk-ink);
}
.kk-prize-redeem {
    flex: none;
    border: 2px solid var(--kk-ink); border-radius: 999px;
    background: var(--kk-mint); color: var(--kk-ink); font-weight: 700;
    padding: .3rem .8rem; cursor: pointer;
}
.kk-prize-redeem:disabled { opacity: .4; cursor: default; }

/* pinned tab-page footer: the summary line locks to the panel's bottom edge while the body
   scrolls above it — the "balanced page" pattern (reusable on any tabbed page) */
.kk-tabpanel-foot {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.35rem;
    border-top: 2px dashed rgba(31, 42, 68, .18);
    background: var(--kk-white);
}

/* "Do this next": two columns when there's room — the whole day on screen without scrolling */
.kk-now-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.6rem; }
@media (min-width: 1000px) { .kk-now-grid { grid-template-columns: 1fr 1fr; } }

/* ---- member Lock tab: setter left, explanation right ---- */
.kk-lock-tab { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 800px) { .kk-lock-tab { grid-template-columns: 1fr; } }
.kk-lock-info .kk-pageinfo { max-width: none; }

/* ---- "what's this page?" explainer: bottom-right of sparse pages ---- */
.kk-pageinfo-wrap { display: flex; justify-content: flex-end; margin-top: 1.6rem; }
.kk-pageinfo {
    max-width: 460px;
    background: #fffdf6;
    border: 2.5px dashed rgba(31, 42, 68, .35);
    border-radius: 16px;
    padding: .9rem 1.15rem;
    color: #55617a;
    font-size: .9rem;
}
.kk-pageinfo-head { font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif; font-weight: 700; color: var(--kk-ink); margin-bottom: .35rem; }
.kk-pageinfo-body ul { margin: 0; padding-left: 1.15rem; }
.kk-pageinfo-body li { margin: .3rem 0; }
.kk-pageinfo-body p { margin: .3rem 0; }

.kk-photoproof { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.kk-photoproof-thumb {
    width: 44px; height: 44px; object-fit: cover;
    border: 2.5px solid var(--kk-ink); border-radius: 10px;
    box-shadow: 2px 2px 0 rgba(31,42,68,.18);
}
.kk-kid-done-badge {
    display: inline-block;
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    color: #1e8a4c;
    background: #d6f5e1;
    border: 2.5px solid #1e8a4c;
    border-radius: 999px;
    padding: .35rem .9rem;
    white-space: nowrap;
}

.kk-kid-job-icon { font-size: 2.6rem; }
.kk-kid-job-title { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.2rem; }
.kk-kid-done-btn { font-size: 1.1rem; padding: .5rem 1.2rem; }

.kk-kid-done-all {
    text-align: center;
    font-family: var(--kk-font-display);
    font-size: 1.6rem;
    padding: 1.5rem;
}

/* age-appropriate dialling: little kids get BIG and bouncy, teens get calm and dense */
.kk-kid-ui-little .kk-kid-job-icon { font-size: 3.4rem; }
.kk-kid-ui-little .kk-kid-job-title { font-size: 1.5rem; }
.kk-kid-ui-little .kk-kid-done-btn { font-size: 1.4rem; padding: .7rem 1.6rem; }
.kk-kid-ui-little .kk-kid-greeting { font-size: 2.8rem; }
.kk-kid-ui-little .kk-kid-job:hover { transform: rotate(-1deg) scale(1.02); }

.kk-kid-ui-teen .kk-kid-job-icon { font-size: 2rem; }
.kk-kid-ui-teen .kk-kid-job-title { font-size: 1.05rem; }
.kk-kid-ui-teen .kk-kid-job { padding: .7rem 1rem; box-shadow: var(--kk-shadow-sm); }
.kk-kid-ui-teen .kk-kid-greeting { font-size: 1.8rem; }

/* ---------- TV award-ceremony mode ---------- */

.kk-tv-stage {
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 0%, #2b3a67 0%, #1a2340 55%, #10162b 100%);
    color: #fff;
    padding: 2rem 3rem;
    position: relative;
    overflow: hidden;
    font-family: var(--kk-font-body);
}

.kk-tv-header { text-align: center; position: relative; z-index: 2; }

.kk-tv-header h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--kk-font-display);
    text-shadow: 0 4px 20px rgba(255, 217, 61, .35);
}

.kk-tv-header p { color: rgba(255,255,255,.7); font-size: 1.3rem; }

.kk-tv-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 90vh; font-size: 6rem;
    animation: kk-bounce 1s ease-in-out infinite;
}

.kk-tv-podium { margin: 1.5rem 0 2rem; position: relative; z-index: 2; }
.kk-tv-podium .kk-podium-spot { width: 220px; }
.kk-tv-podium .kk-podium-name { color: #fff; font-size: 1.5rem; }
.kk-tv-podium .kk-podium-points { color: var(--kk-sunny); font-size: 1.2rem; font-weight: 700; }
.kk-tv-podium .kk-podium-block { font-size: 2.2rem; }
.kk-tv-crown { font-size: 2.6rem; animation: kk-bounce 2s ease-in-out infinite; }

.kk-tv-standings {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.kk-tv-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .4rem 0;
}

.kk-tv-row svg { background: rgba(255,255,255,.9); border-radius: 12px; padding: 2px; }

.kk-tv-name {
    width: 130px;
    font-family: var(--kk-font-display);
    font-size: 1.3rem;
    font-weight: 600;
}

.kk-tv-bar-track {
    flex: 1;
    height: 26px;
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    overflow: hidden;
}

.kk-tv-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 1s ease;
    min-width: 4px;
}

.kk-tv-pts {
    width: 70px;
    text-align: right;
    font-family: var(--kk-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--kk-sunny);
}

.kk-tv-footer {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255,255,255,.4);
    font-size: .9rem;
    position: relative;
    z-index: 2;
}

/* falling confetti */
.kk-tv-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.kk-tv-confetti span {
    position: absolute;
    top: -20px;
    width: 10px; height: 14px;
    border-radius: 3px;
    opacity: .85;
    animation: kk-confetti-fall 7s linear infinite;
}

@keyframes kk-confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(720deg); }
}

@media (max-width: 640px) {
    .kk-header { justify-content: center; }
    .kk-nav a { font-size: .85rem; padding: .35rem .7rem; }
    .kk-podium-spot { width: 100px; }
}

/* ═══════ native app chrome (MobileLayout — Blazor Hybrid only) ═══════ */
.kk-app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kk-paper);
}
.kk-app-top {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--kk-white);
    border-bottom: 3px solid var(--kk-ink);
}
.kk-app-top-centered { justify-content: center; }
.kk-app-user {
    width: 50px;
    height: 50px;
    border: 2.5px solid var(--kk-ink);
    border-radius: 50%;
    background: var(--kk-white);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--kk-ink);
}
.kk-app-user-initial {
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 46px;
    color: var(--kk-ink);
}
.kk-app-menu {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    right: 12px;
    z-index: 60;
    min-width: 210px;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
    overflow: hidden;
}
.kk-app-menu-name {
    padding: 12px 16px;
    font-family: var(--kk-font-display);
    font-weight: 700;
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
}
.kk-app-menu a,
.kk-app-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid #f0e9dc;
    font-family: var(--kk-font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--kk-ink);
    text-decoration: none;
}
.kk-app-menu > :last-child { border-bottom: 0; }
.kk-app-main {
    flex: 1;
    padding: 16px 16px calc(92px + env(safe-area-inset-bottom));
}
.kk-app-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    background: var(--kk-white);
    border-top: 3px solid var(--kk-ink);
    padding-bottom: env(safe-area-inset-bottom);
}
.kk-app-tab {
    flex: 1;
    text-align: center;
    padding: 7px 0 9px;
    font-family: var(--kk-font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--kk-ink);
    text-decoration: none;
    opacity: .5;
}
.kk-app-tab .kk-app-tab-ico {
    display: block;
    font-size: 23px;
    line-height: 1.25;
}
.kk-app-tab.active {
    opacity: 1;
    color: var(--kk-coral);
}
.kk-app-tab.active .kk-app-tab-ico { transform: translateY(-1px); }

/* ---- the 🎈 More tab grid ---- */
.kk-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
}
.kk-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 18px 10px 14px;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    text-decoration: none;
    color: var(--kk-ink);
}
.kk-more-emoji { font-size: 34px; line-height: 1.2; }
.kk-more-title { font-family: var(--kk-font-display); font-weight: 700; font-size: 17px; }
.kk-more-sub { font-size: 12px; color: #6b7490; }

/* narrow screens: the portrait scene shrinks with width but the avatar strip is
   fixed-pixel — scale the whole strip so heads stay inside the frame */
@media (max-width: 700px) {
    .kk-portrait-strip { transform: scale(.62); transform-origin: 50% 100%; }
}
@media (max-width: 480px) {
    .kk-portrait-strip { transform: scale(.44); transform-origin: 50% 100%; }
}

/* phones: the dashboard must fit one screen — compact hero, chips and tiles */
@media (max-width: 480px) {
    .kk-hero h1 { font-size: 1.55rem; margin: 0 0 .3rem; }
    .kk-hero { margin-bottom: .4rem; }
    .kk-portrait { margin: .5rem auto; border-width: 3px; }
    .kk-tile {
        padding: .6rem .5rem;
        font-size: .95rem;
        border-radius: 14px;
        box-shadow: var(--kk-shadow-sm);
    }
    .kk-tile .kk-tile-emoji {
        display: inline-block;
        font-size: 1.45rem;
        margin: 0 .45rem 0 0;
        vertical-align: -4px;
    }
    .row.g-4 { --bs-gutter-x: .8rem; --bs-gutter-y: .8rem; }
    .kk-app-main { padding: 10px 12px calc(82px + env(safe-area-inset-bottom)); }
}

/* ═══════ app chrome v2: mustard bars (same sunny as the card banners) ═══════ */
.kk-app-top {
    background: var(--kk-sunny);
}
.kk-app-tabs {
    background: var(--kk-sunny);
}
.kk-app-tab { opacity: .62; }
.kk-app-tab.active {
    opacity: 1;
    color: var(--kk-ink);
    font-weight: 700;
}
.kk-app-tab.active .kk-app-tab-ico {
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 16px;
    padding: 1px 14px;
    margin: 0 auto 2px;
    width: fit-content;
    box-shadow: 2px 2px 0 var(--kk-ink);
    transform: none;
}
.kk-app-user { box-shadow: 2px 2px 0 var(--kk-ink); }

/* ═══════ KPI sticker cards — one cohesive card, no badge soup ═══════ */
.kk-kpi-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    overflow: hidden;
}
.kk-kpi-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
    font-family: var(--kk-font-display);
}
.kk-kpi-emoji { font-size: 1.45rem; line-height: 1; }
.kk-kpi-title { flex: 1; font-weight: 700; font-size: 1.02rem; }
.kk-kpi-pts {
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .05rem .55rem;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}
.kk-kpi-x {
    border: 0;
    background: none;
    color: var(--kk-ink);
    opacity: .5;
    font-weight: 700;
    padding: 0 .1rem;
}
.kk-kpi-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .8rem .8rem;
}
.kk-kpi-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    font-size: .85rem;
    color: #6b7490;
    font-weight: 600;
}
.kk-kpi-time { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.kk-kpi-time input[type="time"] {
    border: 2px solid var(--kk-ink);
    border-radius: 10px;
    padding: .05rem .3rem;
    font-family: var(--kk-font-body);
    font-size: .85rem;
    background: var(--kk-white);
    color: var(--kk-ink);
}
.kk-daychips-stretch { display: flex; justify-content: space-between; gap: .25rem; }
.kk-daychips-stretch .kk-daychip { flex: 1; }
.kk-kpi-people {
    border-top: 2px dashed #e8dfcd;
    padding-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.kk-kpi-person {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
}
.kk-kpi-person-dot {
    display: inline-block; /* keeps its size inside buttons, not just flex rows */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--kk-ink);
    flex: none;
    vertical-align: -2px;
}
.kk-kpi-person-name { font-weight: 800; }
.kk-kpi-person-sched { flex: 1; color: #6b7490; font-size: .84rem; }
.kk-kpi-person-x {
    border: 0;
    background: none;
    color: var(--kk-ink);
    opacity: .45;
    font-weight: 700;
}
.kk-kpi-assignbtn {
    align-self: flex-start;
    margin-top: .1rem;
    padding: .22rem .7rem;
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--kk-ink);
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .85rem;
    color: var(--kk-ink);
}

/* ═══════ app chrome v3: ONE header + in-page sections ═══════ */

/* the top bar owns the page title */
.kk-app-pagetitle {
    flex: 1;
    text-align: center;
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .5rem;
}
.kk-app-logomark { flex: none; }

/* pages hide their own h1 + lead paragraph inside the app — no double headers */
.kk-app-onehead > h1:first-child,
.kk-app-onehead > h1:first-child + p {
    display: none;
}

/* segmented section pills — one section at a time instead of a long scroll */
.kk-seg {
    display: flex;
    gap: .4rem;
    margin: .1rem 0 .9rem;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.kk-seg-pill {
    flex: 1;
    white-space: nowrap;
    padding: .42rem .7rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--kk-ink);
    opacity: .75;
}
.kk-seg-pill.on {
    background: var(--kk-sunny);
    opacity: 1;
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* planner week nav on phones: tight and one line */
@media (max-width: 480px) {
    .kk-week-nav .btn { padding: .3rem .65rem; font-size: .85rem; }
    .kk-week-nav h5 { font-size: .95rem; }
}

/* ═══════ app home = a real dashboard (today, ticks, coming up) ═══════ */
.kk-home-ticks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--kk-sunny);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
    padding: .6rem .9rem;
    margin-bottom: .9rem;
    font-weight: 700;
    cursor: pointer;
}
.kk-home-ticks-go { font-family: var(--kk-font-display); }
.kk-home-card {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    overflow: hidden;
    margin-bottom: .9rem;
}
.kk-home-card-head {
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
    padding: .5rem .9rem;
    font-family: var(--kk-font-display);
    font-weight: 700;
}
.kk-home-card-body { padding: .7rem .9rem; }
.kk-home-today {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem 0;
}
.kk-home-today-name { font-weight: 800; min-width: 72px; }
.kk-home-today-bar {
    flex: 1;
    height: 14px;
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-white);
    overflow: hidden;
}
.kk-home-today-fill {
    display: block;
    height: 100%;
    background: var(--kk-mint);
    transition: width .3s ease;
}
.kk-home-today-count { min-width: 52px; text-align: right; font-weight: 700; font-size: .9rem; }
.kk-home-event {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .28rem 0;
}
.kk-home-event-day {
    font-family: var(--kk-font-display);
    font-weight: 700;
    background: #dcecff;
    border: 2px solid var(--kk-ink);
    border-radius: 10px;
    padding: 0 .5rem;
    font-size: .82rem;
}
.kk-home-event-title { flex: 1; font-weight: 700; }
.kk-home-event-who { font-size: .8rem; color: #6b7490; }
.kk-home-stats {
    display: flex;
    gap: .8rem;
    justify-content: center;
    margin-top: 1rem;        /* golden rule: these pills must never touch the crew card above */
    margin-bottom: .4rem;
}
.kk-home-stat {
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .92rem;
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* ═══════ new-family home: setup journey, compact verify, taller portrait ═══════ */
.kk-verify .card-body { padding: .55rem .8rem; }
.kk-verify-text { font-size: .88rem; }
.kk-verify-input { width: 92px; letter-spacing: .35em; padding: .2rem .45rem; font-size: .95rem; }

.kk-setup { display: flex; flex-direction: column; gap: .35rem; }
.kk-setup-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    background: var(--kk-white);
    cursor: pointer;
}
.kk-setup-step.done {
    opacity: .55;
    border-style: dashed;
    cursor: default;
}
.kk-setup-tick { font-size: 1.25rem; line-height: 1; }
.kk-setup-text { flex: 1; font-size: .92rem; }
.kk-setup-go {
    font-family: var(--kk-font-display);
    font-weight: 700;
    background: var(--kk-coral);
    color: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .15rem .65rem;
    box-shadow: 2px 2px 0 var(--kk-ink);
    white-space: nowrap;
}
.kk-setup-hint { margin: .35rem 0 0; font-size: .82rem; color: #6b7490; }

/* phones: give the portrait real height — zoom the scene instead of a letterbox strip */
@media (max-width: 480px) {
    .kk-portrait-scene { height: 205px; object-fit: cover; }
    .kk-portrait-strip { transform: scale(.56); transform-origin: 50% 100%; }
}

/* ⚡ quick-assign checklist */
.kk-quick-list {
    max-height: 46vh;
    overflow-y: auto;
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    padding: .3rem .6rem;
    background: var(--kk-white);
}
.kk-quick-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .15rem;
    border-bottom: 2px dashed #f0e9dc;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    width: 100%;
}
.kk-quick-row:last-child { border-bottom: 0; }
.kk-quick-row input { flex: none; }

/* ═══════ app first-launch welcome ═══════ */
.kk-welcome {
    max-width: 420px;
    margin: 0 auto;
    padding: 1.2rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
}
.kk-welcome-wordmark {
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 3rem;
    color: var(--kk-ink);
}
.kk-welcome-wordmark em { font-style: normal; color: var(--kk-coral); }
.kk-welcome-tag {
    font-family: var(--kk-font-display);
    font-size: 1.25rem;
    color: var(--kk-coral);
    font-weight: 600;
    margin-top: -0.6rem;
}
.kk-welcome-strip {
    display: flex;
    gap: .4rem;
    font-size: 2rem;
    background: #dcecff;
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .5rem 1rem;
}
.kk-welcome-blurb { font-size: 1rem; margin: 0; }
.kk-welcome-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-weight: 700;
    text-align: left;
}
.kk-welcome-cta { width: 100%; margin-top: .4rem; }
.kk-welcome-login { font-weight: 700; }
.kk-home-today-tap { cursor: pointer; }
.kk-home-today-main { display: flex; flex-direction: column; min-width: 110px; }
.kk-home-today-sub { font-size: .78rem; color: #6b7490; }

/* ═══════ live event toasts ═══════ */
.kk-toasts {
    position: fixed;
    top: calc(74px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(92vw, 420px);
    pointer-events: none;
}
.kk-toast {
    background: var(--kk-sunny);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: .92rem;
    animation: kk-toast-in .25s ease;
}
@keyframes kk-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* phones: the fridge chart is an A4-landscape sheet — let it scroll sideways
   instead of being cut off at the screen edge */
@media screen and (max-width: 760px) {
    .kk-print { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .6rem; }
    .kk-print .kk-sheet { min-width: 860px; }
}

/* first-ever-run skeleton — quiet shimmer bars, never the word "Loading" */
.kk-skeleton-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px;
}
.kk-skeleton-page span {
    display: block;
    border-radius: 14px;
    background: linear-gradient(90deg, #f0e9dc 25%, #faf4e8 50%, #f0e9dc 75%);
    background-size: 200% 100%;
    animation: kk-shimmer 1.2s infinite;
}
.kk-skeleton-page span:nth-child(1) { height: 120px; }
.kk-skeleton-page span:nth-child(2) { height: 64px; width: 82%; }
.kk-skeleton-page span:nth-child(3) { height: 64px; width: 65%; }
@keyframes kk-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ═══════ home cockpit: per-kid job chips ═══════ */
.kk-cockpit-kid { padding: .45rem 0 .55rem; border-bottom: 2px dashed #f0e9dc; }
.kk-cockpit-kid:last-of-type { border-bottom: 0; }
.kk-cockpit-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.kk-cockpit-avatar { width: 40px; height: 52px; overflow: hidden; display: flex; align-items: flex-end; }
.kk-cockpit-name { font-family: var(--kk-font-display); font-weight: 700; font-size: 1.05rem; }
.kk-cockpit-count { margin-left: auto; font-weight: 700; font-size: .85rem; color: #6b7490; }
.kk-cockpit-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.kk-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 999px;
    border: 2px solid var(--kk-ink);
    padding: .18rem .6rem;
    font-size: .82rem;
    font-weight: 700;
    background: var(--kk-white);
    color: var(--kk-ink);
}
.kk-chip-todo { box-shadow: 2px 2px 0 var(--kk-ink); }
.kk-chip-late { background: #ffe1e1; border-color: #c0392b; color: #7c1d12; box-shadow: 2px 2px 0 #c0392b; }
.kk-chip-wait { background: var(--kk-sunny); }
.kk-chip-done { opacity: .55; border-style: dashed; }
.kk-cockpit-hint { text-align: center; font-size: .74rem; color: #6b7490; margin-top: .5rem; }
.kk-home-logmsg {
    background: #e8f7ec;
    border: 2px solid var(--kk-ink);
    border-radius: 12px;
    padding: .4rem .7rem;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: .55rem;
}

/* ═══════ the week, phone-shaped (app version of the fridge chart) ═══════ */
.kk-mweek { max-width: 520px; margin: 0 auto; }
.kk-mweek-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.kk-mweek-title { font-family: var(--kk-font-display); font-weight: 700; font-size: 1.5rem; color: var(--member, var(--kk-ink)); }
.kk-mweek-dates { color: #6b7490; font-weight: 600; }
.kk-mweek-day {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    overflow: hidden;
    margin-bottom: .8rem;
}
.kk-mweek-today { border-color: var(--member, var(--kk-coral)); box-shadow: 4px 4px 0 var(--member, var(--kk-ink)); }
.kk-mweek-dayhead {
    background: var(--member, var(--kk-sunny));
    color: #fff;
    font-family: var(--kk-font-display);
    font-weight: 700;
    padding: .4rem .8rem;
    border-bottom: 3px solid var(--kk-ink);
}
.kk-mweek-job {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .8rem;
    border-bottom: 2px dashed #f0e9dc;
    font-weight: 700;
}
.kk-mweek-job:last-child { border-bottom: 0; }
.kk-mweek-state { font-size: 1.05rem; min-width: 26px; }
.kk-mweek-jobname { flex: 1; }
.kk-mweek-meta { font-size: .78rem; color: #6b7490; white-space: nowrap; }

/* welcome v2: the pitch, app-sized */
.kk-welcome-window {
    width: 100%;
    background: #dcecff;
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .8rem .6rem .55rem;
}
.kk-welcome-strip2 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .55rem;
}
.kk-welcome-strip2 > div { display: flex; flex-direction: column; align-items: center; }
.kk-welcome-strip2 span {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .72rem;
    background: rgba(255,255,255,.85);
    border-radius: 8px;
    padding: 0 .35rem;
    margin-top: 2px;
}
.kk-welcome-window-note { text-align: center; font-size: .74rem; color: #46608a; margin-top: .45rem; }
.kk-welcome-how { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.kk-welcome-step {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    text-align: left;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .7rem .8rem;
}
.kk-welcome-step span { font-size: .86rem; color: #4a5470; }
.kk-welcome-stepnum {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kk-sunny);
    border: 2.5px solid var(--kk-ink);
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: 1.1rem !important;
    color: var(--kk-ink) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kk-welcome-feats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}
.kk-welcome-feats span {
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .78rem;
    font-weight: 700;
}
.kk-welcome-foot { font-size: .8rem; color: #6b7490; margin: 0; }
.kk-cancel-link { color: #6b7490; font-weight: 700; text-decoration: none; }

/* pre-login app pages: no bar, safe-area padding so nothing hides under
   the status bar or the gesture bar */
.kk-app-authmain {
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

/* ═══════ welcome v3: the scroll story ═══════ */
.kk-app-authmain { overflow-x: clip; }
.kk-w { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: 1rem; }
.kk-w section { position: relative; }
.kk-w-rel { position: relative; }
.kk-w-hero { text-align: center; padding: 2.2rem 0 1.4rem; }
.kk-w-hook { font-family: var(--kk-font-display); font-size: 1.35rem; margin: 1rem 0 0; line-height: 1.25; }
.kk-w-hook strong { color: var(--kk-coral); font-size: 1.7rem; }

/* stickers hanging off the page at angles */
.kk-w-peek { position: absolute; z-index: 1; pointer-events: none; }
.kk-w-peek-tl { top: -14px; left: -44px; transform: rotate(-14deg); }
.kk-w-peek-br { bottom: -20px; right: -48px; transform: rotate(13deg); }
.kk-w-peek-l2 { top: -26px; left: -40px; transform: rotate(-11deg); }
.kk-w-peek-r2 { top: -30px; right: -42px; transform: rotate(12deg); }
.kk-w-peek-fl { top: -52px; left: -30px; transform: rotate(-9deg); }

/* hand-placed tilts */
.kk-w-tilt-l { transform: rotate(-1.4deg); }
.kk-w-tilt-r { transform: rotate(1.2deg); }
.kk-w-indent-l { margin-left: 52px; }
.kk-w-indent-r { margin-right: 56px; }

/* generic content card */
.kk-w-card {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .9rem 1rem;
}
.kk-w-card h3 { font-family: var(--kk-font-display); font-weight: 700; font-size: 1.12rem; margin: 0 0 .35rem; }
.kk-w-card p { margin: 0; font-size: .92rem; color: #3d4666; }
.kk-w-card em { font-style: normal; color: var(--kk-coral); }

/* fanned reward / profile chips */
.kk-w-rewards { display: flex; flex-wrap: wrap; gap: .45rem .4rem; margin-top: .55rem; }
.kk-w-reward {
    display: inline-block;
    background: var(--kk-sunny);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    transform: rotate(var(--tilt, 0deg));
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* final CTA */
.kk-w-final { padding-top: 1.6rem; }
.kk-w-cta-card {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    padding: 1.3rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    text-align: center;
}
.kk-w-cta-card h2 { font-family: var(--kk-font-display); font-weight: 700; font-size: 1.45rem; margin: 0; }

/* scroll-driven entrances: each section slides in from its own direction as it
   enters the viewport (CSS scroll timelines — no JS; older engines just show it) */
@supports (animation-timeline: view()) {
    .kk-w-in-left  { animation: kk-w-left both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .kk-w-in-right { animation: kk-w-right both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .kk-w-in-up    { animation: kk-w-up both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes kk-w-left {
    from { opacity: 0; transform: translateX(-70px) rotate(-5deg); }
    to { opacity: 1; transform: none; }
}
@keyframes kk-w-right {
    from { opacity: 0; transform: translateX(70px) rotate(5deg); }
    to { opacity: 1; transform: none; }
}
@keyframes kk-w-up {
    from { opacity: 0; transform: translateY(46px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* welcome v3.1: more air between sections, more of the family peeping in */
.kk-w { gap: 2.7rem; }
.kk-w-hero { padding: 2.8rem 0 1.8rem; }
.kk-w-final { padding-top: 2.4rem; }
.kk-w-card { padding: 1.05rem 1.1rem; }
.kk-w-peek-r3 { top: -58px; right: -34px; transform: rotate(10deg); }
.kk-w-peek-l3 { top: -64px; left: -36px; transform: rotate(-8deg); }
.kk-w-peek-r4 { bottom: -46px; right: -28px; transform: rotate(12deg); }

/* welcome v3.2: BIG head-and-shoulders peeks (clipped) + everyone steps in closer */
.kk-w-bigpeek {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.kk-w-bigpeek-l { left: -30px; top: -74px; width: 175px; height: 150px; transform: rotate(-10deg); }
.kk-w-bigpeek-r { right: -30px; top: -84px; width: 175px; height: 158px; transform: rotate(11deg); }

/* bring the small peekers further onto the page */
.kk-w-peek-tl { top: -12px; left: -24px; transform: rotate(-13deg); }
.kk-w-peek-br { bottom: -16px; right: -26px; transform: rotate(12deg); }
.kk-w-peek-l2 { top: -30px; left: -18px; transform: rotate(-10deg); }
.kk-w-peek-r3 { top: -60px; right: -14px; transform: rotate(9deg); }
.kk-w-peek-l3 { top: -70px; left: -16px; transform: rotate(-8deg); }
.kk-w-peek-r4 { bottom: -40px; right: -12px; transform: rotate(11deg); }
.kk-w-peek-fl { top: -60px; left: -12px; transform: rotate(-9deg); }

/* welcome v3.3: every peek = a clipped HEAD window, tilted INTO the page */
.kk-w-peek, .kk-w-bigpeek { z-index: 5; overflow: hidden; }

/* left-edge heads lean right (into the page), right-edge heads lean left */
.kk-w-peek-tl { top: -6px;  left: -20px;  width: 120px; height: 104px; transform: rotate(10deg); }
.kk-w-peek-br { bottom: -8px; right: -22px; width: 128px; height: 112px; transform: rotate(-11deg); }
.kk-w-peek-l2 { top: -52px; left: -18px;  width: 116px; height: 100px; transform: rotate(9deg); }
.kk-w-peek-r3 { top: -58px; right: -16px; width: 104px; height: 92px;  transform: rotate(-9deg); }
.kk-w-peek-l3 { top: -66px; left: -18px;  width: 120px; height: 104px; transform: rotate(8deg); }
.kk-w-peek-r4 { bottom: -10px; right: -14px; width: 98px; height: 88px; transform: rotate(-12deg); }
.kk-w-peek-fl { top: -64px; left: -14px;  width: 118px; height: 102px; transform: rotate(9deg); }
.kk-w-bigpeek-l { left: -26px; top: -78px; width: 180px; height: 150px; transform: rotate(8deg); }
.kk-w-bigpeek-r { right: -26px; top: -88px; width: 180px; height: 155px; transform: rotate(-8deg); }

/* auth alt-actions: buttons, never hyperlinks */
.kk-auth-alt {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.kk-auth-alt .btn { flex: 1; min-width: 140px; }

/* /app download page: store buttons */
.kk-getapp { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.4rem 0 .4rem; }
.kk-store-btn {
    display: inline-flex; align-items: center; gap: .7rem;
    background: var(--kk-ink); color: #fff;
    border: 3px solid var(--kk-ink); border-radius: 16px;
    box-shadow: 4px 4px 0 rgba(31,42,68,.25);
    padding: .6rem 1.1rem; text-decoration: none; min-width: 210px;
    transition: transform .1s ease;
}
.kk-store-btn:hover { color: #fff; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(31,42,68,.3); }
.kk-store-ico { font-size: 1.8rem; line-height: 1; }
.kk-store-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.kk-store-txt small { font-size: .72rem; opacity: .8; }
.kk-store-txt strong { font-family: var(--kk-font-display); font-size: 1.15rem; }
.kk-store-android { background: var(--kk-mint, #6bcb77); }
.kk-store-soon { background: #eceff4; color: rgba(31,42,68,.55); cursor: default; box-shadow: 4px 4px 0 rgba(31,42,68,.12); }
.kk-store-soon:hover { transform: none; box-shadow: 4px 4px 0 rgba(31,42,68,.12); color: rgba(31,42,68,.55); }
.kk-getapp-ver { text-align: center; color: rgba(31,42,68,.6); font-size: .85rem; }
.kk-getapp-how {
    max-width: 640px; margin: 1.6rem auto 0; text-align: left;
    background: var(--kk-white); border: 3px solid var(--kk-ink); border-radius: 18px;
    box-shadow: var(--kk-shadow, 5px 5px 0 rgba(31,42,68,.25)); padding: 1.1rem 1.3rem;
}
.kk-getapp-how h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.kk-getapp-how ol { margin: 0 0 .6rem 1.1rem; padding: 0; }
.kk-getapp-how li { margin-bottom: .35rem; }
.kk-getapp-how code { background: #f0ece2; padding: 0 .3rem; border-radius: 5px; }

/* member overview: parent flips where the kid currently is (two-home families) */
.kk-wherekid {
    background: var(--kk-paper, #fff9f0);
    border: 3px solid var(--kk-ink); border-radius: 16px;
    box-shadow: 3px 3px 0 rgba(31,42,68,.14);
    padding: .7rem .9rem; margin-bottom: 1rem;
}
.kk-wherekid-lbl { font-family: var(--kk-font-display); font-weight: 700; color: var(--kk-ink); }
.kk-wherekid-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .35rem; }
.kk-wherekid-pill {
    background: #fff; border: 2.5px solid var(--kk-ink); border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(31,42,68,.14);
    font-family: var(--kk-font-display); font-weight: 700; font-size: .9rem;
    color: var(--kk-ink); padding: .3rem .85rem;
}
.kk-wherekid-pill.on { background: var(--kk-mint, #6bcb77); }
.kk-wherekid-note { font-size: .8rem; color: rgba(31,42,68,.6); }

/* setup wizard: "who's based where" home-assignment rows */
.kk-homebase-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kk-homebase-who { font-weight: 700; min-width: 120px; }
.kk-homebase-row .btn { flex: 1; min-width: 90px; }

/* member folder breadcrumb — an always-visible way back up to Family */
.kk-crumb {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .15rem;
}
.kk-crumb-back {
    display: inline-flex; align-items: center;
    background: var(--kk-sunny);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(31,42,68,.18);
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700; font-size: .9rem;
    color: var(--kk-ink); text-decoration: none;
    padding: .28rem .8rem;
    transition: transform .08s ease;
}
.kk-crumb-back:hover { transform: translateY(-1px); color: var(--kk-ink); }
.kk-crumb-sep { color: rgba(31,42,68,.4); font-size: 1.2rem; }
.kk-crumb-here {
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700; font-size: 1.6rem; color: var(--kk-ink);
}

/* register: inline email-verify step */
.kk-verify-step { animation: kkFadeIn .25s ease; }
.kk-verify-badge {
    width: 62px; height: 62px; margin: 0 auto .6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; background: #ffd93d;
    border: 3px solid #1f2a44; border-radius: 50%;
    box-shadow: 3px 3px 0 rgba(31,42,68,.15);
}
.kk-otp-input {
    font-family: 'Fredoka', sans-serif;
    font-size: 2rem; font-weight: 700;
    letter-spacing: .5rem; text-align: center;
    padding-left: .5rem; /* offset the trailing letter-spacing so digits look centred */
    border: 2.5px solid #1f2a44; border-radius: 14px;
    box-shadow: 2px 2px 0 rgba(31,42,68,.12);
}
.kk-otp-input:focus {
    border-color: #ff6b6b;
    box-shadow: 2px 2px 0 rgba(255,107,107,.25);
    outline: none;
}
@keyframes kkFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* welcome v3.4: every peeker LEANS IN as it arrives; grandma off the title */
.kk-w-peek-tl { --pr: 10deg;  --px: -90px; }
.kk-w-peek-br { --pr: -11deg; --px: 90px; }
.kk-w-peek-l2 { --pr: 9deg;   --px: -90px; }
.kk-w-peek-r3 { --pr: -9deg;  --px: 90px; }
.kk-w-peek-l3 { --pr: 8deg;   --px: -90px; top: -98px; left: -24px; }
.kk-w-peek-r4 { --pr: -12deg; --px: 90px; }
.kk-w-peek-fl { --pr: 9deg;   --px: -90px; }
.kk-w-bigpeek-l { --pr: 8deg;  --px: -110px; }
.kk-w-bigpeek-r { --pr: -8deg; --px: 110px; top: -100px; }

@supports (animation-timeline: view()) {
    .kk-w-peek, .kk-w-bigpeek {
        animation: kk-peek-in both;
        animation-timeline: view();
        animation-range: entry 5% entry 90%;
    }
}
@keyframes kk-peek-in {
    from { opacity: 0; transform: translateX(var(--px, -80px)) translateY(26px) rotate(calc(var(--pr, 0deg) * 3.2)); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateX(0) translateY(0) rotate(var(--pr, 0deg)); }
}

/* ═══════ the Now inbox ═══════ */
.kk-inbox .kk-home-card-head { background: var(--kk-coral); color: #fff; }
.kk-inbox-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 2px dashed #f0e9dc;
}
.kk-inbox-item:last-child { border-bottom: 0; }
.kk-inbox-main { flex: 1; min-width: 0; }
.kk-inbox-text { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .92rem; }
.kk-inbox-pts { font-family: var(--kk-font-display); font-weight: 700; color: var(--kk-coral); }
.kk-inbox-photo {
    margin-top: .4rem;
    max-height: 110px;
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
}
.kk-inbox-actions { display: flex; gap: .4rem; flex: none; }
.kk-inbox-yes, .kk-inbox-no {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2.5px solid var(--kk-ink);
    font-size: 1.15rem;
    background: var(--kk-mint);
    box-shadow: 2px 2px 0 var(--kk-ink);
}
.kk-inbox-no { background: #ffe1e1; }
.kk-inbox-nudge {
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-sunny);
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: .82rem;
    padding: .35rem .7rem;
    box-shadow: 2px 2px 0 var(--kk-ink);
    white-space: nowrap;
}
.kk-inbox-surprise {
    background: #fff7dc;
    border: 2.5px dashed var(--kk-coral);
    border-radius: 14px;
    padding: .6rem .6rem;
    margin: .3rem 0;
}
.kk-inbox-surprise-tag {
    font-family: var(--kk-font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--kk-coral);
    margin-bottom: .2rem;
}
.kk-inbox-clear {
    text-align: center;
    font-family: var(--kk-font-display);
    font-weight: 600;
    color: #6b7490;
    padding: .5rem 0 .2rem;
}

/* ═══════ kid quest run + goal ═══════ */
.kk-quest {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.kk-quest-perfect { background: var(--kk-sunny); }
.kk-quest-title { font-family: var(--kk-font-display); font-weight: 700; margin-bottom: .45rem; }
.kk-quest-bar {
    height: 16px;
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-white);
    overflow: hidden;
}
.kk-quest-bar span { display: block; height: 100%; background: var(--kk-mint); transition: width .4s ease; }
.kk-goal-card {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow-sm);
    padding: .8rem .9rem;
}
.kk-goal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.kk-goal-name { font-family: var(--kk-font-display); font-weight: 700; font-size: 1.05rem; }
.kk-goal-change { border: 0; background: none; color: #6b7490; font-weight: 700; font-size: .8rem; }
.kk-goal-bar span { background: var(--kk-sunny); }
.kk-goal-sub { margin: .45rem 0 0; font-weight: 700; font-size: .9rem; color: #4a5470; }
.kk-goal-pick {
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    background: var(--kk-white);
    font-weight: 700;
    font-size: .84rem;
    padding: .3rem .7rem;
    box-shadow: 2px 2px 0 var(--kk-ink);
}

/* wizard: Back/Next always in reach on phones. Fixed, not sticky — the pill is the
   LAST element of the page, so sticky had no room to move and quietly sat below the fold. */
.kk-app-shell .kk-wizard-nav {
    /* left+right 0 with auto margins, NOT left:50%+translate: a fixed element's
       fit-content resolves against the space from `left` to the edge, so 50% gave the
       pill only HALF the screen -> buttons wrapped into a blob covering the content. */
    position: fixed;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 999px;
    box-shadow: var(--kk-shadow-sm);
    padding: .5rem .7rem;
    width: fit-content;
    max-width: calc(100% - 16px);
    flex-wrap: nowrap;
}
.kk-app-shell .kk-wizard-nav .btn { white-space: nowrap; }

/* ═══════ Wizzy the wizard: bottom-right, always on call ═══════ */
.kk-wiz {
    position: fixed;
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 55;
    width: 82px;
    height: 98px;
    padding: 2px;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 24px;
    box-shadow: var(--kk-shadow-sm);
    animation: kk-wiz-bob 3.2s ease-in-out infinite;
}
.kk-wiz-open { animation: none; background: var(--kk-sunny); }
@keyframes kk-wiz-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(-3deg); }
}
.kk-wiz-menu {
    position: fixed;
    right: 12px;
    bottom: calc(192px + env(safe-area-inset-bottom));
    z-index: 55;
    min-width: 230px;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 16px;
    box-shadow: var(--kk-shadow-sm);
    overflow: hidden;
}
.kk-wiz-menu-head {
    background: #b088f9;
    color: #fff;
    font-family: var(--kk-font-display);
    font-weight: 700;
    padding: .5rem .9rem;
    border-bottom: 3px solid var(--kk-ink);
}
.kk-wiz-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .65rem .9rem;
    background: none;
    border: 0;
    border-bottom: 2px dashed #f0e9dc;
    font-family: var(--kk-font-body);
    font-weight: 700;
    font-size: .92rem;
    color: var(--kk-ink);
}
.kk-wiz-menu button:last-child { border-bottom: 0; }

/* wizard crew rows (quick-add kids) */
.kk-crew-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: .55rem; }
.kk-crew-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: var(--kk-shadow-sm);
    padding: .5rem .6rem;
}
.kk-crew-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--kid, #4d96ff); border: 2px solid var(--kk-ink); flex: none; }
.kk-crew-name { flex: 2; min-width: 90px; }
.kk-crew-sel { flex: 1; min-width: 74px; }
.kk-crew-toggle { cursor: pointer; margin: 0; }
.kk-crew-toggle-text { font-size: .95rem; }

/* cockpit v2: collapsed kid rows, explicit Done buttons, no ambiguous chips */
.kk-cockpit-tap { cursor: pointer; }
.kk-cockpit-chev { font-size: 1rem; color: #6b7490; margin-left: .2rem; }
.kk-cockpit-head .kk-home-today-bar { flex: 1; }
.kk-cockpit-jobs { padding: .3rem 0 .2rem 6px; }
.kk-cockpit-job {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem 0;
    border-bottom: 2px dashed #f5efe2;
    font-weight: 700;
    font-size: .92rem;
}
.kk-cockpit-job:last-of-type { border-bottom: 0; }
.kk-cockpit-late { color: #7c1d12; }
.kk-cockpit-job-state { min-width: 24px; font-size: 1rem; }
.kk-cockpit-job-name { flex: 1; }
.kk-cockpit-donebtn { padding: .15rem .6rem; font-size: .8rem; white-space: nowrap; }
.kk-cockpit-manage {
    margin-top: .45rem;
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--kk-ink);
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: .85rem;
    padding: .25rem .75rem;
    color: var(--kk-ink);
}

/* wizard routines expander */
.kk-crew-exp { display: flex; flex-direction: column; }
.kk-crew-exp-head { cursor: pointer; }
.kk-crew-exp-count { margin-left: auto; font-weight: 700; color: #6b7490; font-size: .88rem; }
.kk-crew-exp-list { margin: .3rem 0 .2rem 12px; }

/* shared-device rapid swap strip in the top bar */
.kk-app-swap { display: flex; gap: .3rem; align-items: center; margin-right: .35rem; }
.kk-app-swap-kid {
    width: 44px;
    padding: 2px 2px 1px;
    background: var(--kk-white);
    border: 2px solid var(--kk-ink);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1.5px 1.5px 0 var(--kk-ink);
}
.kk-app-swap-kid svg { height: 26px; }
.kk-app-swap-name {
    font-size: .52rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kk-ink);
    max-width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* kid-join code entry */
.kk-kidjoin-code {
    max-width: 220px;
    letter-spacing: .35em;
    font-family: var(--kk-font-display);
    font-weight: 700;
    border: 3px solid var(--kk-ink) !important;
    border-radius: 14px;
}

/* ======= pattern lock + top-bar swap security ======= */
.kk-pattern { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; }
.kk-pattern svg { touch-action: manipulation; user-select: none; }
.kk-pattern-actions { display: flex; gap: 1.2rem; }

/* the parked parent chip at the end of the swap strip gets a sunny ring so it reads as "the exit" */
.kk-app-swap-parent { border-width: 3px; border-color: #fff; box-shadow: 0 0 0 2px var(--kk-ink); }

/* ======= sticker-styled selects, everywhere (no naked native controls) ======= */
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    background-color: var(--kk-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%231f2a44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 13px 9px;
    font-weight: 700;
    color: var(--kk-ink);
    padding: .45rem 1.9rem .45rem .7rem;
    text-overflow: ellipsis;
}
select.form-select:focus {
    border-color: var(--kk-ink);
    box-shadow: 3px 3px 0 rgba(31, 42, 68, .22);
    outline: none;
}

/* ======= wizard crew rows: wrap instead of chop on phones ======= */
@media (max-width: 640px) {
    .kk-crew-row { flex-wrap: wrap; }
    .kk-crew-row .kk-crew-dot { order: 0; }
    .kk-crew-row .kk-crew-name { order: 1; flex: 1 1 55%; }
    .kk-crew-row .kk-kpi-person-x { order: 2; }
    .kk-crew-row .kk-crew-sel { order: 3; flex: 1 1 40%; min-width: 0; }
    /* the device choice has the longest words - give it its own line */
    .kk-crew-row select.kk-crew-sel:last-of-type { flex: 1 1 100%; }
}

/* ======= penalties: points can go DOWN too ======= */
.kk-penalty-pts { color: #d64541; font-weight: 800; }
.kk-kpi-pts-penalty { background: #ff6b6b; color: #fff; }
.kk-cockpit-penalties {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .55rem;
    margin-top: .35rem;
    border-top: 2px dashed #f0d9d6;
}
.kk-penalty-chip {
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    background: #ffe9e7;
    padding: .25rem .7rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--kk-ink);
}
.kk-penalty-chip strong { color: #d64541; }
.kk-penalty-chip:disabled { opacity: .55; }

/* wizard rewards step list */
.kk-wizard-rewards { max-width: 480px; margin: 0 auto; }

/* ======= KkSelect: our dropdown, popup and all ======= */
.kk-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    width: 100%;
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    background-color: var(--kk-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%231f2a44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 13px 9px;
    font-weight: 700;
    color: var(--kk-ink);
    padding: .45rem 1.9rem .45rem .7rem;
    text-align: left;
}
.kk-select:disabled { opacity: .55; }
.kk-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kk-select-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 42, 68, .45);
    z-index: 3000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media (min-width: 640px) {
    .kk-select-backdrop { align-items: center; }
}
.kk-select-sheet {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -4px 0 rgba(31, 42, 68, .25);
    width: 100%;
    max-width: 420px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    padding: .8rem .8rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    animation: kk-sheet-up .18s ease-out;
}
@media (min-width: 640px) {
    .kk-select-sheet { border-radius: 22px; box-shadow: 6px 6px 0 rgba(31, 42, 68, .25); }
}
@keyframes kk-sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.kk-select-title {
    font-family: Fredoka, "Nunito", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    padding-bottom: .5rem;
}
.kk-select-opts { overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; }
.kk-select-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    background: var(--kk-white);
    font-weight: 700;
    color: var(--kk-ink);
    padding: .65rem .8rem;
    text-align: left;
}
.kk-select-opt.selected { background: var(--kk-sunny); box-shadow: 3px 3px 0 rgba(31, 42, 68, .25); }
.kk-select-tick { font-weight: 800; }

/* room for the fixed wizard nav pill so the last content can scroll clear of it */
.kk-app-main:has(.kk-wizard-nav) { padding-bottom: 150px; }

/* ======= anchor jumps must clear the sticky header ======= */
/* .kk-header is position:sticky and its nav WRAPS at content-dependent widths
   (measured 70px one row -> 116px two -> 153px three), so a hard-coded breakpoint
   silently breaks whenever the nav text changes. kkSyncHeaderOffset() in index.html
   measures the real header and sets scroll-padding-top; this is just the fallback. */
html { scroll-padding-top: 120px; }

/* kid-join: waiting for a grown-up to set the PIN */
.kk-wait-note {
    display: inline-block;
    background: var(--kk-sunny);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(31, 42, 68, .25);
    padding: .6rem 1rem;
    font-weight: 700;
    margin-top: .4rem;
}

/* ======= the sticker builder: avatar pinned LEFT, options scroll RIGHT ======= */
.kk-builder {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    max-width: 980px;
    margin: 0 auto;
}
.kk-builder-preview {
    /* stays put while the options scroll — you never lose sight of the sticker */
    position: sticky;
    top: 100px;
    flex: 0 0 240px;
    text-align: center;
}
.kk-builder-preview .kk-profile-preview {
    padding: 1rem 1.25rem;
    width: 100%;
}
.kk-builder-preview .kk-profile-preview svg { max-width: 100%; height: auto; }
.kk-builder-options { flex: 1; min-width: 0; }

@media (max-width: 640px) {
    .kk-builder { gap: .7rem; }
    .kk-builder-preview { flex: 0 0 38%; top: 90px; }
    .kk-builder-preview .kk-profile-preview { padding: .5rem .5rem; }
    .kk-builder-preview .btn { font-size: .8rem; padding: .35rem .3rem; }
    .kk-builder-preview .form-control { font-size: .85rem; padding: .3rem; }
}

/* compact swatch grid for the add-member modal */
.kk-swatches-sm .kk-swatch { width: 28px; height: 28px; border-width: 2px; }

/* ======= Sub-tabs: a lighter pill row for splitting a long section ======= */
.kk-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 2px dashed rgba(31,42,68,.18);
}
.kk-subtab {
    background: var(--kk-paper, #fff9f0);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: var(--kk-ink);
    padding: .34rem .82rem;
    box-shadow: 2px 2px 0 rgba(31,42,68,.12);
    transition: transform .08s ease;
}
.kk-subtab:hover { transform: translateY(-1px); }
.kk-subtab.on {
    background: var(--kk-sunny);
    box-shadow: 2px 2px 0 rgba(31,42,68,.22);
}

/* ======= Member Overview tab ======= */
.kk-ovw {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.kk-ovw-portrait {
    flex: 0 0 auto;
    text-align: center;
    width: 220px;
    max-width: 100%;
    margin: 0 auto;
}
.kk-ovw-portrait .kk-profile-preview { padding: 1rem 1.4rem; }
.kk-ovw-name {
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--kk-ink);
    margin-top: .6rem;
}
.kk-ovw-role {
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    display: inline-block;
    background: var(--kk-paper, #fff9f0);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    padding: .18rem .7rem;
    font-size: .85rem;
    font-weight: 700;
    margin-top: .3rem;
}
.kk-ovw-body { flex: 1 1 340px; min-width: 0; }

.kk-ovw-status {
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    padding: .7rem .95rem;
    margin-bottom: 1rem;
    box-shadow: 3px 3px 0 rgba(31,42,68,.14);
}
.kk-ovw-status.great { background: #d8f5df; }
.kk-ovw-status.good  { background: #e6f6d9; }
.kk-ovw-status.ok    { background: #fff3cf; }
.kk-ovw-status.warn  { background: #ffe6cc; }
.kk-ovw-status.bad   { background: #ffd9d9; }
.kk-ovw-status.neutral { background: var(--kk-paper, #fff9f0); }

.kk-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.kk-statgrid .kk-stat { padding: .7rem .5rem; }
.kk-statgrid .kk-stat-num { font-size: 1.9rem; }

.kk-ovw-behind {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
}
.kk-ovw-behind-lbl { font-weight: 700; color: rgba(31,42,68,.7); font-size: .9rem; }

.kk-jobchip.behind { cursor: pointer; }

/* Overview summary panels — a real digest of each area, not links to it */
.kk-ovw-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .8rem;
    align-items: start;
}
.kk-ovw-panel {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 16px;
    box-shadow: 3px 3px 0 rgba(31,42,68,.14);
    padding: .75rem .9rem .85rem;
}
.kk-ovw-panel-alert { background: #fff4f4; }
.kk-ovw-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700; font-size: 1.02rem; color: var(--kk-ink);
    margin-bottom: .55rem;
}
.kk-ovw-panel-tag {
    background: var(--kk-sunny);
    border: 2px solid var(--kk-ink);
    border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    padding: .05rem .5rem;
}
.kk-ovw-panel-alert .kk-ovw-panel-tag { background: var(--kk-coral, #ff6b6b); color: #fff; }
.kk-ovw-sub { font-size: .82rem; font-weight: 700; color: rgba(31,42,68,.6); margin: 0 0 .35rem; }
.kk-ovw-empty { font-size: .9rem; color: rgba(31,42,68,.6); margin: .2rem 0; }

.kk-ovw-list { list-style: none; margin: 0; padding: 0; }
.kk-ovw-litem {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed rgba(31,42,68,.12);
    font-size: .92rem;
}
.kk-ovw-list li:last-child { border-bottom: none; }
.kk-ovw-li-mark { flex: 0 0 auto; font-size: .95rem; }
.kk-ovw-li-ico { flex: 0 0 auto; }
.kk-ovw-li-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ovw-litem.done .kk-ovw-li-txt { color: rgba(31,42,68,.5); text-decoration: line-through; }
.kk-ovw-li-time {
    flex: 0 0 auto; font-weight: 700; font-size: .78rem;
    background: var(--kk-paper, #fff9f0); border: 2px solid var(--kk-ink);
    border-radius: 7px; padding: 0 .35rem;
}
.kk-ovw-litem.todo .kk-ovw-li-time { background: #ffe6cc; }
.kk-ovw-li-pts {
    flex: 0 0 auto; font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700; font-size: .82rem; color: var(--kk-ink);
}
.kk-ovw-li-pts::after { content: " pts"; font-weight: 500; font-size: .72rem; color: rgba(31,42,68,.5); }

.kk-ovw-goal { margin-top: .6rem; }
.kk-ovw-goal-lbl { font-size: .84rem; margin-bottom: .3rem; }
.kk-ovw-goal-bar {
    height: 12px; background: #f0ece2;
    border: 2px solid var(--kk-ink); border-radius: 999px; overflow: hidden;
}
.kk-ovw-goal-bar span { display: block; height: 100%; background: var(--kk-mint, #6bcb77); }

/* ======= Progress tab: one card per kid ======= */
.kk-kidcard {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;
    border-left: 10px solid var(--kid, var(--kk-sky));
    box-shadow: var(--kk-shadow-sm);
    padding: .8rem 1rem;
}
.kk-kidcard-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.kk-kidcard-name { font-family: Fredoka, "Nunito", sans-serif; font-weight: 600; font-size: 1.15rem; }
.kk-kidcard-pts { margin-left: auto; font-weight: 700; }
.kk-kidcard-pts small { margin-left: .25rem; }
.kk-kidcard-trend { width: 100%; max-height: 120px; margin-top: .3rem; }
.kk-kidcard-week { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; }
.kk-dayblob {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--kk-ink);
    border-radius: 8px;
    font-size: .7rem; font-weight: 800;
}
.kk-dayblob.off  { border-style: dashed; opacity: .35; }
.kk-dayblob.none { background: #fff; }
.kk-dayblob.part { background: #ffe9a8; }
.kk-dayblob.full { background: #8ee09b; }
.kk-kidcard-weeklabel { margin-left: auto; font-size: .72rem; color: #6b7490; font-weight: 700; }

/* ======= planner: day-at-a-time ======= */
.kk-daystrip { display: flex; gap: .35rem; margin-bottom: .9rem; }
.kk-daystrip-chip {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: .3rem 0 .35rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 12px;
    opacity: .7;
}
.kk-daystrip-chip.on { background: var(--kk-sunny); opacity: 1; box-shadow: 2px 2px 0 var(--kk-ink); }
.kk-daystrip-chip.today { border-color: var(--kk-coral); border-width: 3px; }
.kk-daystrip-dow { font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.kk-daystrip-num { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1; }

.kk-dayrow {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem 0;
    border-bottom: 2px dashed #f0e9dc;
    cursor: default;
}
.kk-dayrow:last-child { border-bottom: 0; }

/* week grid: an empty box you may tap to log */
.kk-tapcell { cursor: pointer; }
.kk-tapcell:hover { background: #fff3c4; }

/* an event row you may tap to edit */
.kk-eventrow { cursor: pointer; }
.kk-eventrow:hover { background: #fff8e6; }

/* ======= sticker calendar + clock (replace native date/time pickers) ======= */
.kk-cal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .4rem; }
.kk-cal-nav {
    width: 42px; height: 42px;
    border: 3px solid var(--kk-ink); border-radius: 12px;
    background: var(--kk-white); color: var(--kk-ink);
    font-size: 1.3rem; font-weight: 800; line-height: 1;
}
.kk-cal-title { font-family: Fredoka, "Nunito", sans-serif; font-weight: 600; font-size: 1.1rem; }
.kk-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem;
    padding: .2rem 0 .5rem;
}
.kk-cal-dow { text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; opacity: .55; }
.kk-cal-day {
    aspect-ratio: 1; min-width: 0;
    border: 2.5px solid var(--kk-ink); border-radius: 12px;
    background: var(--kk-white); color: var(--kk-ink);
    font-weight: 700; font-size: .95rem; padding: 0;
}
.kk-cal-day.today { border-color: var(--kk-coral); border-width: 3px; }
.kk-cal-day.on { background: var(--kk-sunny); box-shadow: 2px 2px 0 var(--kk-ink); }
.kk-cal-jump {
    border: 3px dashed var(--kk-ink); border-radius: 12px;
    background: var(--kk-white); color: var(--kk-ink);
    font-weight: 800; padding: .45rem;
}

.kk-clock-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; opacity: .55; padding: .3rem 0 .25rem; }
.kk-clock-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.kk-clock-chip {
    border: 2.5px solid var(--kk-ink); border-radius: 12px;
    background: var(--kk-white); color: var(--kk-ink);
    font-weight: 700; padding: .4rem 0; min-width: 0;
}
.kk-clock-chip.on { background: var(--kk-sunny); box-shadow: 2px 2px 0 var(--kk-ink); }

/* a kk-select/picker that sits inline instead of filling the row */
.kk-select-fit { width: auto; min-width: 150px; }

/* ======= dashboard mission control: one home everywhere, two columns on web ======= */
.kk-dash { display: grid; }
.kk-dash-main, .kk-dash-rail { min-width: 0; }
@media (min-width: 980px) {
    .kk-dash { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
}
.kk-dash-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.kk-dash-links { display: flex; flex-direction: column; gap: .5rem; }
.kk-dash-links .btn { text-align: left; }

/* ======= perfect-day party ======= */
.kk-party { text-align: center; }
.kk-party-burst { font-size: 2.6rem; animation: kk-party-pop .5s ease-out; }
@keyframes kk-party-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } to { transform: none; opacity: 1; } }
.kk-party-line { font-size: 1.15rem; margin: .3rem 0 .4rem; }
.kk-party-pts {
    display: inline-block;
    background: var(--kk-sunny);
    border: 3px solid var(--kk-ink);
    border-radius: 14px;
    font-weight: 800;
    padding: .35rem .9rem;
    margin-bottom: .8rem;
}

/* ======= web workspace: crew | page | pulse — three panes, each scrolls itself ======= */
.kk-shell:has(.kk-work) { height: 100dvh; overflow: hidden; }
.kk-work {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-areas: "main right";
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.25rem;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 1.1rem 1.25rem 0;
}
.kk-work-left  { grid-area: left; }
.kk-work-main  { grid-area: main; }
.kk-work-right { grid-area: right; }
.kk-work-left, .kk-work-right, .kk-work-main {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* breathing room INSIDE the scroll area — the sticker borders + offset shadows
       otherwise get clipped at the pane edges */
    padding: 4px 10px 1rem;
}
.kk-work-left .kk-home-card, .kk-work-right .kk-home-card { margin-bottom: 1rem; }

/* the middle pane owns the page — trim the big hero so real content is above the fold */
.kk-work .kk-hero { padding: .2rem 0 .4rem; }
.kk-work .kk-hero h1 { font-size: 1.9rem; }
.kk-work .kk-footer { padding: .8rem 0 .2rem; background: none; border: none; }

/* long lists live INSIDE their card, the card stays put — inner padding so
   row borders/shadows never get shaved off by the scroll clip */
.kk-card-scroll { max-height: 44vh; overflow-y: auto; padding: 3px 8px 8px 3px; }
.kk-quick-list { padding: .45rem .7rem; }

/* the crew, one sticker per row */
.kk-panelcrew { display: flex; flex-direction: column; gap: .3rem; }
.kk-panelcrew-row {
    display: flex; align-items: center; gap: .6rem;
    border: 0; background: none; text-align: left;
    padding: .25rem .3rem; border-radius: 12px;
    font-weight: 800;
    box-shadow: none;
}
.kk-panelcrew-row:hover { background: #fff3c4; }
.kk-panelcrew-name { flex: 1; }

/* squeeze gracefully, then stack: page first, pulse below */
@media (max-width: 1500px) { .kk-work { grid-template-columns: minmax(0, 1fr) 350px; } }
@media (max-width: 1150px) {
    .kk-shell:has(.kk-work) { height: auto; overflow: visible; }
    .kk-work { display: block; }
    .kk-work-left, .kk-work-right, .kk-work-main { overflow: visible; }
}

/* ======= scoreboard blocks: table left, podium + actions right, wide cards below ======= */
.kk-score-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.kk-score-grid > .card { margin-bottom: 0; }
@media (min-width: 1150px) {
    .kk-score-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: start;
    }
    .kk-sb-table  { grid-column: 1; grid-row: 1 / span 3; }
    .kk-sb-podium { grid-column: 2; grid-row: 1; margin: 0; }
    .kk-sb-log    { grid-column: 2; grid-row: 2; }
    .kk-sb-ticks  { grid-column: 2; grid-row: 3; }
    .kk-sb-wide   { grid-column: 1 / -1; }
}

/* ======= section tabs: a REAL tabbed page — tabs joined to the panel below ======= */
/* Folder tabs — the LOCALLY-RENDERED, pixel-verified design (scratchpad/tabs/mock4):
   each tab is its own rounded-top folder tab with a real GAP to its neighbour (a gap can't
   produce corner-collision notches); rows stack with the lower row in front; the active tab
   melts into the sunny band by dropping its bottom border; the panel is wider than the strip
   and its rounded corners curve up into it via a small clean shelf. */
.kk-tabs {
    display: flex;
    flex-direction: column;
    padding: 0 28px;        /* inset > panel radius → the shelf where the panel curves up */
    margin-bottom: -3px;    /* the strip sits ON the panel's top border */
    position: relative;
    z-index: 2;
}
.kk-tabrow {
    display: flex;
    align-items: stretch;   /* every tab in a row is the same height */
    position: relative;
}
.kk-tabrow + .kk-tabrow { margin-top: -3px; }
/* lower rows render IN FRONT so the row above tucks cleanly behind their tab tops */
.kk-tabrow:nth-child(1) { z-index: 1; }
.kk-tabrow:nth-child(2) { z-index: 2; }
.kk-tabrow:nth-child(3) { z-index: 3; }
.kk-tab {
    flex: 1 1 0;            /* rows always fill the full folder width */
    min-width: 0;
    text-align: center;
    background: #efe7d8;
    border: 3px solid var(--kk-ink);
    border-radius: 12px 12px 0 0;   /* every tab is its own rounded folder tab */
    font-family: var(--kk-font-display, Fredoka), Fredoka, sans-serif;
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.12;
    color: var(--kk-ink);
    padding: .5rem .45rem;
    cursor: pointer;
    position: relative;
    white-space: normal;    /* long labels wrap rather than overflow or clip */
}
.kk-tab + .kk-tab { margin-left: -3px; }   /* no gap — neighbours share one ink line */
/* junction filler: every row that SITS ON another row gets a thin ink strip along its top edge
   BEHIND its tabs — each V between rounded corners reveals solid ink, never the row above
   peeking through as a white spot. Inset past the outer corners so the silhouette stays clean.
   The FIRST row keeps open valleys against the page (natural folder look). Verified in
   scratchpad/tabs/mock7 at 4x on all junction types before shipping. */
.kk-tabrow:not(:first-child)::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 12px;
    background: #efe7d8; z-index: -1;   /* TAB colour — the junction wedge reads as tab surface,
                                           never the page background (white spot) or ink (black) */
}
/* upper rows have no bottom edge: their bodies run flush into the row below (the extra
   padding keeps every row the same height) */
.kk-tabrow:not(.kk-tabrow-bottom) .kk-tab { border-bottom: none; padding-bottom: calc(.5rem + 3px); }
/* brick-lay: upper rows lean alternately so their gaps never line up row-to-row */
.kk-tabrow-brick-a .kk-tab:first-child { flex-grow: 1.3; }
.kk-tabrow-brick-a .kk-tab:last-child  { flex-grow: 0.78; }
.kk-tabrow-brick-b .kk-tab:first-child { flex-grow: 0.78; }
.kk-tabrow-brick-b .kk-tab:last-child  { flex-grow: 1.3; }
.kk-tab.on {
    background: var(--kk-sunny);
    border-bottom: none;                     /* melts into the sunny band — ink-clean junctions */
    padding-bottom: calc(.5rem + 3px);
    z-index: 3;
}
.kk-tabpanel {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;   /* fully rounded by default — a plain card when there are no tabs */
    box-shadow: var(--kk-shadow, 5px 5px 0 rgba(31, 42, 68, .25));
    padding: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* the BODY scrolls; the band and panel stay put */
}
/* the active tab's yellow flows down into this band — actions live here */
.kk-tabpanel-band {
    flex: none;
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
    padding: .55rem 1.35rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 54px;
    font-weight: 700;
}
.kk-tabpanel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.2rem 1.35rem;
}
.kk-tab.on { position: relative; z-index: 3; }
/* in the workspace the panel fills the pane, so every tab is the SAME page size —
   long content scrolls inside the panel, never the page. ONLY on tabbed pages:
   a blanket flex column crushed the dashboard's family portrait. */
.kk-work-main:has(> .kk-tabpanel) { display: flex; flex-direction: column; }
.kk-work-main:has(> .kk-tabpanel) > * { flex: none; }
.kk-work-main > .kk-tabpanel { flex: 1 1 auto; min-height: 240px; }
/* the admin promo panel is a collapsible strip, not a fill-the-pane content panel — it must
   hug its content (just the band when collapsed) instead of stretching into a big empty box */
.kk-work-main > .kk-tabpanel.kk-admin-codes { flex: none; min-height: 0; }

/* compact pack cards: the whole card IS the button; lit = in use */
.kk-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: .6rem;
}
.kk-pack-mini {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    color: var(--kk-ink);
    padding: .65rem .4rem .55rem;
    text-align: center;
    font-size: .88rem;
    line-height: 1.25;
}
.kk-pack-mini:hover { background: #fff8e0; }
.kk-pack-mini.on { background: var(--kk-sunny); box-shadow: 3px 3px 0 rgba(31, 42, 68, .25); }
.kk-pack-mini-emoji { font-size: 1.7rem; line-height: 1.2; }
.kk-pack-mini small { opacity: .7; font-weight: 600; }

/* ======= coloured card titles everywhere — sunny is home base, accents vary ======= */
.kk-head-sky,   .card > .kk-head-sky   { background: var(--kk-sky) !important;   color: #fff; }
.kk-head-mint,  .card > .kk-head-mint  { background: var(--kk-mint) !important;  color: var(--kk-ink); }
.kk-head-grape, .card > .kk-head-grape { background: var(--kk-grape) !important; color: var(--kk-ink); }
.kk-head-peach, .card > .kk-head-peach { background: var(--kk-peach) !important; color: var(--kk-ink); }
.kk-head-coral, .card > .kk-head-coral { background: var(--kk-coral) !important; color: #fff; }

/* progress kid cards: the banner IS the kid's colour */
.kk-kidcard { padding: 0; overflow: hidden; }
.kk-kidcard-head {
    background: color-mix(in srgb, var(--kid, var(--kk-sky)) 38%, #ffffff);
    border-bottom: 3px solid var(--kk-ink);
    padding: .55rem .9rem;
}
.kk-kidcard-trend, .kk-kidcard-week { margin-left: .9rem; margin-right: .9rem; }
.kk-kidcard-week { padding-bottom: .7rem; }
.kk-kidcard-trend { width: calc(100% - 1.8rem); }

/* kid page: the goal card wears grape */
.kk-goal-card > .kk-goal-head {
    background: var(--kk-grape);
    margin: -.8rem -.9rem .6rem;
    padding: .5rem .9rem;
    border-bottom: 3px solid var(--kk-ink);
    border-radius: 15px 15px 0 0;
}

/* ======= terms & conditions: a readable legal page, still on-brand ======= */
.kk-terms { max-width: 780px; margin: 0 auto; padding-bottom: 2rem; }
.kk-terms h3 { font-family: var(--kk-font-display); font-weight: 600; margin-top: 1.6rem; }
.kk-terms ul { padding-left: 1.2rem; }
.kk-terms li { margin-bottom: .35rem; }

/* workspace page titles: compact, flush with the rail tops — not sunk below them */
.kk-work-main > h1 { font-size: 1.55rem; margin: .1rem 0 0; line-height: 1.25; }
.kk-work-main > h1 + p { margin: 0 0 .75rem; font-size: .88rem; }

/* ======= workspace alignment: everything left-aligned, filling the main column ======= */
.kk-work-main > h1, .kk-work-main > h1 + p { text-align: left !important; }
.kk-work .kk-hero { text-align: left; padding-left: 0; }
.kk-work .kk-hero p { margin-left: 0; }
.kk-work-main .kk-portrait { max-width: none; margin: .35rem 0 1rem; }
.kk-work .kk-podium { justify-content: flex-start; }
.kk-work-main .kk-inbox-clear { display: block; text-align: left; }

/* the rail's first card starts level with the page body's first card (title cleared) */
.kk-work-right { padding-top: 64px; }
/* on tabbed pages that first card is the PANEL — clear the tab strip as well, so the
   top rail card lines up with the panel's top edge, never with the tabs above it */
.kk-work:has(.kk-tabpanel) .kk-work-right { padding-top: 111px; }

/* Wizzy docked at the foot of the right rail — sticks to the bottom of the pane and
   floats over the cards when the rail runs out of room */
.kk-wiz-dockwrap {
    position: sticky;
    bottom: 2px;
    display: flex;
    justify-content: flex-end;
    margin-top: .25rem;
    pointer-events: none;   /* only Wizzy himself is clickable, not the empty strip */
    z-index: 40;
}
/* pointer-events:none on the wrapper is inherited — BOTH the button and the menu must
   opt back in, or the open menu is unhoverable and clicks fall through to the cards behind */
.kk-wiz-dockwrap .kk-wiz { position: static; pointer-events: auto; }
.kk-wiz-dockwrap .kk-wiz-menu {
    position: absolute;
    right: 0;
    bottom: 104px;
    z-index: 60;
    pointer-events: auto;
}

/* ======= badge gallery: tap a badge to award it; lit = someone has it ======= */
.kk-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: .6rem;
}
.kk-badge-card {
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 14px;
    color: var(--kk-ink);
    padding: .7rem .45rem .55rem;
    text-align: center;
    font-size: .88rem;
    line-height: 1.25;
}
.kk-badge-card:hover { background: #fff8e0; }
.kk-badge-card.on { background: var(--kk-sunny); box-shadow: 3px 3px 0 rgba(31, 42, 68, .25); }
.kk-badge-icon { font-size: 1.8rem; line-height: 1.15; }
.kk-badge-pts { font-weight: 800; font-size: .8rem; color: #2e7d32; }
.kk-badge-holders { font-size: .74rem; font-weight: 700; opacity: .72; }

/* ======= the podium STAGE: a celebration scene, not a lonely bar chart ======= */
.kk-podium-stage {
    position: relative;
    background: linear-gradient(180deg, #fff3bf 0%, #fffdf6 65%, #ffffff 100%);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;
    box-shadow: var(--kk-shadow-sm);
    padding: 2.2rem 1rem 1.4rem;
    text-align: center;
    overflow: hidden;
}
.kk-confetti { position: absolute; font-size: 1.5rem; opacity: .9; pointer-events: none; }
.kk-c1 { top: 7%;  left: 5%;  transform: rotate(-18deg); }
.kk-c2 { top: 16%; left: 22%; transform: rotate(12deg); font-size: 1.1rem; }
.kk-c3 { top: 6%;  right: 6%; transform: rotate(20deg); }
.kk-c4 { top: 22%; right: 20%; transform: rotate(-10deg); font-size: 1.2rem; }
.kk-c5 { bottom: 18%; left: 9%;  transform: rotate(8deg); font-size: 1.1rem; }
.kk-c6 { bottom: 12%; right: 8%; transform: rotate(-14deg); }
.kk-podium-big { justify-content: center; gap: 1.4rem; margin: .4rem 0 1rem; }
.kk-podium-big .kk-podium-spot { width: 180px; }
.kk-podium-big .kk-podium-1 .kk-podium-block { height: 150px; }
.kk-podium-big .kk-podium-2 .kk-podium-block { height: 105px; }
.kk-podium-big .kk-podium-3 .kk-podium-block { height: 78px; }
.kk-podium-big .kk-podium-block { font-size: 2.1rem; }
.kk-podium-big .kk-podium-name { font-size: 1.25rem; }
.kk-podium-big .kk-podium-points {
    display: inline-block;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    color: var(--kk-ink);
    font-weight: 800;
    font-size: .92rem;
    padding: .15rem .7rem;
    margin-top: .3rem;
}
.kk-podium-big .kk-crown { font-size: 2.2rem; animation: kk-wiz-bob 3.2s ease-in-out infinite; }
.kk-podium-caption {
    font-family: var(--kk-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: .3rem;
}
.kk-podium-chase {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    margin-top: .9rem;
}
.kk-chase-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--kk-white);
    border: 2.5px solid var(--kk-ink);
    border-radius: 999px;
    font-weight: 700;
    font-size: .88rem;
    padding: .3rem .8rem;
}
.kk-chase-fire { background: #fff3c4; }
@media (max-width: 640px) {
    .kk-podium-big { gap: .5rem; }
    .kk-podium-big .kk-podium-spot { width: 110px; }
}

/* the choice card: the two-choice line a parent sends, shown as a speech chip */
.kk-choiceline {
    background: #fff7dc;
    border: 2.5px dashed var(--kk-ink);
    border-radius: 14px;
    padding: .6rem .8rem;
    font-weight: 600;
    font-style: italic;
    margin-top: .6rem;
}

/* prize shop: say who can afford it BEFORE the tap — encouraging, never a failure */
.kk-reward-afford {
    font-size: .78rem;
    font-weight: 700;
    color: #6b7490;
    margin-top: .4rem;
}
.kk-reward-afford.can { color: #2e7d32; }

/* ======= Why KidKPI works ======= */
.kk-why { max-width: 1000px; margin: 0 auto; padding-bottom: 2rem; }
.kk-why-hero { text-align: center; padding: 1rem 0 1.6rem; }
.kk-why-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
.kk-why-lead { font-size: 1.15rem; max-width: 720px; margin: .6rem auto 0; color: var(--kk-ink); }
.kk-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.kk-why-card {
    background: var(--kk-white);
    border: 3px solid var(--kk-ink);
    border-radius: 18px;
    box-shadow: var(--kk-shadow-sm);
    padding: 1.1rem 1.2rem 1.2rem;
    position: relative;
    padding-top: 2.6rem;
}
/* the coloured band across the top mirrors our card-title style */
.kk-why-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 12px;
    background: var(--kk-sunny);
    border-bottom: 3px solid var(--kk-ink);
    border-radius: 15px 15px 0 0;
}
.kk-why-card.kk-head-sky::before { background: var(--kk-sky); }
.kk-why-card.kk-head-mint::before { background: var(--kk-mint); }
.kk-why-card.kk-head-grape::before { background: var(--kk-grape); }
.kk-why-card.kk-head-peach::before { background: var(--kk-peach); }
.kk-why-emoji { font-size: 2rem; line-height: 1; }
.kk-why-card h3 { font-family: var(--kk-font-display); font-weight: 600; font-size: 1.2rem; margin: .35rem 0 .4rem; }
.kk-why-card p { margin: 0; color: var(--kk-ink); font-size: .97rem; line-height: 1.5; }
.kk-why-cta { text-align: center; margin-top: 2.2rem; padding: 1.6rem; background: #fff7dc; border: 3px solid var(--kk-ink); border-radius: 20px; }
.kk-why-cta h2 { font-family: var(--kk-font-display); font-weight: 600; }
.kk-why-cta p { max-width: 620px; margin: .5rem auto 1rem; }
.kk-why-cta .btn { margin: .25rem; }