button,
a,
input,
select,
textarea,
.touchable,
[role="button"],
[role="link"],
[type="checkbox"],
[type="radio"] {
min-height: 44px;
min-width: 44px;
position: relative;
}
a:not(.btn) {
padding: 8px 4px;
margin: -8px -4px;
}
padding: 12px 16px;
}
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
min-height: 44px;
display: flex;
align-items: center;
padding: 8px 12px;
cursor: pointer;
}
input:focus,
textarea:focus,
select:focus {
font-size: 16px !important;
}
}
transition: padding-bottom 0.3s ease;
}
input:focus,
textarea:focus,
select:focus {
scroll-margin-top: 100px;
scroll-behavior: smooth;
}
.form-step {
padding: 16px 20px;
}
.form-group {
margin-bottom: 12px;
}
.btn {
padding: 10px 24px;
min-height: 40px;
}
.card {
padding: 16px;
margin-bottom: 12px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.stat-card {
padding: 12px;
}
.stat-value {
font-size: 20px;
}
.stat-label {
font-size: 12px;
}
@media (max-width: 667px) and (orientation: landscape) {
.welcome-banner {
padding: 20px;
}
.countdown {
font-size: 14px;
}
.step-indicator {
margin-bottom: 12px;
}
}
.scroll-x {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.scroll-x > * {
scroll-snap-align: start;
}
@media (max-width: 768px) {
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
width: 100%;
}
.action-buttons .btn {
flex: 0 0 auto;
min-width: 80px;
font-size: 14px;
padding: 8px 12px;
min-height: 36px;
}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.form-actions,
.button-group,
.footer {
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.fixed-bottom {
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
}
@media (max-width: 768px) {
.mobile-menu {
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
transform: translateX(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 999;
padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 998;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
}
@media (hover: none) and (pointer: coarse) {
button:active,
.btn:active,
a:active {
transform: scale(0.97);
}
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.no-repaint {
contain: layout style paint;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
body {
font-size: 14px;
line-height: 1.6;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
p {
font-size: 14px;
}
.small-text {
font-size: 12px;
}
}
.mobile-debug {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 8px;
font-size: 11px;
font-family: monospace;
z-index: 9999;
display: none;
}
.mobile-debug.show {
display: block;
}
@media print {
.no-print,
.petal,
.btn,
button,
.footer {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.card,
.data-table {
break-inside: avoid;
}
}