/* tools.css — laddas endast på verktygssidor. Bygger på tokens i style.css. */

.calc {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-md);
}
.calc__group { margin-bottom: var(--s-5); }
.calc__label { font-weight: 700; color: var(--felt-700); margin: 0 0 var(--s-2); display: block; }
.calc__hint { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 var(--s-3); }

/* Slots (din hand + bordet) */
.slots { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.slots--board { position: relative; }
.cslot {
  width: 46px; height: 62px; border-radius: var(--r-sm);
  border: 2px dashed var(--border-str); background: var(--card-alt);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cslot.is-active { border-style: solid; border-color: var(--felt-500); box-shadow: 0 0 0 3px rgba(43,125,89,.18); }
.cslot.is-filled { border-style: solid; border-color: var(--border-str); background: #fff; }
.cslot--red { color: var(--chip-red); }
.cslot--black { color: var(--ink); }

/* Deck grid */
.deck { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin-top: var(--s-2); }
.card {
  aspect-ratio: 3 / 4; min-width: 0; padding: 2px;
  border: 1px solid var(--border); border-radius: 5px; background: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.card:hover:not(:disabled) { border-color: var(--felt-500); background: var(--felt-100); }
.card--red { color: var(--chip-red); }
.card--black { color: var(--ink); }
.card:disabled { opacity: .28; cursor: default; }

/* Controls */
.calc__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
.calc__field label { display: block; font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; margin-bottom: var(--s-1); }
.calc__field select,
.calc__field input[type="number"] {
  font: inherit; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-str);
  border-radius: var(--r-sm); background: #fff; color: var(--ink); min-height: 44px;
}
.calc__field--wide { flex: 1 1 180px; }
.calc__field--wide input { width: 100%; }

/* Bankroll result */
.br-verdict { border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); border: 1px solid var(--border); }
.br-verdict--ok   { background: var(--felt-100); border-color: #cfe3d7; }
.br-verdict--warn { background: #fbf3e0; border-color: #ecdcb4; }
.br-verdict--bad  { background: #fbe9e7; border-color: #f0cfca; }
.br-verdict h3 { margin: 0 0 var(--s-1); font-size: var(--fs-h3); }
.br-verdict--ok h3   { color: var(--felt-700); }
.br-verdict--warn h3 { color: #8a6d1a; }
.br-verdict--bad h3  { color: var(--chip-red-d); }
.br-verdict p { margin: 0; color: var(--ink); font-size: var(--fs-small); }
.br-stats { list-style: none; margin: 0; padding: 0; }
.br-stats li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.br-stats li:last-child { border-bottom: 0; }
.br-stats .k { color: var(--ink-soft); }
.br-stats .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.btn--calc { background: var(--felt-700); color: #fff; }
.btn--calc:hover { background: var(--felt-900); color: #fff; }
.btn--calc:disabled { opacity: .6; cursor: default; }

/* Results */
.eq { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.eq-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.eq-big { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--felt-700); line-height: 1; }
.eq-sub { color: var(--ink-soft); font-size: var(--fs-small); }
.eq-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; background: var(--card-alt); }
.eq-bar__win { background: var(--felt-500); }
.eq-bar__tie { background: var(--gold); }
.eq-bar__loss { background: #c9b8a8; }
.eq-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; font-size: var(--fs-small); }
.eq-legend b { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: var(--s-1); vertical-align: middle; }
.k-win { background: var(--felt-500); } .k-tie { background: var(--gold); } .k-loss { background: #c9b8a8; }
.eq-note { font-size: 0.8rem; color: var(--ink-faint); margin: var(--s-3) 0 0; }
.eq-warn { color: var(--chip-red); font-weight: 600; margin: 0; }

@media (max-width: 420px) {
  .cslot { width: 40px; height: 54px; }
  .card { font-size: 0.7rem; }
}

/* ---- Pokerquiz --------------------------------------------------------- */
.quiz__meta { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; margin-bottom: var(--s-3); }
.quiz__q { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--felt-700); margin: 0 0 var(--s-4); }
.quiz__options { display: flex; flex-direction: column; gap: var(--s-2); }
.quiz-opt {
  text-align: left; width: 100%; font: inherit; cursor: pointer;
  background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); color: var(--ink); display: flex; align-items: center; gap: var(--s-3);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--felt-500); background: var(--felt-100); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-correct { background: var(--felt-100); border-color: var(--felt-500); color: var(--felt-700); font-weight: 700; }
.quiz-opt.is-wrong { background: #fbe9e7; border-color: #f0cfca; color: var(--chip-red-d); }
.quiz-opt__mark { flex: 0 0 auto; font-weight: 700; }
.quiz__explain { margin-top: var(--s-4); background: var(--felt-100); border: 1px solid #cfe3d7; border-left: 4px solid var(--felt-500); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); }
.quiz__actions { margin-top: var(--s-4); display: flex; justify-content: flex-end; }
.quiz-progress { height: 6px; background: var(--card-alt); border-radius: 999px; overflow: hidden; margin-bottom: var(--s-4); }
.quiz-progress span { display: block; height: 100%; background: var(--gold); transition: width .25s ease; }
.quiz__result { text-align: center; padding: var(--s-4) 0; }
.quiz__score { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--felt-700); line-height: 1; }
.quiz__verdict { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); margin: var(--s-2) 0; }