/* ==========================================================================
   Betting tools - /tools/accumulator/, /tools/odds-converter/,
   /tools/permutations-calculator/
   ==========================================================================

   Requires cp-tokens.css and cp-components.css. Linked by the three tool
   pages when $cpTheme is on, and everything in here is scoped under
   .cp-tool, the wrapper each of them puts around its content.

   The pages used to carry their own palettes - a blue page header, a purple
   results block, pastel outcome rows, Bootstrap's blue/cyan/yellow card
   headers - none of which followed the theme. This file replaces all of
   that with the tokens, so each rule is written once and is right in both
   themes.

   Bootstrap's form controls are kept: they already read --bs-* from the
   bridge in cp-components.css. What Bootstrap hardcodes is the blue on
   their focus and checked states, which is re-pointed at the accent here.
   ========================================================================== */

.cp-tool {
    display: grid;
    gap: var(--cp-space-5);
    padding-bottom: var(--cp-space-7);
}

.cp-tool > .cp-pagehead { margin-bottom: 0; }

/* --- Section titles ----------------------------------------------------- */

.cp .cp-tool__title {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    margin: 0;
    font-size: var(--cp-text-base);
    font-weight: 700;
    letter-spacing: var(--cp-track-h3);
    line-height: 1.3;
}

/* A numbered step in front of a title: 1 Settings, 2 Selections... */
.cp-tool__step {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cp-accent-dim);
    border: 1px solid var(--cp-accent-line);
    color: var(--cp-accent-ink);
    font-size: var(--cp-text-xs);
    font-weight: 800;
}

.cp-tool .cp-panel__head { flex-wrap: wrap; }
.cp-tool .cp-panel__body > :last-child { margin-bottom: 0; }

/* The hint line under a panel title. */
.cp-tool__hint {
    color: var(--cp-muted);
    font-size: var(--cp-text-sm);
    margin: 0 0 var(--cp-space-4);
}

/* A suggested choice among quiet buttons - the Lucky bet that matches the
   number of selections. */
.cp-tool .cp-btn.is-suggested {
    border-color: var(--cp-accent-line);
    color: var(--cp-accent-ink);
}

.cp-tool .cp-btn:disabled { opacity: .6; cursor: progress; }

/* --- Form controls ------------------------------------------------------ */

.cp-tool .form-label {
    color: var(--cp-muted);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    margin-bottom: 6px;
}

.cp-tool .form-control:focus,
.cp-tool .form-select:focus,
.cp-tool .form-check-input:focus {
    border-color: var(--cp-accent-line);
    box-shadow: 0 0 0 3px rgba(var(--cp-accent-rgb), .25);
}

.cp-tool .input-group-text {
    background: var(--cp-surface-2);
    border-color: var(--cp-line);
    color: var(--cp-muted);
}

/* --cp-line is too faint to find an unticked box or an off switch by. */
.cp-tool .form-check-input {
    background-color: var(--cp-bg);
    border-color: var(--cp-muted);
}

.cp-tool .form-check-input:checked {
    background-color: var(--cp-accent);
    border-color: var(--cp-accent);
}

/* Bootstrap draws the tick and the switch knob in white, which disappears on
   the lime. Redrawn in --cp-on-accent (#152111 - a data URI cannot read a
   custom property). colour-ok: ink on the accent fill is fixed in both
   themes. */
.cp-tool .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23152111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.cp-tool .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23152111'/%3e%3c/svg%3e");
}

.cp-tool .form-control.is-invalid { border-color: var(--cp-bad); }
.cp-tool .form-control.is-valid   { border-color: var(--cp-accent-line); }

/* Status text. */
.cp-tool .is-up   { color: var(--cp-ok); }
.cp-tool .is-down { color: var(--cp-bad); }
.cp-tool .cp-tile.is-up b   { color: var(--cp-ok); }
.cp-tool .cp-tile.is-down b { color: var(--cp-bad); }

/* An error message for the whole tool. */
.cp-tool__error {
    border: 1px solid var(--cp-bad);
    border-radius: var(--cp-radius);
    background: rgba(var(--cp-bad-rgb), .08);
    color: var(--cp-bad);
    padding: var(--cp-space-3) var(--cp-space-4);
    font-size: var(--cp-text-sm);
}

/* A validation message under a field. */
.cp-tool__fielderror {
    color: var(--cp-bad);
    font-size: var(--cp-text-sm);
    margin-top: var(--cp-space-1);
}

/* Results stay out of the way until there is something to show. */
.cp-tool [hidden] { display: none !important; }

/* --- Bootstrap accordion ------------------------------------------------ */
/* Its open state is Bootstrap's pale blue. */

