/* components/touch_optimizations.css */
@media (pointer: coarse) {
button:not(.tiptap-toolbar button):not(.mobile-bnav__tab):not(.spec-chat-panel__icon-btn):not([class*="bnav__"]),
.btn,
[role="button"]:not([class*="tab"]),
input[type="submit"],
input[type="button"],
input[type="reset"] {
min-height: 44px;
}
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-outline,
a.btn-ghost,
a.btn-accent,
a.btn-coral {
min-height: 44px;
display: inline-flex;
align-items: center;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
font-size: 16px;
min-height: 44px;
}
select {
padding-top: 10px;
padding-bottom: 10px;
}
button,
.btn,
a,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
touch-action: manipulation;
}
}
/* components/oauth_buttons.css */
.oauth-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 44px;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
border-radius: 0.625rem;
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
transition: background 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.oauth-btn:hover {
background: var(--bg-surface-hover);
border-color: var(--text-tertiary);
}
.oauth-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.oauth-btn:active {
transform: translateY(1px);
}
.oauth-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.oauth-btn-label {
flex: 1 1 auto;
text-align: start;
padding-inline-start: 0.25rem;
}
.oauth-btn-apple {
background: #000;
color: #fff;
border-color: #000;
}
.oauth-btn-apple:hover {
background: #1a1a1a;
border-color: #1a1a1a;
}
html[data-theme="dark"] .oauth-btn-apple {
background: #fff;
color: #000;
border-color: #fff;
}
html[data-theme="dark"] .oauth-btn-apple:hover {
background: #f0f0f0;
border-color: #f0f0f0;
}
.oauth-btn-github {
background: #24292f;
color: #fff;
border-color: #24292f;
}
.oauth-btn-github:hover {
background: #32383f;
border-color: #32383f;
}
html[data-theme="dark"] .oauth-btn-github {
background: #f0f6fc;
color: #0d1117;
border-color: #f0f6fc;
}
html[data-theme="dark"] .oauth-btn-github:hover {
background: #d0d7de;
border-color: #d0d7de;
}
.oauth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.25rem 0;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-tertiary);
}
.oauth-divider::before,
.oauth-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--border-default);
}