/* Shared chrome for the "Learning from data" widgets.
   .tt = trainer layout (question / answer / feedback / streak) — the same
   skeleton as the probability trainers, lifted out so each file stays short.
   .pw = plot widget layout (title / controls / stats / chart / note). */

/* ---------- trainers ---------- */
.tt{max-width:620px;}
.tt .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px;}
.tt h1{font-size:17px;font-weight:600;margin:0;letter-spacing:-0.01em;}
.tt .streak{font-family:var(--mono);font-size:12.5px;color:var(--ink3);white-space:nowrap;}
.tt .streak b{color:var(--amber);}
.tt .sub{color:var(--ink2);font-size:14px;margin:0 0 14px;}
.tt .ask{font-size:15px;color:var(--ink);margin:0 0 12px;line-height:1.5;}
.tt .ask b{color:var(--amber);}
.tt .ask .num,.tt .num{font-family:var(--mono);}

.tt table{border-collapse:collapse;font-family:var(--mono);font-size:14px;margin:0 0 14px;}
.tt th,.tt td{border:1px solid var(--line);padding:7px 12px;text-align:center;color:var(--ink);background:var(--card);}
.tt th{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink2);}
.tt th.story{text-align:left;font-weight:600;}
.tt .m{font-weight:700;background:var(--color-background-secondary);}
.tt td.hole{color:var(--amber);font-weight:700;background:rgba(186,117,23,0.10);border-color:var(--amber);}
.tt .setup{margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;background:var(--card);
  font-size:14px;line-height:1.6;color:var(--ink2);}
.tt .setup b{color:var(--ink);}
.tt .setup .num{font-family:var(--mono);color:var(--ink);}

.tt .answer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 4px;}
.tt .answer .lab{font-size:14px;color:var(--ink2);}
.tt input[type="number"]{width:62px;font-family:var(--mono);font-size:15px;text-align:center;
  padding:6px 4px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);}
.tt input[type="number"]:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}
.tt .slash{font-family:var(--mono);font-size:17px;color:var(--ink3);}
.tt .hintline{font-size:12.5px;color:var(--ink3);margin:2px 0 0;}

.tt .choices{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;}
.tt .choices button{font-size:14px;}
.tt .choices button.pic{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 12px 6px;}
.tt .choices button.pic svg{display:block;width:96px;height:auto;}
.tt .choices button.pic.picked-wrong{opacity:.35;}
.tt .choices button.picked-wrong{border-color:var(--line);color:var(--ink3);text-decoration:line-through;background:transparent;}
.tt .choices button.is-right{border-color:var(--amber);color:var(--amber);background:rgba(186,117,23,0.10);font-weight:600;}

.tt .fb{margin-top:12px;padding:12px 15px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);font-size:14px;line-height:1.65;color:var(--ink2);}
.tt .fb b{color:var(--ink);}
.tt .fb .num{font-family:var(--mono);}
.tt .fb.good{border-color:var(--teal);}
.tt .fb.good .mark{color:var(--teal);font-weight:700;}
.tt .fb.bad .mark{color:var(--amber);font-weight:700;}
.tt .fb table.mini{margin:10px 0 2px;font-size:13px;}
.tt .fb table.mini th,.tt .fb table.mini td{padding:5px 10px;}
.tt .fb table.mini tr.sum td{font-weight:700;background:var(--color-background-secondary);}
.tt .again{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- plot widgets ---------- */
.pw{max-width:640px;}
.pw h1{font-size:17px;font-weight:600;margin:0 0 4px;letter-spacing:-0.01em;}
.pw .sub{color:var(--ink2);font-size:14px;margin:0 0 12px;}
.pw .controls{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin:0 0 12px;}
.pw .controls label{font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:7px;}
.pw .controls label b{font-family:var(--mono);color:var(--ink);font-weight:600;min-width:2.2em;}
.pw .controls input[type="range"]{width:130px;}
.pw .controls button.on{border-color:var(--amber);color:var(--amber);background:rgba(186,117,23,0.10);}
.pw .stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:14px;color:var(--ink2);}
.pw .stats span{border:0;border-inline-start:2px solid var(--line);border-radius:0;background:transparent;padding:4px 10px;}
.pw .stats b{font-family:var(--mono);color:var(--ink);font-weight:600;}
.pw .stats .am{border-color:var(--amber);color:var(--amber);background:rgba(186,117,23,0.08);}
.pw .stats .am b{color:var(--amber);}
.pw .stats .te{border-color:var(--teal);color:var(--teal);}
.pw .stats .te b{color:var(--teal);}
.pw .stats .bl{border-color:var(--blue);color:var(--blue);}
.pw .stats .bl b{color:var(--blue);}
.pw .chart{border:1px solid var(--line);border-radius:4px;background:var(--card);}
.pw .chart+.chart{margin-top:10px;}
.pw .note{margin-top:16px;padding:0 0 0 14px;border:0;border-inline-start:2px solid var(--line);border-radius:0;
  background:var(--card);font-size:13.5px;line-height:1.55;color:var(--ink2);}
.pw .note b{font-family:var(--mono);color:var(--ink);font-weight:600;}
.pw .note i{color:var(--ink);font-style:normal;font-weight:600;}
.pw table{border-collapse:collapse;font-family:var(--mono);font-size:13px;margin:10px 0 0;}
.pw th,.pw td{border:1px solid var(--line);padding:5px 10px;text-align:center;color:var(--ink);background:var(--card);}
.pw th{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink2);}
.pw td.am{color:var(--amber);font-weight:600;}
.pw td.te{color:var(--teal);font-weight:600;}
.pw tr.m td{font-weight:700;background:var(--color-background-secondary);}

/* Keep explanations readable at the actual embedding size. */
.tt .ask, .tt .setup, .tt .fb, .pw .note { font-size: 16px; line-height: 1.65; }
.tt .sub, .pw .sub { font-size: 15px; }
.tt .hintline { font-size: 14px; }
.tt button, .pw button { min-height: 40px; }
.tt #tablebox, .tt .fb { overflow-x: auto; }
.pw .controls label { flex-wrap: wrap; }