/*
   KinderNest.kids watercolor UI theme
   Source inspiration: uploaded watercolor cards, ink frames, and KinderNest.kids banner.
   Intent: warm, hand-made, trustworthy, child-centered, and beta-safe.
 */

:root {
    --kn-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --kn-ink: #111111;
    --kn-ink-soft: #2f2f2f;
    --kn-paper: #fffdfa;
    --kn-paper-warm: #fff7f2;
    --kn-paper-cool: #f7fbff;

    --kn-red: #fc6573;
    --kn-red-soft: #ffd8dc;
    --kn-red-deep: #b32b26;
    --kn-blue: #719fe6;
    --kn-blue-soft: #d5e3f9;
    --kn-blue-deep: #43546b;
    --kn-green: #b2d28a;
    --kn-green-soft: #e6f2d3;
    --kn-green-deep: #5f7d42;
    --kn-yellow: #fce658;
    --kn-yellow-soft: #fff6bd;
    --kn-orange: #fba13d;
    --kn-orange-soft: #ffe0b2;
    --kn-purple: #aa7dce;
    --kn-purple-soft: #ead9f4;
    --kn-purple-deep: #563f69;

    --kn-bg: #fff8f7;
    --kn-surface: rgba(255, 253, 250, 0.96);
    --kn-surface-strong: #ffffff;
    --kn-text: #111111;
    --kn-text-muted: #46505f;
    --kn-text-subtle: #667085;
    --kn-border: rgba(17, 17, 17, 0.58);
    --kn-border-soft: rgba(17, 17, 17, 0.18);

    --kn-accent: var(--kn-red);
    --kn-accent-soft: var(--kn-red-soft);
    --kn-accent-deep: var(--kn-red-deep);

    --kn-radius-sm: 0.75rem;
    --kn-radius-md: 1rem;
    --kn-radius-lg: 1.35rem;
    --kn-radius-xl: 1.8rem;

    --kn-shadow-sketch: 5px 5px 0 rgba(17, 17, 17, 0.10);
    --kn-shadow-soft: 0 16px 36px rgba(17, 17, 17, 0.08);
    --kn-ring: 0 0 0 4px color-mix(in srgb, var(--portal-accent, var(--kn-accent)) 24%, transparent);

    --kn-watercolor-red: radial-gradient(circle at 12% 18%, rgba(252, 101, 115, 0.34), transparent 24rem), radial-gradient(circle at 88% 4%, rgba(179, 43, 38, 0.20), transparent 18rem), radial-gradient(circle at 8% 92%, rgba(252, 101, 115, 0.24), transparent 16rem);
    --kn-watercolor-blue: radial-gradient(circle at 18% 16%, rgba(113, 159, 230, 0.32), transparent 25rem), radial-gradient(circle at 86% 8%, rgba(67, 84, 107, 0.13), transparent 18rem), radial-gradient(circle at 12% 88%, rgba(113, 159, 230, 0.22), transparent 16rem);
    --kn-watercolor-purple: radial-gradient(circle at 18% 14%, rgba(170, 125, 206, 0.30), transparent 24rem), radial-gradient(circle at 88% 6%, rgba(86, 63, 105, 0.16), transparent 18rem), radial-gradient(circle at 10% 90%, rgba(170, 125, 206, 0.21), transparent 15rem);
    --kn-watercolor-multi: radial-gradient(circle at 9% 14%, rgba(252, 101, 115, 0.23), transparent 19rem), radial-gradient(circle at 34% 3%, rgba(252, 230, 88, 0.24), transparent 18rem), radial-gradient(circle at 68% 12%, rgba(178, 210, 138, 0.22), transparent 19rem), radial-gradient(circle at 92% 2%, rgba(170, 125, 206, 0.18), transparent 17rem), radial-gradient(circle at 80% 92%, rgba(113, 159, 230, 0.18), transparent 18rem);
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    color: var(--kn-text);
    font-family: var(--kn-font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    line-height: 1.5;
    background-color: var(--kn-paper);
    background-image: var(--kn-watercolor-multi);
    background-attachment: fixed;
}

a {
    color: var(--kn-blue-deep);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--kn-red-deep);
}

button,
a,
input,
select,
textarea {
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--kn-ring);
}

button:disabled,
.portal-action-link[aria-disabled="true"],
.action-link-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* Portal shell: ink frame + watercolor panels */
.portal-shell {
    background: var(--kn-paper) !important;
    border: 3px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-xl) !important;
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft) !important;
}

