/* 400 hand calculator (assets/js/tools/four-hundred.js) */
.tl-fh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem 4.6rem 4.6rem; gap: .4rem .4rem; align-items: center; margin: .6rem 0 .4rem; }
.tl-fh-head { font-size: .9rem; color: var(--card-soft); font-variant-caps: all-small-caps; letter-spacing: .06em; text-align: center; }
.tl-fh-name { display: flex; flex-direction: column; min-width: 0; }
.tl-fh-name > span:first-child { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-fh-info { font-size: .85rem; color: var(--card-soft); font-style: italic; }
.tl-fh-score { text-align: center; font-variant-numeric: tabular-nums; }
.tl-fh select, .tl-fh input[type="number"] { font: inherit; font-size: 1.1rem; min-height: 44px; width: 100%; box-sizing: border-box; padding: .2rem .3rem; border: 1px solid var(--card-line); border-radius: 6px; }
.tl-fh-status { font-size: .95rem; margin: .2rem 0 .6rem; }
.tl-fh .tl-out p { font-size: 1rem; font-weight: 400; margin: .5rem 0 0; }
.tl-fh .tl-out p.tl-fh-win { font-weight: 800; font-size: 1.1rem; }
.tl-fh-scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.tl-fh-scores > div { display: flex; flex-direction: column; align-items: center; padding: .3rem; border: 1px solid var(--card-line); border-radius: 6px; min-width: 0; }
.tl-fh-scores span { font-size: .9rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tl-fh-scores b { font-variant-numeric: tabular-nums; }
.tl-fh-scores small { font-size: .8rem; font-weight: 400; color: var(--card-soft); }
.tl-fh .tl-fh-opt { text-align: left; flex: 1 1 100%; }
.tl-fh-opts { margin: .6rem 0 0; }
.tl-fh-opts summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--card-soft); }