/* Input usability fixes; normal colors, borders, radii and sizes belong to the original page styles. */
:root{
 --field-radius:12px;--field-height:48px;--field-padding:14px;
 --field-ink:var(--site-fg,var(--fg,var(--text,#18181b)));
 --field-surface:var(--site-surface,var(--surface,#fff));
 --field-muted:var(--site-muted,var(--muted-ink,var(--muted,#62626b)));
 --field-line:var(--site-control-border,var(--field-border,#a1a1aa));
 --field-accent:var(--site-primary-ink,var(--violet-ink,var(--purple,#7020c5)));
 --field-soft:var(--site-soft,var(--soft,var(--surface-2,#faf7ff)));
 --field-danger:var(--site-danger,var(--danger,#b42335));
}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea){
 box-sizing:border-box;min-width:0;max-width:100%;
 font-family:inherit;font-size:16px;line-height:24px;
 caret-color:var(--field-accent);scroll-margin-block:100px 32px;
 transition:border-color .16s,box-shadow .16s,background-color .16s;
}
/* Keep text entry easy to tap while retaining the original field decoration. */
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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]){min-height:44px}
:is(#experience-root,#experience-dialog,body[data-admin-console],.website-stars) textarea{
 display:block;max-width:100%;line-height:24px;
}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea)::placeholder{color:var(--field-muted);opacity:1}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea):focus-visible{
 --field-state-line:var(--field-accent);outline:2px solid var(--field-accent);outline-offset:2px;border-color:var(--field-accent);
 box-shadow:0 0 0 4px color-mix(in srgb,var(--field-accent) 10%,transparent);
}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea):is([aria-invalid=true],:user-invalid){
 --field-state-line:var(--field-danger);border-color:var(--field-danger);
}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea):is([aria-invalid=true],:user-invalid):focus-visible{
 outline-color:var(--field-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--field-danger) 10%,transparent);
}
:is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars)
 :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],textarea):disabled{background:var(--field-soft);color:var(--field-muted);opacity:1;cursor:not-allowed;box-shadow:none}
:is(#experience-root,#experience-dialog,body[data-admin-console],.website-stars)
 :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],textarea)[readonly]{background:var(--field-soft);color:var(--field-muted);box-shadow:none}

/* The frame owns focus; textarea and counter share exactly the same inset. */
#experience-root .mw-question{
 padding:0;overflow:hidden;
 transition:border-color .16s,box-shadow .16s;
}
#experience-root .mw-question:focus-within,
#experience-root :is(.mw-chat-form,.mw-psychic-form):focus-within{
 border-color:var(--field-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--field-accent) 13%,transparent);
}
#experience-root .mw-question>textarea{
 display:block;width:100%;
 padding:16px;border:0;border-radius:0;background:transparent;font-size:16px;line-height:24px;
 outline:none;box-shadow:none;
}
#experience-root .mw-question:has(textarea:is([aria-invalid=true],:user-invalid)){border-color:var(--field-danger)}
#experience-root :is(.mw-question,.mw-chat-form,.mw-psychic-form):has(textarea:is(:disabled,[readonly])){background:var(--field-soft)}
#experience-root .mw-question>.mw-question-footer{
 margin:0;padding:4px 16px 12px;min-height:36px;gap:12px;flex-wrap:wrap;
 color:var(--field-muted);font-size:12px;line-height:20px;
}
#experience-root .mw-question-footer [data-count]{padding:0;font-variant-numeric:tabular-nums}
#experience-root :is([data-count],[data-free-count])[data-limit-state=near]{color:var(--field-accent);font-weight:600}
#experience-root :is([data-count],[data-free-count])[data-limit-state=full]{color:var(--field-danger);font-weight:600}
#experience-root .mw-free-input-count,.website-stars .input-count{font-size:12px;line-height:20px;color:var(--field-muted);font-variant-numeric:tabular-nums}
#experience-root .mw-free-input-count{text-align:end;margin-block:6px 12px}

/* Authentication and compact chat use the same tokens with explicit sizing. */
#experience-root .starcore-auth #demo-auth-form input:not([type=checkbox]),
#experience-root .starcore-auth #signup-otp-code{font-size:16px;line-height:24px}
#experience-root :is(.mw-chat-form,.mw-psychic-form){
 min-width:0;
}
#experience-root :is(.mw-chat-form,.mw-psychic-form)>textarea{
 flex:1;min-width:0;padding:4px;
 border:0;border-radius:0;outline:none;box-shadow:none;background:transparent;line-height:24px;font-size:16px;
}
#experience-root :is(.mw-chat-form,.mw-psychic-form)>button{width:44px;min-width:44px;min-height:44px;flex-shrink:0}
@media(hover:hover){
 :is(#experience-root,#experience-dialog,body[data-admin-console],.website-stars)
 :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],textarea):hover:not(:disabled):not([readonly]):not(:focus-visible):not([aria-invalid=true]):not(:user-invalid){--field-state-line:var(--field-accent);border-color:var(--field-accent)}
 #experience-root .mw-question:hover:not(:has(textarea:is(:disabled,[aria-invalid=true],:user-invalid))){border-color:var(--field-accent)}
}
@media(prefers-reduced-motion:reduce){
 :is(#experience-root,#experience-dialog,.mw-header,body[data-admin-console],.website-stars) :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],textarea),
 #experience-root :is(.mw-question,.mw-chat-form,.mw-psychic-form){transition:none}
}
/* Long-form editors retain their writing space while sharing field states. */
#blog-form textarea[name=body]{height:430px;min-height:430px;font-family:ui-monospace,monospace;font-size:16px;line-height:1.85}

#experience-root .mw-question:has(textarea:is([aria-invalid=true],:user-invalid)):focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--field-danger) 13%,transparent)}
#experience-root :is(.mw-question,.mw-chat-form,.mw-psychic-form):focus-within>textarea:focus-visible{outline:none;box-shadow:none}