/* For grown-ups (concept mock 6, D38). */
.app{max-width:1040px;padding-block:20px 50px}
.muted{color:var(--muted)}
.local{margin:0 0 14px;color:var(--muted);font-size:15px}
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{padding:16px 18px}
.card h2{font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:21px;margin:0 0 10px}
.card h3{font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:17px;margin:16px 0 6px}

.strand{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px;gap:10px;align-items:center;margin:6px 0;font-size:15px}
.strand .bar{height:10px;border-radius:5px;background:var(--soft)}
.strand .bar i{display:block;height:10px;border-radius:5px;background:var(--run)}
.strand b{text-align:right}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:6px 6px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:700;font-size:13px}
td:first-child{white-space:normal}
tr.new td{color:var(--muted)}

.facthead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.facthead h2{margin:0}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px}
.seg button{border-radius:999px;padding:6px 12px;font-size:14px;color:var(--ink);background:none}
.seg button[aria-selected="true"]{background:var(--card);box-shadow:var(--shadow);font-weight:700}
#factCount{margin:8px 0}
.fgrid{display:grid;grid-template-columns:22px repeat(10,minmax(0,1fr));gap:3px;font-size:12px;text-align:center;max-width:420px}
.fgrid .hd,.fgrid .corner{color:var(--muted);align-self:center}
.fgrid .cell{aspect-ratio:1;border-radius:4px}
.fgrid .cell.off{background:none}
.solid{background:#27ae60}.slow{background:#9fe1cb}.learning{background:#ffc75f}.missed{background:#ff8a8a}.unseen{background:var(--soft)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
#practice{margin:10px 0 0}

textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:13px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);padding:8px;resize:vertical;word-break:break-all}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btns .sec,.btns .run{font-size:15px;padding:9px 14px;flex:none;min-width:0}
.filebtn{cursor:pointer;display:inline-flex;align-items:center}
.check{margin-top:12px;background:var(--soft);border-radius:14px;padding:10px 12px}
.check p{margin:0 0 6px}
.check.bad{color:var(--bad);font-weight:700}