/* The page's own styles, on the bridge-craftwork tokens in styles.css. */

:root {
  --suit-red: #b91c1c;
  --suit-black: #1a1a1a;
  --vul: #fca5a5;
  --alert-bg: #FEF3C7;
  --gap-flag: #991B1B;
}

body { line-height: 1.45; font-size: 15px; }
a { color: var(--color-text-info); }
code { font-family: var(--font-mono); font-size: .9em; }
h2 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .5rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
h2:first-child { margin-top: 0; }
button, select, input, textarea { font: inherit; }

.top { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.top h1 { font-size: 1.4rem; font-weight: 600; }
.tagline { color: var(--color-text-secondary); flex: 1 1 20rem; }
.top nav { display: flex; gap: 1rem; }
.foot { max-width: 1200px; margin: 0 auto; padding: 1rem; color: var(--color-text-secondary); font-size: .85rem; }

.layout { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 330px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.table-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }

.panel { background: var(--color-background-primary); border-radius: var(--border-radius-lg); padding: 1rem; border: 1px solid var(--color-border-tertiary); }
.controls label { display: block; margin: .4rem 0; font-size: .9rem; color: var(--color-text-secondary); }
.controls label.narrow, .controls label.check { display: inline-block; margin-right: .5rem; }
.controls select, .controls input:not([type=checkbox]), .controls textarea {
  display: block; width: 100%; margin-top: .15rem; padding: .35rem .5rem; color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: var(--color-background-primary); }
.controls label.narrow select, .controls label.narrow input { width: 6.5rem; }
.controls textarea { font-family: var(--font-mono); font-size: .82rem; resize: vertical; }
.row { display: flex; align-items: flex-end; gap: .4rem; margin: .3rem 0; }
.row.wrap { flex-wrap: wrap; }
.hint { font-size: .82rem; color: var(--color-text-secondary); margin: .25rem 0; }

button { padding: .35rem .75rem; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary);
  background: var(--color-background-secondary); color: var(--color-text-primary); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--color-border-primary); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #334155; color: #fff; border-color: #334155; }
