/* Shared input appearance, based on login. Native text controls opt in
   automatically, including controls inserted after page load. Menus own only
   placement, width and space for adjacent controls. */
:root {
    --kinma-input-radius: 0 9999px 9999px 9999px;
    --kinma-input-multiline-radius: 0 24px 24px 24px;
    --kinma-input-label-gap: 6px;
    --kinma-input-border-width: 1.5px;
    --kinma-search-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --kinma-search-radius: 9999px;
}

/* Important declarations in a layer beat legacy unlayered !important rules.
   This makes the framework authoritative without a specificity arms race. */
@layer kinma-input {
    /* Width is invariant. Variants change only the stroke pattern. */
    :where(input, textarea, .kinma-input, .kinma-input-shell,
        .kinma-ai-search-pill, .kinma-search-side-action) {
        --kinma-input-border-width: 1.5px !important;
        --kinma-input-border-style: solid !important;
    }
    .kinma-input--dotted,
    [data-input-outline="dotted"] {
        --kinma-input-border-style: dotted !important;
    }
    .kinma-input--solid,
    [data-input-outline="solid"] {
        --kinma-input-border-style: solid !important;
    }
    .kinma-input-label {
        display: block !important;
        position: static !important;
        transform: none !important;
        margin: 0 0 var(--kinma-input-label-gap) !important;
        padding: 0 !important;
        min-height: 0 !important;
        text-align: left !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        color: var(--kinma-input-text) !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .kinma-input-field-label {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    /* Search keeps an accessible name without a visible field title or gap. */
    .kinma-input-label.kinma-input-label--search {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }
    /* Do not add a menu's flex/grid gap or field margin to the label gap. */
    :where(*):has(> .kinma-input-label + :is(input, textarea,
        .kinma-input-shell, .kinma-ai-search-pill, .password-input-wrapper,
        .story-pre-step1-row, .login-identifier-input-row)) {
        row-gap: 0 !important;
    }
    .kinma-input-label + :is(input, textarea, .kinma-input-shell,
        .kinma-ai-search-pill, .password-input-wrapper, .story-pre-step1-row,
        .login-identifier-input-row) {
        margin-top: 0 !important;
    }
    .kinma-input-label :where(span) {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
        white-space: normal !important;
        font: inherit !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], input[type="tel"],
        input[type="url"], input[type="number"], input[type="date"],
        input[type="datetime-local"], input[type="time"], input[type="month"],
        input[type="week"]) {
        min-height: 46px !important;
        height: auto !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], input[type="tel"],
        input[type="url"], input[type="number"], input[type="date"],
        input[type="datetime-local"], input[type="time"], input[type="month"],
        input[type="week"], .kinma-input, .kinma-input-shell,
        .kinma-ai-search-pill, .login-identifier-phone-container) {
        border-radius: var(--kinma-input-radius) !important;
    }

    :where(textarea, .kinma-input--multiline) {
        border-radius: var(--kinma-input-multiline-radius) !important;
    }

    /* Composite search controls draw one surface around their input/actions. */
    :where(.kinma-ai-search-pill, .kinma-input-shell) :where(input, textarea) {
        border-radius: 0 !important;
    }

    .kinma-ai-search-pill::before,
    .kinma-ai-search-pill::after {
        border-radius: var(--kinma-input-radius) !important;
    }
}

