/* Generated by scripts/build-calculator.mjs — edit that, not this. */
.calc{background:var(--panel);border:1px solid var(--stroke);border-radius:15px;padding:20px 22px;margin:26px 0}
.calc h2{margin:0 0 4px;font-size:1.1rem}
.vul{font-size:.86rem;color:var(--text-2);margin:0 0 16px}
.vul strong{color:var(--head)}
.row{margin:0 0 14px}
.row > .lgd{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-2);font-weight:650;margin:0 0 6px
}
/* Segmented controls. Radios rather than buttons: a contract is a set of
   single choices, the keyboard and a screen reader already understand that,
   and the browser keeps track of which one is on. */
.seg{display:flex;flex-wrap:wrap;gap:6px}
/* Visually hidden, not zero-sized: a 0x0 input is skipped outright by some
   assistive tech, and these ARE the control — the labels only look like it. */
.seg input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.seg label{
  display:inline-block;padding:8px 13px;border-radius:9px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--stroke);
  color:var(--text);font-size:.95rem;font-weight:600;line-height:1;user-select:none
}
.seg label:hover{border-color:var(--gold)}
.seg input:checked + label{background:var(--gold);border-color:var(--gold);color:#0B1D15}
/* The checked state must survive losing the suit colour: a selected ♥ sits on
   gold, where the red pip is unreadable. */
.seg input:checked + label .cs{color:#0B1D15}
.seg input:focus-visible + label{outline:2px solid var(--link);outline-offset:2px}
/* The heading takes focus when an edit begins, so the reader lands on the form
   rather than three screens above it. It is not a control: no focus ring. */
.calc h2:focus{outline:none}
/* What the form as it stands would score. Updates under the thumb as the
   segments are tapped, which is the fastest way to catch a mis-tapped level. */
.preview{
  margin:18px 0 0;padding:10px 12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--stroke);
  font-size:.9rem;color:var(--text-2);font-weight:600
}
.calc .btns{margin-top:18px}
.calc .btns [hidden]{display:none}
.calc .btn{cursor:pointer;border:0;font-size:1rem;font-family:inherit}
.btn-ghost{
  background:none;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--stroke);
  cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:600;
  padding:12px 20px;border-radius:10px;border:0
}
.btn-ghost:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--gold)}
.btn-ghost[disabled]{opacity:.4;cursor:default}
.btn-ghost[disabled]:hover{color:var(--text-2);box-shadow:inset 0 0 0 1px var(--stroke)}
.note-line{font-size:.86rem;color:var(--text-2);margin:14px 0 0;min-height:1.3em}
.note-line.win{color:var(--head);font-weight:650}
/* Hands this rubber. The list is the editable record: the pad below is derived
   from it, so a correction is made here and everything downstream re-derives. */
.hands{background:var(--panel);border:1px solid var(--stroke);border-radius:15px;padding:18px 20px;margin:26px 0 0}
.hands h2{margin:0 0 4px;font-size:1.1rem}
.hands .cap{font-size:.84rem;color:var(--text-2);margin:0 0 10px;line-height:1.45}
.hand-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--stroke)}
.hand-row:first-child{border-top:0}
.hand-main{flex:1;min-width:0}
.hand-title{display:block;font-size:.95rem;font-weight:650;color:var(--text);line-height:1.35}
.hand-sub{display:block;font-size:.78rem;color:var(--text-2);line-height:1.35;margin-top:2px}
/* A hand recorded after the rubber ended scores nothing. Editing an earlier
   hand can create these, so they are shown rather than silently ignored. */
.hand-row.dead .hand-title{opacity:.5}
.hand-row.editing{box-shadow:inset 0 0 0 1px var(--gold);border-radius:10px;padding-left:9px;padding-right:9px}
.hand-btn{
  flex:none;width:36px;height:36px;padding:0;border:0;border-radius:9px;
  background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--stroke);
  color:var(--text-2);font-size:.95rem;line-height:1;cursor:pointer;font-family:inherit
}
.hand-btn:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--gold)}
.hand-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hand-btn.edit{color:var(--head);background:rgba(198,163,83,.22)}
/* The pad. Two columns with a rule across them: above the line on top, below
   underneath, which is how it is written on paper. */
.pad{margin:26px 0 0;background:var(--panel);border:1px solid var(--stroke);border-radius:15px;overflow:hidden}
.pad table{width:100%;border-collapse:collapse;table-layout:fixed}
.pad th{
  background:var(--panel-2);color:var(--head);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.09em;padding:10px;text-align:center;border:0
}
.pad td{
  padding:5px 12px;font-size:.93rem;border:0;vertical-align:top;
  width:50%;color:var(--prose)
}
.pad td.r{text-align:right}
.pad .lab{display:block;font-size:.74rem;color:var(--text-2);line-height:1.35}
.pad .amt{font-weight:650;color:var(--text)}
/* The line itself. The whole point of the pad, so it is drawn, not implied. */
.pad tr.theline td{border-top:2px solid var(--gold);padding:0;height:0}
.pad tr.gameline td{border-top:1px dashed var(--stroke);padding:0;height:0}
.pad tfoot td{
  border-top:1px solid var(--stroke);padding:12px;font-weight:700;
  font-size:1.12rem;color:var(--head)
}
.pad .empty{padding:22px 12px;text-align:center;color:var(--text-2);font-size:.9rem}
.pad .settle{font-size:.78rem;color:var(--text-2);font-weight:400;display:block;margin-top:3px}
@media(max-width:520px){
  .calc{padding:16px 15px}
  .seg label{padding:8px 10px;font-size:.9rem}
  .pad td{padding:5px 9px;font-size:.88rem}
  .hands{padding:16px 15px}
  .hand-title{font-size:.9rem}
}