button.linkish { border: 0; background: none; padding: .2rem 0; color: var(--color-text-info); font-size: .85rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.tabs button { font-size: .85rem; padding: .25rem .6rem; }
.tabs button[aria-selected=true] { background: #334155; color: #fff; border-color: #334155; }

/* The deal */
.deal-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.deal-head .title { font-weight: 600; }
.deal-head .sub { color: var(--color-text-secondary); font-size: .9rem; }
.compass { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". n ." "w c e" ". s ."; gap: .5rem 1rem; align-items: center; justify-items: center; }
.hand[data-seat=N] { grid-area: n; } .hand[data-seat=S] { grid-area: s; }
.hand[data-seat=W] { grid-area: w; justify-self: end; } .hand[data-seat=E] { grid-area: e; justify-self: start; }
.centre { grid-area: c; width: 7.5rem; height: 7.5rem; border-radius: var(--border-radius-md); background: var(--color-background-secondary);
  position: relative; font-size: .78rem; display: grid; place-items: center; text-align: center; }
.centre .v { position: absolute; font-weight: 600; }
.centre .v.vul { color: var(--color-text-danger); }
.centre .v.N { top: .25rem; left: 50%; transform: translateX(-50%); } .centre .v.S { bottom: .25rem; left: 50%; transform: translateX(-50%); }
.centre .v.W { left: .35rem; top: 50%; transform: translateY(-50%); } .centre .v.E { right: .35rem; top: 50%; transform: translateY(-50%); }
.centre .v.dealer { text-decoration: underline; }
.centre .v.next { background: #334155; color: #fff; border-radius: 4px; padding: 0 .25rem; }
.hand { min-width: 9rem; font-size: .95rem; }
@media (max-width: 480px) { .hand { min-width: 0; font-size: .85rem; } .compass { gap: .5rem .4rem; } .centre { width: 6rem; height: 6rem; } }
.hand .who { font-size: .78rem; color: var(--color-text-secondary); margin-bottom: .1rem; }
.hand .suit { white-space: nowrap; font-family: var(--font-mono); letter-spacing: .02em; }
.hand.hidden .suits { color: var(--color-text-tertiary); font-style: italic; font-family: var(--font-sans); }
.s-H, .s-D { color: var(--suit-red); }
.s-S, .s-C { color: var(--suit-black); }

/* The auction */
.auction-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.auction-head h2 { margin: 0; }
.buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
table.auction { border-collapse: collapse; width: 100%; max-width: 30rem; table-layout: fixed; }
table.auction th { font-size: .78rem; color: var(--color-text-secondary); font-weight: 500; text-align: left; padding: .2rem .4rem; }
table.auction th.vul { color: var(--color-text-danger); }
table.auction td { padding: .1rem .2rem; }
.callbtn { display: inline-block; min-width: 3.2rem; text-align: left; padding: .15rem .4rem; border-radius: 6px; border: 1px solid transparent; background: none; font-size: .95rem; }
.callbtn:hover { border-color: var(--color-border-secondary); }
.callbtn.alerted { background: var(--alert-bg); }
.callbtn.selected { border-color: #334155; }
.callbtn .mark { font-size: .7rem; vertical-align: super; color: var(--color-text-warning); margin-left: 1px; }
.callbtn.by-you { box-shadow: inset 0 -2px 0 #185FA5; }
.callbtn.by-forced { font-style: italic; }
.callbtn.norule .mark.gap { color: var(--gap-flag); }
.qmark { color: var(--color-text-tertiary); }
.call-detail { margin-top: .75rem; padding: .6rem .75rem; background: var(--color-background-secondary); border-radius: var(--border-radius-md); font-size: .9rem; }
.call-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; }
.call-detail dt { color: var(--color-text-secondary); }
.call-detail .cands { margin-top: .4rem; font-size: .82rem; }
.call-detail .cands li { list-style: none; }
.call-detail .cands .chosen { font-weight: 600; }
button[aria-pressed=true] { background: #334155; color: #fff; border-color: #334155; }

/* The x-ray: the rules weighed for a call, and the table before it */
.xray { margin-top: .75rem; padding: .6rem .75rem; background: var(--color-background-secondary); border-radius: var(--border-radius-md); font-size: .88rem; min-width: 0; }
.xray .xbar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.xray h3 { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); }
.xray h4 { font-size: .8rem; font-weight: 600; color: var(--color-text-secondary); margin: .6rem 0 .2rem; }
.xray .check { font-size: .85rem; color: var(--color-text-secondary); }
.xray dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .3rem 0; }
.xray dt { color: var(--color-text-secondary); }
.xray dd { min-width: 0; overflow-wrap: anywhere; }
.xray .xhead, .xray summary { font-weight: 600; margin-top: .4rem; }
.xray summary { cursor: pointer; }
.xray .by, .xray .xhead .hint { font-weight: 400; color: var(--color-text-secondary); font-size: .82rem; }
.xray details.xcall { border-top: 1px solid var(--color-border-tertiary); padding: .3rem 0; }
.xray .holds { margin: .3rem 0; }
.xray .gap { color: var(--gap-flag); }
.xray .warn { color: var(--color-text-warning); }
.xray .sides { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: .3rem 0; font-size: .85rem; }
.xscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.xt { border-collapse: collapse; font-size: .82rem; background: var(--color-background-primary); }
table.xt th, table.xt td { padding: .15rem .45rem; border-bottom: 1px solid var(--color-border-tertiary); text-align: left; vertical-align: top; }
table.xt thead th { font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
table.xt .num { text-align: right; font-variant-numeric: tabular-nums; }
table.xt .call, table.xt .rule, table.xt .outcome { white-space: nowrap; }
table.xt .meaning { min-width: 14rem; }
table.xt .rule { font-family: var(--font-mono); font-size: .75rem; }
table.xt tr.chosen .outcome { color: var(--color-text-success); font-weight: 600; }
table.xt tr.outranked .outcome { color: var(--color-text-warning); }
table.xt tr.fails { color: var(--color-text-secondary); }
table.xt tr.made .call { font-weight: 700; text-decoration: underline; }
table.xt.know td { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.xt.know td.shown { text-align: left; }
table.xt.know tr.caller { font-weight: 600; }
table.xt .shown ul { margin: .2rem 0 0 1rem; }
table.xt .shown summary { cursor: pointer; font-weight: 400; margin: 0; }
table.xt .known { display: block; font-size: .75rem; color: var(--color-text-secondary); }
table.xt td.same { color: var(--color-text-success); }
table.xt td.differs { color: var(--color-text-danger); font-weight: 600; }
.unk { color: var(--color-text-tertiary); }
.cmp h4 { font-size: .8rem; font-weight: 600; color: var(--color-text-secondary); margin: .6rem 0 .2rem; }

.meanings { margin-top: .75rem; padding-left: 0; font-size: .9rem; }
.meanings li { list-style: none; padding: .15rem 0; border-top: 1px solid var(--color-border-tertiary); display: grid; grid-template-columns: 1.4rem 3rem 1fr; gap: .5rem; }
.meanings .seat { color: var(--color-text-secondary); }
.meanings .alert-tag { font-size: .75rem; background: var(--alert-bg); color: var(--color-text-warning); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }
.meanings .gap { color: var(--gap-flag); font-size: .8rem; }
.bidbox-wrap { margin-top: .75rem; }
.bidbox-wrap summary { cursor: pointer; font-size: .9rem; color: var(--color-text-secondary); }
.bidbox { display: grid; grid-template-columns: repeat(5, minmax(2.6rem, 3.2rem)); gap: .25rem; margin-top: .5rem; }
.bidbox button { padding: .25rem 0; font-size: .9rem; }
.bidbox .other { grid-column: span 5; display: flex; gap: .25rem; }
.bidbox .other button { flex: 1; }

/* The result */
.result-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; }
.result-head .contract { font-size: 1.2rem; font-weight: 600; }
.dd { border-collapse: collapse; margin-top: .6rem; font-size: .9rem; }
.dd th, .dd td { padding: .15rem .55rem; text-align: center; border-bottom: 1px solid var(--color-border-tertiary); }
.dd th { font-weight: 500; color: var(--color-text-secondary); }
.dd td.made { font-weight: 600; }
.cmp { margin-top: .6rem; font-size: .9rem; }
.cmp .auction-line { font-family: var(--font-mono); font-size: .85rem; }
.cmp .note { color: var(--color-text-warning); }

/* Cards and flags */
#coverage { margin-top: .5rem; font-size: .85rem; }
.cov { margin: .5rem 0; padding: .5rem .6rem; background: var(--color-background-secondary); border-radius: var(--border-radius-md); }
.cov .name { font-weight: 600; }
.cov .flag { color: var(--color-text-warning); }
.cov .ok { color: var(--color-text-success); }
.cov details { margin-top: .25rem; }
.cov summary { cursor: pointer; }
.cov ul { margin: .25rem 0 0 1rem; font-family: var(--font-mono); font-size: .75rem; max-height: 12rem; overflow: auto; }
.cov .dl { display: flex; gap: .5rem; margin-top: .3rem; }
.cov .dl button { font-size: .75rem; padding: .15rem .5rem; }

/* Diagnostics */
.diagnostics ul { list-style: none; font-size: .88rem; }
.diagnostics li { padding: .3rem .5rem; border-radius: 6px; margin: .2rem 0; }
.diagnostics li.error { background: var(--color-background-danger); color: var(--color-text-danger); }
.diagnostics li.warning { background: var(--color-background-warning); color: var(--color-text-warning); }
.diagnostics li.info { background: var(--color-background-info); color: var(--color-text-info); }
.diagnostics .hint { display: block; font-size: .8rem; opacity: .85; }
.busy { opacity: .6; pointer-events: none; }