.cp-tool .accordion {
    --bs-accordion-bg:                var(--cp-surface);
    --bs-accordion-color:             var(--cp-ink);
    --bs-accordion-border-color:      var(--cp-line);
    --bs-accordion-btn-bg:            var(--cp-surface);
    --bs-accordion-btn-color:         var(--cp-ink);
    --bs-accordion-active-bg:         var(--cp-accent-dim);
    --bs-accordion-active-color:      var(--cp-ink);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--cp-accent-rgb), .25);
    --bs-accordion-border-radius:     var(--cp-radius);
    --bs-accordion-inner-border-radius: calc(var(--cp-radius) - 1px);
}

.cp-tool .accordion-body { background: var(--cp-surface-2); padding: var(--cp-space-3); }

/* Bootstrap's chevron is an image with its colour baked in. Used as a mask
   instead, so the colour comes from the theme. */
.cp-tool .accordion-button::after {
    background-image: none;
    background-color: var(--cp-muted);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
}

.cp-tool .accordion-button:not(.collapsed)::after { background-color: var(--cp-accent-ink); }

/* .cp h3 would give the header a heading's size and margin. */
.cp-tool .accordion-header { margin: 0; font-size: inherit; letter-spacing: normal; }

/* ==========================================================================
   Accumulator calculator
   ========================================================================== */

.acc-form {
    display: grid;
    gap: var(--cp-space-5);
}

/* --- Selections table --------------------------------------------------- */
/* Each row carries its outcome as a class. The outcome sets one tone, and
   the stripe, the row number, the tint and the outcome text all read it. */

.acc-sel tr                { --acc-tone: var(--cp-muted); --acc-tone-rgb: var(--cp-muted-rgb); }
.acc-sel tr.outcome-win    { --acc-tone: var(--cp-ok);    --acc-tone-rgb: var(--cp-ok-rgb); }
.acc-sel tr.outcome-place  { --acc-tone: var(--cp-warn);  --acc-tone-rgb: var(--cp-warn-rgb); }
.acc-sel tr.outcome-lose   { --acc-tone: var(--cp-bad);   --acc-tone-rgb: var(--cp-bad-rgb); }

.cp .acc-sel { margin: 0; }

.cp .acc-sel th,
.cp .acc-sel td {
    padding: 8px 10px;
    vertical-align: middle;
}

.cp .acc-sel th {
    background: var(--cp-surface-2);
    color: var(--cp-muted);
    font-size: var(--cp-text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cp .acc-sel tbody td {
    background: rgba(var(--acc-tone-rgb), .07);
    transition: background-color .2s;
}

.cp .acc-sel tbody td:first-child {
    width: 48px;
    text-align: center;
    font-weight: 800;
    color: var(--acc-tone);
    box-shadow: inset 3px 0 0 var(--acc-tone);
}

.acc-sel .outcome-select,
.acc-sel .acc-outcome {
    color: var(--acc-tone);
    font-weight: 650;
}

.cp .acc-sel th:nth-child(3) { width: 130px; }
.cp .acc-sel th:nth-child(4) { width: 150px; }

.acc-sel .outcome-select { min-width: 110px; }
.acc-sel input[name^="name"] { min-width: 150px; }
.acc-sel .odds-input { min-width: 80px; }

/* On a phone the four columns do not fit, so each entry row stacks: the
   name on top, odds and outcome side by side beneath it. The inputs carry
   aria-labels, so hiding the header row loses nothing. */
@media (max-width: 600px) {
    .acc-form .acc-sel thead { display: none; }

    .acc-form .acc-sel tbody tr {
        display: grid;
        grid-template-columns: 36px 1fr 1fr;
        border-bottom: 1px solid var(--cp-line);
    }

    .cp .acc-form .acc-sel tbody td {
        border: 0;
        padding: 6px;
    }

    .cp .acc-form .acc-sel tbody td:first-child {
        grid-row: span 2;
        width: auto;
        display: grid;
        place-items: center;
    }

    .acc-form .acc-sel tbody td:nth-child(2) { grid-column: 2 / 4; padding-bottom: 0; }

    .acc-form .acc-sel input[name^="name"],
    .acc-form .acc-sel .odds-input,
    .acc-form .acc-sel .outcome-select { min-width: 0; }

    .acc-form .cp-tablewrap {
        border: 1px solid var(--cp-line);
        border-radius: var(--cp-radius);
    }
}

/* --- Bet types grid ----------------------------------------------------- */

.acc-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-space-2);
    margin-bottom: var(--cp-space-4);
}

.acc-quick__label {
    color: var(--cp-muted);
    font-size: var(--cp-text-sm);
    margin-right: var(--cp-space-1);
}

