/* Mathematics additions to the existing tutorial design. */
@import url('../../ai/assets/style.css');

.widget-controls [hidden] { display: none !important; }
.skip-link{position:fixed;top:-100px;left:1rem;z-index:2000;background:var(--white);padding:.6rem 1rem;border:2px solid var(--blue);border-radius:6px}.skip-link:focus{top:.5rem}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.module-card.planned:hover{transform:none;box-shadow:none;border-color:var(--border)}
.card-status{font-size:.78rem;color:var(--slate);margin-top:.75rem}
.mobile-toc{display:none}.widget-controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end;margin-bottom:1rem}
.widget-controls label{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem}
.widget-controls input,.widget-controls select,.widget-controls button{font:inherit;min-height:36px;max-width:100%;padding:.35rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy)}
.widget-controls input[type=number]{width:8rem}.widget-result{background:var(--sky-pale);padding:.8rem;border-radius:8px;min-height:4rem;overflow-wrap:anywhere}
.widget-plot{display:block;width:100%;max-width:680px;margin:1rem auto}.widget-plot text{font-family:var(--font-body);font-size:13px}
.free-response{padding:1rem 1.25rem;border:1px solid var(--border);border-radius:12px;background:var(--white);margin:1rem 0}
.free-response textarea{display:block;width:100%;min-height:110px;margin:.7rem 0;font:inherit;padding:.7rem;border:1px solid var(--border);border-radius:7px}
.free-response .self-check{display:flex;gap:.5rem;align-items:start;font-size:.88rem}.free-response input{margin-top:.4rem;accent-color:var(--green)}
.content .readiness{padding:1rem 1.25rem;border:1px solid var(--green);border-radius:10px;background:var(--green-bg)}
.index-body{overflow-wrap:anywhere}.index-body td:nth-child(2){max-width:34rem}.index-grid .module-card{min-width:0}.index-hero h1{font-size:clamp(2rem,5vw,3.5rem)}
@media(max-width:900px){.mobile-toc{display:block;margin:1rem 0}.mobile-toc nav{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem}.mobile-toc a{font-size:.85rem}#main{width:100%}}
@media(max-width:440px){#topbar{padding:0 .75rem;gap:.45rem}.module-dropdown .dropdown-menu{min-width:260px;max-width:calc(100vw - 20px)}.lang-switch{margin-left:0}.index-grid{grid-template-columns:1fr}.widget{padding:.8rem}.widget-controls{gap:.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.skip-link,.widget-controls,.mobile-toc{display:none!important}details:not([open])>.details-body{display:block!important}.quiz-expl[hidden]{display:block}.free-response textarea{min-height:4rem}}
/* A finite relation table keeps quantifier scope visible on narrow screens. */
.quantifier-grid{display:grid;grid-template-columns:3rem repeat(2,minmax(4rem,1fr));gap:.65rem;max-width:25rem;align-items:center;text-align:center;margin:1rem 0}
.quantifier-grid button{border:1px solid #be123c;background:#fff1f2;color:#9f1239;padding:.65rem;cursor:pointer;border-radius:.5rem;font:inherit}
.quantifier-grid button[aria-pressed=true]{border-color:#15803d;background:#f0fdf4;color:#166534}
[data-quantifier-reset]{font:inherit;padding:.4rem .7rem;border:1px solid #cbd5e1;border-radius:.5rem;background:white;cursor:pointer}
.relation-grid{display:grid;grid-template-columns:2rem repeat(3,minmax(3rem,1fr));gap:.5rem;max-width:28rem;text-align:center;align-items:center;margin:1rem 0}
.relation-grid button{font:inherit;padding:.6rem;background:#fff1f2;border:1px solid #be123c;border-radius:.5rem;color:#9f1239;cursor:pointer}
.relation-grid button[aria-pressed=true]{background:#f0fdf4;border-color:#15803d;color:#166534}
.relation-status p{margin:.35rem 0!important}
.invariant-items{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.invariant-item{display:flex;flex-direction:column;align-items:center;min-width:3.5rem;padding:.55rem;background:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem}
.invariant-item small{font-size:.7rem;color:#475569}.invariant-item.processed{background:#f0fdf4;border-color:#15803d}.invariant-item.current{outline:2px solid #2563eb;outline-offset:2px}
.widget-controls button:disabled{opacity:.5;cursor:default}
.selection-samples{display:flex;flex-wrap:wrap;gap:.5rem;padding:0!important;list-style:none!important}.selection-samples li{font-family:var(--font-mono);font-size:.8rem;padding:.35rem .5rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:.35rem;margin:0!important}
.content table{width:100%;table-layout:fixed}.content th,.content td{overflow-wrap:anywhere}
.content{overflow-wrap:anywhere}
.residue-map,.residue-euclid,.traversal-labels{overflow-wrap:anywhere}
.widget-plot [data-vector]{touch-action:none;cursor:grab}.widget-plot [data-vector]:active{cursor:grabbing}