/* Payoff table solver, the workbench of the /payoff-table-calculator page.
   Shares the tokens and the visual grammar of the AHP, certainty-equivalent and
   Markov tools so the family reads as one. Scoped under .pt-* so nothing here
   leaks into the surrounding page. */

/* The workbench escapes the article container and uses the window width,
   controls left and live charts right, like the AHP calculator. The controls
   pane is sticky (the results column is the tall one), so the table stays in
   reach while reading the rules. */
.pt-workbench { width: 100%; max-width: 1840px; margin: 0 auto; padding: 0 clamp(16px, 2.5vw, 48px); }
/* The hero uses the width instead of leaving a void: title left, lede and CTA right. */
.pt-hero-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--space-6) 64px; align-items: end; }
.pt-main-grid { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: var(--space-8) var(--space-10); align-items: start; }
.pt-controls { min-width: 0; position: sticky; top: var(--space-6); }
.pt-results { min-width: 0; }

.pt-card {
    background: var(--bg-surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-3);
    padding: var(--space-8);
    box-shadow: var(--shadow-1);
}

.pt-step { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--rule-1); }
.pt-step:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* Sentence case, never capitals: the label reads as a label through the numbered
   pill, the amber, the weight and the step rule above it. */
.pt-block-title {
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--amber-700); margin: 0 0 var(--space-4) 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.pt-block-title .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-pill);
    background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-100);
    font-size: var(--text-sm); font-family: var(--font-serif); font-weight: 500;
}

/* ---- profit / cost toggle ---- */
.pt-modebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.pt-modes { display: inline-flex; border: 1px solid var(--rule-3); border-radius: var(--radius-2); overflow: hidden; }
.pt-mode-btn {
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--fg-2);
    background: var(--bg-surface); border: 0; padding: 8px 16px; cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.pt-mode-btn + .pt-mode-btn { border-left: 1px solid var(--rule-3); }
.pt-mode-btn:not(.active):hover { background: var(--slate-50); color: var(--fg-1); }
.pt-mode-btn.active { background: var(--navy-900); color: var(--fg-on-dark); box-shadow: inset 0 0 0 1px var(--navy-900); }
.pt-mode-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0; }

/* ---- the payoff table ---- */
.pt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pt-table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); }
table.pt-table th, table.pt-table td { border: 1px solid var(--rule-2); padding: 4px; text-align: center; min-width: 92px; }
table.pt-table thead th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; font-size: var(--text-xs); vertical-align: top; }
table.pt-table thead .pt-corner {
    min-width: 128px; text-align: left; color: var(--fg-3); font-weight: 500; padding: 8px;
    background: var(--bg-sunken); font-size: var(--text-xs);
}
table.pt-table tbody th { background: var(--bg-sunken); padding: 4px; min-width: 128px; }
table.pt-table tbody tr:hover td { background: var(--amber-50); }

.pt-head-cell { display: flex; align-items: center; gap: 4px; }
.pt-name-input {
    flex: 1 1 auto; min-width: 0; width: 100%;
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; color: var(--fg-1);
    background: var(--bg-page); border: 1px solid var(--rule-1); border-radius: var(--radius-1);
    padding: 6px 7px; text-align: left;
}
.pt-name-input:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
.pt-num {
    width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-1);
    background-color: var(--bg-page); border: 1px solid var(--rule-1); border-radius: var(--radius-1);
    padding: 6px; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.pt-num::-webkit-outer-spin-button, .pt-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-num:hover { border-color: var(--rule-3); }
.pt-num:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
/* Dashed, not just red: invalid must read without color vision too. */
.pt-num.bad { border-color: var(--danger); border-style: dashed; }

.pt-x {
    flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--rule-3);
    background: var(--bg-surface); color: var(--fg-3); border-radius: var(--radius-1);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
    transition: all var(--dur-fast) var(--ease-out);
}
.pt-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.pt-x:disabled { opacity: .3; cursor: not-allowed; }

.pt-table-foot { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.pt-mini { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--navy-600); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.pt-mini:hover:not(:disabled) { color: var(--amber-600); }
.pt-mini:disabled { opacity: .4; cursor: not-allowed; }
.pt-hint { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: var(--space-3) 0 0 0; line-height: var(--lh-relaxed); max-width: 74ch; }

/* ---- probabilities ---- */
.pt-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--fg-1); cursor: pointer; }
.pt-toggle input { accent-color: var(--amber-600); }
.pt-prob-body { margin-top: var(--space-4); }
.pt-psum { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); margin-top: var(--space-3); }
.pt-psum.bad { color: var(--danger); }
.pt-psum.ok { color: var(--success); }

/* ---- Hurwicz slider ---- */
.pt-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.pt-slider-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
.pt-slider-val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--amber-700); font-weight: 600; }
.pt-slider-row input[type="range"] { width: 100%; accent-color: var(--amber-500); cursor: pointer; margin-top: var(--space-2); }
.pt-ruler { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); margin-top: 4px; padding: 0 2px; }