.acc-perms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: var(--cp-space-3);
}

.acc-perm {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    background: var(--cp-surface-2);
    padding: var(--cp-space-3);
    transition: border-color .15s, background-color .15s;
}

.acc-perm:has(.perm-checkbox:checked) {
    border-color: var(--cp-accent-line);
    background: var(--cp-accent-dim);
}

.acc-perm__head {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    margin-bottom: var(--cp-space-2);
    cursor: pointer;
}

.acc-perm__head .form-check-input { margin: 0; width: 20px; height: 20px; flex: none; }
.acc-perm__head b { color: var(--cp-ink); }
.acc-perm__head small { margin-left: auto; color: var(--cp-muted); font-size: var(--cp-text-xs); }

/* --- Stake bar ---------------------------------------------------------- */

.acc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cp-space-4) var(--cp-space-5);
    padding: var(--cp-space-4) 22px;
}

.acc-bar__total b {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: var(--cp-track-h2);
    line-height: 1.1;
    color: var(--cp-ink);
}

.acc-bar__total small { color: var(--cp-muted); font-size: var(--cp-text-sm); }

.acc-bar__split { flex: 1 1 260px; max-width: 340px; }

.acc-bar__go {
    display: flex;
    gap: var(--cp-space-2);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .acc-bar__split { max-width: none; }
    .acc-bar__go,
    .acc-bar__go .cp-btn { width: 100%; }
}

/* --- Results ------------------------------------------------------------ */

.acc-results {
    display: grid;
    gap: var(--cp-space-5);
    scroll-margin-top: var(--cp-space-5);
}

.cp .acc-results table { margin: 0; }

.acc-breakdown__sum {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--cp-space-1) var(--cp-space-4);
    width: 100%;
    margin-right: var(--cp-space-3);
    font-size: var(--cp-text-sm);
}

.acc-breakdown__sum b { font-size: var(--cp-text-base); }
.acc-breakdown__sum span { color: var(--cp-muted); }
.acc-breakdown__sum span .is-up,
.acc-breakdown__sum span .is-down { font-weight: 650; }

.acc-bets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--cp-space-2);
}

.acc-bet {
    border: 1px solid var(--cp-line);
    border-left: 3px solid var(--cp-bad);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface);
    padding: var(--cp-space-2) var(--cp-space-3);
    font-size: var(--cp-text-sm);
}

.acc-bet.is-up { border-left-color: var(--cp-ok); }
.acc-bet__legs { color: var(--cp-muted); font-size: var(--cp-text-xs); }
.acc-bet__ret  { font-weight: 700; color: var(--cp-bad); }
.acc-bet.is-up .acc-bet__ret { color: var(--cp-ok); }

/* ==========================================================================
   Odds converter
   ========================================================================== */

.oc-grid {
    display: grid;
    gap: var(--cp-space-5);
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
}

.oc-frac {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--cp-space-3);
    margin-bottom: var(--cp-space-4);
}

.oc-frac span { font-size: var(--cp-text-lg); font-weight: 700; color: var(--cp-muted); }

.oc-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--cp-space-4);
}

/* The quick-select prices. Small enough that sixty-odd of them wrap tidily. */
.cp .oc-quick .cp-btn { min-height: 32px; padding: 4px 10px; font-size: var(--cp-text-xs); }
.cp .oc-quick .cp-btn.is-active {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: var(--cp-on-accent);
}

.oc-result {
    margin-top: var(--cp-space-4);
    padding-top: var(--cp-space-4);
    border-top: 1px solid var(--cp-line);
}

.oc-result .cp-tile { text-align: center; }
.cp .oc-result .cp-tile b { font-size: 26px; }

/* The answer the panel exists to give - the nearest bookmaker price, the
   decimal - is the highlighted tile. */
.cp .oc-result .cp-tile.is-active b { color: var(--cp-accent-ink); }

.oc-note { margin-top: var(--cp-space-3); font-size: var(--cp-text-sm); color: var(--cp-muted); }

/* ==========================================================================
   Permutations calculator
   ========================================================================== */

.pc-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-5);
}

.pc-hero img { width: 150px; height: auto; flex: none; }

@media (max-width: 600px) {
    .pc-hero img { width: 96px; }
}

.cp .pc-section > h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    margin-bottom: var(--cp-space-4);
}

.pc-define {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-5);
    align-items: center;
}

.pc-define + .pc-define { margin-top: var(--cp-space-5); }
.pc-define img { width: 100%; height: auto; border-radius: var(--cp-radius); }

@media (max-width: 768px) {
    .pc-define { grid-template-columns: 1fr; }
}