.portal-sidebar {
    max-height: none;
    overflow-y: visible;
    scrollbar-width: auto;
    color: var(--kn-ink) !important;
    background-color: color-mix(in srgb, var(--portal-accent-soft, var(--kn-red-soft)) 72%, #ffffff) !important;
    background-image: radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 32%, transparent), transparent 14rem), radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 24%, transparent), transparent 13rem), radial-gradient(circle at 20% 88%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 18%, transparent), transparent 12rem) !important;
    border-right: 3px solid var(--kn-ink);
}

.portal-brand {
    border: 3px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-lg) !important;
    background-color: var(--kn-paper) !important;
    background-image: radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 34%, transparent), transparent 12rem), radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 22%, transparent), transparent 11rem), linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.58)) !important;
    box-shadow: var(--kn-shadow-sketch);
}

.portal-brand-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.46)) !important;
}

.portal-eyebrow,
.portal-topbar-eyebrow {
    color: var(--kn-red-deep) !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
}

.portal-title,
.portal-topbar h2 {
    color: var(--kn-ink) !important;
    letter-spacing: -0.045em;
}

.portal-summary,
.portal-topbar-summary,
.muted,
.stack-snippet,
.info-card p,
.detail-list dd {
    color: var(--kn-text-muted) !important;
}

.portal-nav {
    padding-right: 0.1rem;
}

.portal-nav-item {
    min-height: 2.85rem !important;
    color: var(--kn-ink) !important;
    border: 2px solid transparent;
    border-radius: var(--kn-radius-md) !important;
    background: rgba(255, 255, 255, 0.26);
}

.portal-nav-item:hover,
.portal-nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: var(--kn-ink);
    transform: rotate(-0.25deg) translateX(2px) !important;
}

.portal-nav-item.active {
    background: var(--kn-paper) !important;
    border-color: var(--kn-ink);
    box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.12);
}

.portal-sidecard {
    border: 2px solid var(--kn-ink) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    color: var(--kn-ink) !important;
    box-shadow: var(--kn-shadow-sketch);
}

.portal-sidecard-title,
.portal-sidecard-meta,
.portal-sidecard-name {
    color: var(--kn-ink) !important;
}

.portal-main {
    min-width: 0;
    background-color: var(--kn-paper) !important;
    background-image: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 11%, transparent), transparent 18rem), radial-gradient(circle at 4% 88%, rgba(113, 159, 230, 0.10), transparent 18rem) !important;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 253, 250, 0.92) !important;
    border-bottom: 3px solid var(--kn-ink) !important;
    backdrop-filter: blur(8px);
}

.portal-content {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.portal-topbar-actions {
    justify-content: flex-end;
}

/* Buttons: black ink edge, watercolor fill */
.portal-action-link,
.action-link,
.action-link-button,
.portal-secondary-link,
.portal-signout {
    border-radius: 999px !important;
    min-height: 2.6rem;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}

.portal-action-link,
.action-link,
.action-link-button,
.portal-secondary-link {
    border: 2px solid var(--kn-ink) !important;
    background: var(--kn-paper) !important;
    color: var(--kn-ink) !important;
    box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.10);
}

.portal-action-link:hover,
.action-link:hover,
.action-link-button:hover,
.portal-secondary-link:hover {
    background: color-mix(in srgb, var(--portal-accent-soft, var(--kn-red-soft)) 72%, #ffffff) !important;
    color: var(--kn-ink) !important;
    transform: rotate(-0.3deg) translateY(-1px);
}

.portal-action-link-solid,
.action-link-button.primary,
.portal-signout {
    border: 2px solid var(--kn-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 86%, #ffffff), color-mix(in srgb, var(--portal-accent, var(--kn-red)) 68%, #ffffff)) !important;
    color: var(--kn-ink) !important;
    box-shadow: 4px 4px 0 rgba(17, 17, 17, 0.14);
}

.portal-action-link-solid:hover,
.action-link-button.primary:hover,
.portal-signout:hover {
    transform: rotate(0.25deg) translateY(-1px);
    box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.16);
}

/* Cards and work areas: poster-card feel */
.stack-card,
.info-card,
.metric-card,
.attendance-form-card,
.attendance-child-card,
.verification-upload-card,
.identity-review-card,
.kn-mn-form-note,
.kn-dialog-card,
.beta-feedback-drawer-panel {
    border: 2px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-lg) !important;
    background: var(--kn-surface) !important;
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft) !important;
}