/* ---------------------------------------------------------------
   Statistics Genie
   Sits on genie.css, which supplies the bar, buttons and tokens.
   Only what is genuinely different is here.
   --------------------------------------------------------------- */
.sg-grid{display:grid;grid-template-columns:1fr 20rem;gap:1.6rem;align-items:start}
@media(max-width:900px){.sg-grid{grid-template-columns:1fr}}

.sg-card{background:#fff;border:1px solid var(--rule,#DCE2EC);border-radius:.9rem;
  padding:1.2rem 1.4rem;margin:0 0 1.1rem}
.sg-card h2{font-size:1.05rem;margin:0 0 .8rem}
.sg-label{display:block;font-weight:600;font-size:.92rem;margin:0 0 .5rem}
.sg-label span{display:block;font-weight:400;color:var(--muted,#5C6779);font-size:.83rem;margin-top:.1rem}
.sg textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--rule,#DCE2EC);border-radius:.5rem;
  font:.92rem/1.6 ui-monospace,Menlo,monospace;resize:vertical}

.sg-drop{border:2px dashed var(--rule,#DCE2EC);border-radius:.7rem;padding:1rem;text-align:center;
  cursor:pointer;margin-top:.7rem;transition:border-color .15s,background .15s}
.sg-drop:hover,.sg-drop.over{border-color:var(--red,#cc0000);background:#fff8f8}
.sg-drop b{display:block;font-size:.92rem}
.sg-drop span{display:block;font-size:.8rem;color:var(--muted,#5C6779)}
.sg-status{color:var(--muted,#5C6779);font-size:.85rem;margin:.5rem 0 0;min-height:1.2em}

.sg-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.sg-inline{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem}
.sg-inline select,.sg-inline input{padding:.35rem .5rem;border:1px solid var(--rule,#DCE2EC);
  border-radius:.35rem;font:inherit}

.sg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;margin:0 0 .9rem}
.sg-opts label{display:block;font-size:.86rem;font-weight:600}
.sg-opts label.cb{display:flex;align-items:center;gap:.4rem;font-weight:400}
.sg-opts input,.sg-opts select{width:100%;padding:.45rem .6rem;margin-top:.2rem;
  border:1px solid var(--rule,#DCE2EC);border-radius:.4rem;font:inherit}
.sg-opts label.cb input{width:auto;margin:0}

.sg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem .9rem;margin:0 0 .8rem}
.sg-stats div{border-top:1px solid var(--rule,#DCE2EC);padding-top:.4rem}
.sg-stats dt{font-size:.76rem;color:var(--muted,#5C6779);letter-spacing:.04em}
.sg-stats dd{margin:0;font:600 1.02rem ui-monospace,Menlo,monospace}
.sg-stats dd.sig{color:var(--red,#cc0000)}
.sg-stats dd.eq{font-size:.9rem}

.sg-note{font-size:.85rem;color:var(--muted,#5C6779);margin:.6rem 0 0;line-height:1.7}
.sg-verdict{margin-top:1rem;padding:.9rem 1.1rem;background:#f8fafc;border-left:3px solid var(--navy,#0B2545);
  border-radius:.4rem;font-size:.93rem;line-height:1.75}
.sg-hint{background:#f8fafc}
.sg-assume .a-warn{color:#b45309;margin:.4rem 0;font-size:.9rem;line-height:1.7}
.sg-assume .a-note{color:var(--muted,#5C6779);margin:.4rem 0;font-size:.9rem}
.sg-assume .a-ok{color:#047857;margin:.4rem 0;font-size:.9rem}
.a-warn{color:#b45309;font-size:.88rem;line-height:1.7}
.bad{color:var(--red,#cc0000);font-weight:600}

.sg-chart{width:100%;height:auto;margin-top:.8rem;display:block}
.sg-chart .ax{font:10px ui-monospace,Menlo,monospace;fill:#64748b}

.sg-side{background:#fff;border:1px solid var(--rule,#DCE2EC);border-radius:.9rem;
  padding:1.1rem 1.3rem;margin:0 0 1rem}
.sg-side h2{font-size:.95rem;margin:0 0 .6rem}
.sg-side ol{margin:0;padding-left:1.1rem;font-size:.88rem;line-height:1.8}
.sg-side p{font-size:.88rem;line-height:1.75;color:var(--muted,#5C6779);margin:0}
.sg-dout dl{margin:.8rem 0 0}
.sg-dout div{display:flex;justify-content:space-between;gap:.6rem;border-top:1px solid var(--rule,#DCE2EC);
  padding:.35rem 0}
.sg-dout dt{font-size:.8rem;color:var(--muted,#5C6779)}
.sg-dout dd{margin:0;font:600 .86rem ui-monospace,Menlo,monospace}
.mg-btn.small{padding:.35rem .85rem;font-size:.84rem}

/* Practice */
.sg-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.4rem}
.sg-topic{display:flex;align-items:center;gap:.45rem;font-size:.9rem;padding:.35rem .1rem}
.sg-q .sg-qhead{display:flex;justify-content:space-between;font-size:.8rem;
  color:var(--muted,#5C6779);margin-bottom:.6rem}
.sg-topictag{font:700 10px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red,#cc0000)}
.sg-prompt{font-size:1.02rem;line-height:1.75;margin:0 0 .8rem}
.sg-data{background:#f8fafc;border:1px solid var(--rule,#DCE2EC);border-radius:.5rem;
  padding:.8rem 1rem;font:.88rem/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;margin:0 0 1rem}
.sg-answer{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.sg-answer label{font-size:.86rem;font-weight:600}
.sg-answer input{display:block;margin-top:.25rem;padding:.5rem .7rem;width:10rem;
  border:1px solid var(--rule,#DCE2EC);border-radius:.4rem;font:1rem ui-monospace,Menlo,monospace}
.sg-unit{color:var(--muted,#5C6779);font-size:.85rem;padding-bottom:.6rem}
.sg-verdict.right{border-left-color:#047857;background:#ecfdf5}
.sg-verdict.wrong{border-left-color:#b45309;background:#fffbeb}
.sg-working{margin-top:.8rem;padding:.9rem 1.1rem;background:#f8fafc;border-radius:.5rem;font-size:.9rem}
.sg-working b{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted,#5C6779);margin-bottom:.4rem}
.sg-working p{margin:0;line-height:1.8}
.sg-big{font:700 2rem Sora,system-ui;color:var(--navy,#0B2545);margin:.3rem 0}
.mg-btn.ghost{background:none;color:var(--navy,#0B2545);border:1px solid var(--rule,#DCE2EC)}

/* Teacher */
.sg-topicrow{display:grid;grid-template-columns:11rem 1fr 3rem;gap:.6rem;align-items:center;
  margin:0 0 .7rem}
.sg-topicname{font-size:.9rem;font-weight:600}
.sg-bar{background:#eef2f6;border-radius:99px;height:.55rem;overflow:hidden}
.sg-bar span{display:block;height:100%;background:#047857;border-radius:99px}
.sg-topicpct{font:600 .88rem ui-monospace,monospace;text-align:right}
.sg-topicpct.low{color:#b91c1c} .sg-topicpct.mid{color:#b45309}
.sg-topichelp{grid-column:2/4;font-size:.76rem;color:var(--muted,#5C6779);margin-top:-.4rem}
.sg-table{width:100%;border-collapse:collapse;font-size:.9rem}
.sg-table th{text-align:left;font:600 .74rem ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#5C6779);padding:.4rem .5rem;
  border-bottom:1px solid var(--rule,#DCE2EC)}
.sg-table td{padding:.45rem .5rem;border-bottom:1px solid #f1f5f9}
.sg-table td.sub{color:var(--muted,#5C6779);font-size:.84rem}

/* The working out */
.sg-show{margin-top:1rem;border-top:1px solid var(--rule,#DCE2EC);padding-top:.8rem}
.sg-show summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--red,#cc0000)}
.sg-steps{list-style:decimal;padding-left:1.3rem;margin:1rem 0 0}
.sg-steps li{margin:0 0 1.2rem}
.sg-stepname{font-weight:700;font-size:.94rem;color:var(--navy,#0B2545);margin-bottom:.3rem}
.sg-formula{font:.92rem ui-monospace,Menlo,monospace;background:#f1f5f9;padding:.4rem .7rem;
  border-radius:.35rem;display:inline-block;margin-bottom:.3rem}
.sg-sub{font:.87rem/1.7 ui-monospace,Menlo,monospace;color:#334155;margin-bottom:.25rem;
  word-break:break-word}
.sg-result{font:600 .95rem ui-monospace,Menlo,monospace;color:var(--navy,#0B2545);
  border-left:3px solid var(--red,#cc0000);padding-left:.7rem;margin:.3rem 0}
.sg-why{font-size:.86rem;line-height:1.75;color:var(--muted,#5C6779);margin-top:.35rem}

/* A term you can ask about */
.sg-term{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:help;
  border-bottom:1px dotted var(--red,#cc0000)}
.sg-term:hover{color:var(--red,#cc0000)}
#sg-termbox{position:fixed;inset:0;background:rgba(2,8,23,.5);display:flex;align-items:center;
  justify-content:center;padding:1.2rem;z-index:500}
#sg-termbox[hidden]{display:none}
.sg-termcard{background:#fff;border-radius:1rem;padding:1.6rem 1.8rem;max-width:32rem;
  position:relative;max-height:86vh;overflow:auto}
.sg-termcard h3{margin:0 0 .6rem;font-size:1.2rem;color:var(--navy,#0B2545)}
.sg-termcard p{margin:0 0 .8rem;line-height:1.8;font-size:.93rem}
.sg-plain{font-size:1rem !important}
.sg-for{color:#334155}
.sg-watch{background:#fffbeb;border-left:3px solid #f59e0b;padding:.7rem .9rem;border-radius:.35rem;
  color:#78350f}
.sg-close{position:absolute;top:.7rem;right:.9rem;background:none;border:0;font-size:1.5rem;
  line-height:1;cursor:pointer;color:var(--muted,#5C6779)}