/* Appearance belongs to this framework, never to an individual menu. */
:root {
    --kinma-input-background: #fff;
    --kinma-input-border: #ced2cf;
    --kinma-input-text: var(--kinma-user-text, #1a1a1a);
    --kinma-input-placeholder: #94a3b8;
}
body.dark-mode {
    --kinma-input-background: #fff;
    --kinma-input-border: #444851;
    --kinma-input-text: #1a1a1a;
    --kinma-input-placeholder: #94a3b8;
}
@layer kinma-input {
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill) {
        box-sizing: border-box !important;
        border: var(--kinma-input-border-width) var(--kinma-input-border-style, solid) var(--kinma-input-border) !important;
        background: #FFFFFF !important;
        color: var(--kinma-input-text) !important;
        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        outline: none !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill)::placeholder {
        color: var(--kinma-input-placeholder) !important;
        -webkit-text-fill-color: var(--kinma-input-placeholder) !important;
        opacity: 1 !important;
        font: inherit !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill):focus-visible {
        border-color: var(--kinma-input-border) !important;
        box-shadow: none !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill):is(.invalid, [aria-invalid="true"]) {
        border-color: #dc3545 !important;
    }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill).valid:not(.invalid) { border-bottom-color: #28a745 !important; }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill).validating { border-bottom-color: #ffc107 !important; }
    :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill):disabled {
        opacity: .6 !important;
        cursor: not-allowed !important;
    }
    :where(.kinma-ai-search-pill, .kinma-input-shell) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    :where(.kinma-ai-search-pill, .kinma-input-shell):focus-within {
        border-color: var(--kinma-input-border) !important;
        box-shadow: none !important;
    }
    :where(.kinma-ai-search-pill, .kinma-input-shell) :where(input, textarea) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Shared action-slot variants; geometry stays here, not in menus. */
    .kinma-input-shell--labelled {
        position: relative;
        margin-top: calc(18.2px + var(--kinma-input-label-gap)) !important;
    }
    .kinma-input-shell--labelled > .kinma-input-label--composite {
        position: absolute !important;
        bottom: calc(100% + var(--kinma-input-label-gap)) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 2;
    }
    /* A search shell owns the surface; its text slot must fit beside actions. */
    :is(.kinma-ai-search-pill, .kinma-input-shell) :is(input, textarea) {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 8px !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .kinma-input-shell {
        padding-inline: 16px !important;
    }
    .kinma-search-clear-wrap > input.kinma-search-clear-enhanced {
        padding-right: 44px !important;
    }
    /* Search surfaces stay flat in every state, including focus and AI mode. */
    :is(.kinma-ai-search-pill, .kinma-input-shell[role="search"],
        .kinma-input-shell:has(input[type="search"])):is(*, :focus-within),
    :is(.kinma-ai-search-pill, .kinma-input-shell[role="search"]) *,
    :is(.kinma-ai-search-pill, .kinma-input-shell[role="search"])::before,
    :is(.kinma-ai-search-pill, .kinma-input-shell[role="search"])::after {
        box-shadow: none !important;
        filter: none !important;
    }
    .kinma-ai-search-pill::before,
    .kinma-ai-search-pill::after {
        content: none !important;
    }
    /* A single subtle shadow around the search surface, never its inner input. */
    :is(.kinma-ai-search-pill, .kinma-input-shell[role="search"],
        .kinma-input-shell:has(input[type="search"])):is(*, :focus-within) {
        border-radius: var(--kinma-search-radius) !important;
        box-shadow: var(--kinma-search-shadow) !important;
    }
    .kinma-search-side-action {
        background: #FFFFFF !important;
        border: var(--kinma-input-border-width) var(--kinma-input-border-style, solid) var(--kinma-input-border) !important;
        box-shadow: var(--kinma-search-shadow) !important;
    }
    :where(.password-input-wrapper, .story-pre-step1-row) > input {
        padding-right: 58px !important;
    }
    :where(.password-input-wrapper):has(.login-clear-btn--password:not([hidden])) > input {
        padding-right: 96px !important;
    }
}

/* The same interaction palette for every input and search surface. */
@layer kinma-input {
    :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill, .kinma-search-side-action):hover:not(:disabled) {
        --kinma-input-border: #929b95 !important;
    }
    :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, .kinma-input, .kinma-input-shell, .kinma-ai-search-pill, .kinma-search-side-action):is(:focus, :focus-within, :active, [aria-selected="true"], [aria-pressed="true"], [aria-expanded="true"]):not(:disabled) {
        --kinma-input-border: #1a1a1a !important;
    }
}