/* Bidding practice UI. Deliberately the same look as the rendered notes
   (scripts/render-site.ts CSS): light theme, system font, blue links. */

:root { color-scheme: light; }
* { box-sizing: border-box; min-width: 0; }
body { font: 18px/1.6 -apple-system, "Segoe UI", sans-serif; color: #1f2328; background: #fff;
       max-width: 30rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: .5rem 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
a { color: #0b57d0; }
button { font: inherit; }
.suit { color: #1a1a2e; }
.suit.red { color: #c0392b; }
.muted { color: #59636e; }
.small { font-size: .85rem; }
.loading { color: #59636e; }

.error-banner { background: #ffebe9; border: 1px solid #ffb3ab; border-radius: 8px;
                padding: .6rem 1rem; margin: .75rem 0; }

/* --- New set / links screens --- */
.newset label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
.newset input, .newset select { width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid #cfd6dd; border-radius: 8px; background: #fff; }
.newset .themeopt { font-weight: 400; font-size: .95rem; border: 1px solid #e0e6ec; border-radius: 8px;
                    padding: .55rem .7rem; margin: .35rem 0; cursor: pointer; }
.newset .themeopt input { width: auto; margin-right: .4rem; }
.newset .themeopt:has(input:checked) { border-color: #0b57d0; background: #f5f9ff; }
.primary { background: #0b57d0; color: #fff; border: none; border-radius: 8px;
           padding: .65rem 1.2rem; font-weight: 600; margin-top: 1rem; cursor: pointer; }
.primary:disabled { background: #9db8e8; }
.seatlink { border: 1px solid #d1d9e0; border-radius: 10px; padding: .8rem 1rem; margin: .75rem 0; }
.seatlink .name { font-weight: 700; }
.seatlink .url { font-size: .8rem; word-break: break-all; color: #59636e; display: block; margin: .3rem 0; }
.copy { border: 1px solid #0b57d0; color: #0b57d0; background: #fff; border-radius: 6px;
        padding: .3rem .8rem; cursor: pointer; }

/* --- Set list --- */
.summary { color: #59636e; margin: .25rem 0 1rem; }
ul.deals { list-style: none; padding: 0; }
ul.deals li { margin: .5rem 0; }
ul.deals a { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
             border: 1px solid #d1d9e0; border-radius: 10px; padding: .7rem 1rem;
             text-decoration: none; color: inherit; }
.chip { font-size: .8rem; font-weight: 700; border-radius: 6px; padding: .15rem .6rem; white-space: nowrap; }
.chip.your-turn { background: #dafbe1; color: #116329; }
.chip.waiting { background: #f0f4f8; color: #59636e; }
.chip.complete { background: #eef4ff; color: #0b57d0; }

/* --- Deal screens --- */
nav.crumbs { font-size: .9rem; margin-bottom: .75rem; }
.dealhead { background: #f0f4f8; border: 1px solid #d1d9e0; border-radius: 10px 10px 0 0;
            padding: .55rem .9rem; font-weight: 700; }
.dealhead .sub { display: block; font-weight: 400; font-size: .8rem; color: #59636e; }
.dealbody { border: 1px solid #d1d9e0; border-top: none; border-radius: 0 0 10px 10px; padding: .9rem; }
.hand { font-size: 1.1rem; line-height: 1.7; letter-spacing: .05em; margin: .5rem 0; }
.hand .who { font-size: .8rem; color: #59636e; letter-spacing: 0; display: block; }
.divider { border-top: 1px solid #e6eaef; margin: .8rem 0; }

table.auction { border-collapse: collapse; width: 100%; margin: .5rem 0; }
table.auction th { font-weight: 600; color: #59636e; font-size: .78rem; text-align: left;
                   padding: .1rem .4rem .1rem 0; border-bottom: 1px solid #e6eaef; }
table.auction td { padding: .25rem .4rem .25rem 0; }
table.auction .call { font-weight: 700; white-space: nowrap; }
table.auction .pass { color: #8a949e; }
table.auction .pending { color: #0b57d0; font-weight: 700; }
table.auction sup { color: #0b57d0; font-weight: 400; }
ol.whys { font-size: .85rem; color: #59636e; margin: .5rem 0 0; padding-left: 1.2rem; }

/* Bidding box: 5 strains across, levels down, only legal bids enabled. */
.bidbox { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin: .75rem 0 .5rem; }
.bidbox button { padding: .5rem 0; border: 1px solid #cfd6dd; border-radius: 8px; background: #fff; cursor: pointer; }
.bidbox button:disabled { color: #c9d1d9; border-color: #eef1f4; cursor: default; }
.bidbox button.selected { border-color: #0b57d0; background: #f5f9ff; font-weight: 700; }
.passbtn { width: 100%; padding: .55rem 0; border: 1px solid #cfd6dd; border-radius: 8px;
           background: #f0f4f8; font-weight: 600; cursor: pointer; }
.passbtn.selected { border-color: #0b57d0; background: #f5f9ff; }
.whyfield { margin: .6rem 0; }
.whyfield label { font-size: .8rem; color: #59636e; display: block; }
.whyfield input { width: 100%; font: inherit; font-size: .95rem; padding: .5rem .7rem;
                  border: 1px solid #cfd6dd; border-radius: 8px; }
.confirmbar { margin-top: .6rem; }
.confirmbar .primary { margin-top: 0; width: 100%; }

.contractline { font-size: 1.05rem; margin: .4rem 0; }
.chapterlink { display: block; background: #eef4ff; border: 1px solid #c8dafc; border-radius: 8px;
               padding: .55rem .8rem; font-size: .9rem; margin-top: .9rem; text-decoration: none; }

/* Reveal: the classic four-hand cross. */
.crosstable { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: .5rem 0; }
.crosstable .hand { font-size: .95rem; margin: 0; }
.crosstable .n { grid-column: 1 / 3; }
.crosstable .s { grid-column: 1 / 3; }
.opp-note { font-size: .8rem; color: #8a949e; }