.cp .pc-define h3 { margin-bottom: var(--cp-space-3); }

/* A definition, a formula: a surface with an accent rule down the side. */
.pc-note {
    border: 1px solid var(--cp-line);
    border-left: 3px solid var(--cp-accent-line);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    padding: var(--cp-space-4) var(--cp-space-5);
    margin: 0 0 var(--cp-space-4);
}

.pc-note > :last-child { margin-bottom: 0; }
.pc-note ul { padding-left: 20px; }

.cp .pc-formula {
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-sm);
    color: var(--cp-muted);
}

.cp .pc-formula b {
    display: block;
    font-size: var(--cp-text-base);
    color: var(--cp-ink);
    margin-bottom: var(--cp-space-1);
}

.cp .pc-section h3 { font-size: var(--cp-text-lg); margin-top: var(--cp-space-5); }

/* --- Examples ----------------------------------------------------------- */

.pc-examples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--cp-space-3);
}

.cp .pc-example {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-2);
    width: 100%;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface);
    color: var(--cp-muted);
    padding: var(--cp-space-4) var(--cp-space-5);
    font: inherit;
    font-size: var(--cp-text-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
}

.cp .pc-example:hover { border-color: var(--cp-accent-line); }

.cp .pc-example b {
    color: var(--cp-ink);
    font-size: var(--cp-text-base);
}

.cp .pc-example strong { color: var(--cp-ink); }
.pc-example .cp-badge { align-self: flex-start; font-size: var(--cp-text-sm); }
.pc-example ul { padding-left: 18px; margin: 0; }
.pc-example p { margin: 0; }

/* --- Calculator --------------------------------------------------------- */

.pc-calc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-5);
}

@media (max-width: 768px) {
    .pc-calc { grid-template-columns: 1fr; }
}

/* Permutation / Combination: a two-way segmented choice. */
.pc-seg {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    overflow: hidden;
}

.pc-seg input { position: absolute; opacity: 0; pointer-events: none; }

.pc-seg label {
    padding: 10px 12px;
    text-align: center;
    color: var(--cp-muted);
    font-weight: 650;
    font-size: var(--cp-text-sm);
    line-height: 1.3;
    cursor: pointer;
}

.pc-seg label + input + label { border-left: 1px solid var(--cp-line); }
.pc-seg label small { display: block; font-weight: 400; font-size: var(--cp-text-xs); }
.pc-seg input:checked + label { background: var(--cp-accent); color: var(--cp-on-accent); }
.pc-seg input:focus-visible + label { outline: 3px solid var(--cp-focus); outline-offset: -3px; }

.pc-error {
    color: var(--cp-bad);
    font-size: var(--cp-text-sm);
    margin-top: var(--cp-space-1);
    display: none;
}

.pc-result {
    text-align: center;
    padding: var(--cp-space-5) var(--cp-space-4);
    border: 1px solid var(--cp-accent-line);
    border-radius: var(--cp-radius);
    background: var(--cp-accent-dim);
    margin-bottom: var(--cp-space-4);
}

.cp .pc-result b {
    display: block;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: var(--cp-track-h2);
    line-height: 1.1;
    color: var(--cp-accent-ink);
    word-break: break-word;
}

.pc-result span { color: var(--cp-muted); }

.cp .pc-results h4 {
    font-size: var(--cp-text-sm);
    font-weight: 700;
    color: var(--cp-ink);
    margin: var(--cp-space-4) 0 var(--cp-space-2);
}

.pc-results p,
.pc-results ul { color: var(--cp-muted); font-size: var(--cp-text-sm); }
.pc-results ul { padding-left: 20px; }
.cp .pc-results strong { color: var(--cp-ink); }

.pc-empty {
    text-align: center;
    color: var(--cp-muted);
    padding: var(--cp-space-7) var(--cp-space-4);
}

.pc-empty .bi { font-size: 2.5rem; }

.pc-chart { position: relative; height: 300px; }

/* The notes at the foot of the page: callouts in three tones. */
.pc-callouts { display: grid; gap: var(--cp-space-3); }
.pc-callouts .cp-callout { margin: 0; }
.cp .pc-callouts h3 { font-size: var(--cp-text-base); margin: 0 0 var(--cp-space-2); }
.pc-callouts ul { padding-left: 20px; }
.pc-callouts p:last-child, .pc-callouts ul:last-child { margin-bottom: 0; }

.cp-callout.is-warn {
    border-color: var(--cp-warn);
    background: rgba(var(--cp-warn-rgb), .08);
}

.cp-callout.is-plain {
    border-color: var(--cp-line);
    background: var(--cp-surface);
}