/* Grade-5 explorers, Touch ID sign-in, lesson diagrams. Load order matters: later files refine earlier ones (see docs/STRUCTURE.md). */
/* grade-5 explorers */
.dens { display: grid; gap: 10px; } .dctl { display: grid; gap: 8px; }
.tank { position: relative; height: 240px; max-width: 260px; margin: 0 auto; border: 4px solid #5b6b8a; border-top: 0; border-radius: 0 0 22px 22px; background: #eef7ff; overflow: hidden; }
.tank .liq { position: absolute; left: 0; right: 0; bottom: 0; top: 70px; opacity: .85; } .tank .obj { position: absolute; left: calc(50% - 20px); font-size: 2.3rem; line-height: 1; transition: top 1s cubic-bezier(.3, 1.3, .5, 1); z-index: 2; }
.circ svg { max-width: 360px; margin: 0 auto; display: block; } .crow { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-weight: 600; } .crow label { display: flex; gap: 6px; align-items: center; }
.fric { display: grid; gap: 10px; } .track { position: relative; height: 70px; background: linear-gradient(#eef2ff 0 80%, #8d6e63 80%); border-radius: 12px; overflow: hidden; } .skid { position: absolute; bottom: 14px; left: 0; font-size: 2rem; transition: left 1.1s; }
.wp { display: grid; gap: 8px; } .wpout { text-align: center; } .wpw { display: inline-block; font-family: var(--head); font-weight: 800; font-size: 1.9rem; margin: 8px 0; } .wpw i { font-style: normal; color: var(--y-deep); background: var(--y-soft); border-radius: 8px; padding: 0 4px; }
.widget[data-widget=density], .widget[data-widget=circuit], .widget[data-widget=friction], .widget[data-widget=wordparts] { grid-template-columns: 1fr; }

.widget[data-widget=sci], .widget[data-widget=transform], .widget[data-widget=transversal], .widget[data-widget=scatter], .widget[data-widget=interest], .widget[data-widget=prop], .widget[data-widget=volume] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.widget[data-widget=sci] { grid-template-columns: 1fr; } .sci input[type=text] { width: 100%; } .sci .row { gap: 6px; margin: 6px 0; }
.widget[data-widget=fracbar], .widget[data-widget=areagrid], .widget[data-widget=coord5] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fbar { display: flex; gap: 3px; margin: 4px 0 10px; } .fbar span { flex: 1; height: 26px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #d5d9ee; }
.flab { font-weight: 800; font-size: 14px; }
.widget[data-widget=foodweb], .widget[data-widget=watercycle] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wbarrow { margin: 8px 0; font-weight: 700; font-size: 13px; } .wbar { background: #eef0f8; border-radius: 8px; height: 16px; overflow: hidden; margin-top: 3px; } .wbar i { display: block; height: 100%; border-radius: 8px; transition: width .25s; }
.widget[data-widget=intline], .widget[data-widget=foil] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.widget[data-widget=ph], .widget[data-widget=fall] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.widget[data-widget=fallacy] { grid-template-columns: 1fr; }
.widget[data-widget=checks] { grid-template-columns: 1fr; } .chkrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Touch ID sign-in */
.tid-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 420px; margin: 0 0 18px; }
.tid-btn { width: 100%; margin-top: 10px; }
.tid-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(13, 27, 122, .45); backdrop-filter: blur(3px); }
.tid-card { background: var(--card); border-radius: var(--radius); padding: 26px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(20, 20, 60, .35); }
.tid-card .row { justify-content: center; gap: 10px; flex-wrap: wrap; }
.tid-ico { font-size: 48px; line-height: 1; }

/* Lesson diagrams (inline SVG made by src/curriculum/lessons/lessons-g8-angles-ifd.js) */
.dgm { margin: 14px 0; text-align: center; }
.dgm svg { width: 100%; max-width: 480px; height: auto; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; }
.dgm figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 6px auto 0; max-width: 560px; }
.dgm .ln, .dgm .pl { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dgm .ln.thin { stroke-width: 1.4; }
.dgm .pl { stroke: var(--navy); }
.dgm .ghost { fill: none; stroke: #9a9ab5; stroke-width: 1.8; stroke-dasharray: 5 4; }
.dgm .arc { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.dgm .arc.a1 { stroke: #d99200; } .dgm .arc.a2 { stroke: #2563eb; } .dgm .arc.a3 { stroke: #16a34a; } .dgm .arc.a4 { stroke: var(--purple); }
.dgm .w0 { fill: rgba(120, 120, 150, .10); } .dgm .w1 { fill: rgba(255, 184, 0, .42); } .dgm .w2 { fill: rgba(37, 99, 235, .28); }
.dgm .w3 { fill: rgba(22, 163, 74, .32); } .dgm .w4 { fill: rgba(124, 58, 237, .30); }
.dgm .dt { fill: var(--ink); }
.dgm text { font-family: "Lexend", system-ui, sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.dgm .lb { font-size: 13px; font-weight: 700; } .dgm .lbs { font-size: 11.5px; font-weight: 500; fill: #55556e; } .dgm .lbs2 { font-size: 11px; font-weight: 500; fill: #8a8aa3; } .dgm .pt { font-size: 13px; font-weight: 700; fill: var(--navy); }