/* ---- results ---- */
.pt-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.pt-rule {
    border: 1px solid var(--rule-2); border-radius: var(--radius-2);
    padding: var(--space-4) var(--space-5); background: var(--bg-page);
}
.pt-rule.wide { grid-column: 1 / -1; }
.pt-rule h4 {
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1);
    margin: 0 0 2px 0;
}
.pt-rule-sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--space-3) 0; line-height: var(--lh-relaxed); }
.pt-verdict { font-family: var(--font-sans); font-size: var(--text-md); color: var(--fg-1); margin: 0; line-height: var(--lh-relaxed); }
.pt-verdict .pick { font-weight: 600; color: var(--navy-900); }
.pt-verdict .val { font-family: var(--font-mono); color: var(--amber-700); font-weight: 600; }

.pt-work { margin-top: var(--space-3); }
.pt-work .pt-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); margin: 2px 0; line-height: var(--lh-relaxed); }
.pt-work .pt-line b { color: var(--fg-1); }
.pt-work .pt-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--space-2) 0; line-height: var(--lh-relaxed); }
.pt-work .pt-formula {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--navy-900);
    background: var(--bg-sunken); border: 1px solid var(--rule-1); border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2) 0; display: inline-block;
}
/* ---- the per-rule column chart ---- */
.pt-chart { display: block; width: 100%; height: auto; margin: 0 0 var(--space-3) 0; }
.pt-chart .axis { stroke: var(--rule-2); stroke-width: 1; }
.pt-chart .pt-bar path, .pt-chart .pt-bar rect { fill: var(--navy-500); }
.pt-chart .pt-bar.win path, .pt-chart .pt-bar.win rect { fill: var(--amber-500); }
.pt-chart .pt-bar:hover path, .pt-chart .pt-bar:hover rect { opacity: .82; }
.pt-chart text { text-anchor: middle; }
.pt-chart .val { font-family: var(--font-mono); font-size: 11px; fill: var(--fg-2); }
.pt-chart .name { font-family: var(--font-sans); font-size: 10px; fill: var(--fg-3); }
.pt-chart .pt-bar.win .val, .pt-chart .pt-bar.win .name { font-weight: 600; fill: var(--fg-1); }

/* The wrapper is a tab stop (tabindex 0) so keyboard users can scroll wide matrices. */
.pt-mat-wrap { overflow-x: auto; margin: var(--space-2) 0; }
.pt-mat-wrap:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
table.pt-mat { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); }
table.pt-mat th, table.pt-mat td { border: 1px solid var(--rule-2); padding: 3px 8px; text-align: center; color: var(--fg-2); }
table.pt-mat thead th, table.pt-mat tbody th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; }
table.pt-mat td.pt-win { background: var(--amber-50); color: var(--fg-1); font-weight: 600; box-shadow: inset 0 0 0 1px var(--amber-100); }

/* The next step, in the results' own typography: no panel, no tint, nothing
   that reads as an advertisement. Rendered only when there are results. */
.pt-next {
    margin: var(--space-6) 0 0 0;
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-2);
    line-height: var(--lh-relaxed); max-width: 70ch;
}
.pt-next a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
.pt-next a:hover { color: var(--navy-900); }

.pt-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }
.pt-actions .btn-secondary { font-size: var(--text-sm); }
.pt-copied { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--success); }

.pt-error {
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--danger);
    background: rgba(156, 59, 59, .08); border: 1px solid rgba(156, 59, 59, .3);
    border-radius: var(--radius-2); padding: var(--space-3) var(--space-4); margin: 0;
}

.pt-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the article sections below the workbench (mirrors the AHP page) ---- */
.pt-article-wrap {
    max-width: 920px; margin: 0 auto;
    font-family: var(--font-sans); font-size: var(--text-md);
    line-height: var(--lh-relaxed); color: var(--fg-2);
}
.pt-article-wrap a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
.pt-article-wrap a:hover { color: var(--navy-900); }
.pt-cta-list { columns: 2; column-gap: var(--space-10); }
.pt-faq-item { border-top: 1px solid var(--rule-2); padding: var(--space-5) 0; }
.pt-faq-item:first-child { border-top: 0; }
.pt-faq-q { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--navy-900); margin: 0 0 var(--space-2) 0; }
.pt-faq-a { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; max-width: 72ch; }

@media (max-width: 880px) {
    .pt-card { padding: var(--space-5); }
    .pt-hero-row { grid-template-columns: 1fr; }
    .pt-main-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .pt-controls { position: static; }
    .pt-results { padding-top: var(--space-6); border-top: 1px solid var(--rule-1); }
    .pt-rules { grid-template-columns: minmax(0, 1fr); }
    .pt-cta-list { columns: 1; }
}

/* Phone widths: the two mode labels cannot share a row, so the toggle stacks. */
@media (max-width: 460px) {
    .pt-card { padding: var(--space-4); }
    .pt-modes { display: flex; flex-direction: column; align-items: stretch; }
    .pt-mode-btn + .pt-mode-btn { border-left: 0; border-top: 1px solid var(--rule-3); }
    table.pt-table th, table.pt-table td { min-width: 84px; }
    table.pt-table thead .pt-corner, table.pt-table tbody th { min-width: 110px; }
}