@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/fonts.css";

/* Without this, any element combining width:100% with padding renders
   wider than its parent, causing horizontal overflow on narrow phones. */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}

.tcsb-card-hover{transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);}
.tcsb-card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-elevated);}

.tcsb-number-input::-webkit-outer-spin-button,.tcsb-number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tcsb-number-input{-moz-appearance:textfield;}

/* Two columns once there's room for both cards to breathe; wraps back to a
   single column on narrow phone widths rather than needing a media query. */
.tcsb-result-cards{display:flex;flex-wrap:wrap;gap:24px;}
.tcsb-result-cards > div{flex:1 1 220px;min-width:0;}