/* Extra polish on top of Tailwind. Theme is class-based ('dark' on ). */ * { -webkit-tap-highlight-color: transparent; } /* Thin, subtle scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(120, 130, 145, .28); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 145, .45); background-clip: content-box; } html.dark ::-webkit-scrollbar-thumb { background: rgba(160,170,185,.18); background-clip: content-box; } /* Inline SVG icons inherit text color and size to their box */ [data-icon] { display: inline-flex; align-items: center; justify-content: center; } [data-icon] svg { width: 1em; height: 1em; } .nav-ico svg, .h-5 svg { width: 100%; height: 100%; } [data-icon] svg, .tile-ico svg { stroke: currentColor; } /* default icon sizing where a wrapper sets w/h */ .icon-btn svg { width: 18px; height: 18px; } /* Auth tab active state (set by JS toggling .is-on) */ #auth-tabs button.is-on { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16,24,40,.06); } html.dark #auth-tabs button.is-on { background: #1e2128; color: #fff; } /* Mobile nav active */ .mnav { color: #9aa1ad; } .mnav.active { color: #3b82f6; } .mnav.active svg { color: #3b82f6; } /* Modal animation */ .modal-overlay { animation: fade .15s ease-out; } .modal-card { animation: pop .18s cubic-bezier(.16,1,.3,1); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } /* Toast */ .toast { animation: slidein .2s ease-out; } @keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* Progress bar fill transition */ #budget-bar { transition: width .4s ease; } /* Hide number input spinners */ input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* divide-y / divide-x put their borders on the CHILD elements, which otherwise fall back to Tailwind's default light-gray border color and show up as a bright white line in dark mode. Make those dividers inherit the parent's .hairline color. */ .hairline > :not([hidden]) ~ :not([hidden]) { border-color: inherit; } /* ------------------------------------------------------------------ */ /* Mobile ergonomics: comfortable tap targets on small / touch screens. */ /* Apple's HIG recommends a minimum ~44px hit area. On phones we bump */ /* the compact controls so buttons aren't tiny and hard to press. */ /* ------------------------------------------------------------------ */ @media (max-width: 639px) { .btn-sm { padding-top: .5rem; padding-bottom: .5rem; font-size: 14px; min-height: 40px; } .btn { min-height: 44px; } .icon-btn { height: 42px; width: 42px; } .field { padding-top: .65rem; padding-bottom: .65rem; font-size: 15px; min-height: 44px; } /* iOS zooms the page when an input's font-size is < 16px on focus; keep selects/inputs at 16px. */ input.field, select.field, textarea.field { font-size: 16px; } }