/* Lessons 31–35 use lab.css; this file adds a working list, Yang Hui's number tiles and phone adjustments. */
.seventh-working{margin:0 30px 24px;padding:18px 20px 18px 48px;background:#f1eadb;border:1px solid #d2c4a9;border-radius:8px;font-size:21px;line-height:1.6;font-variant-numeric:tabular-nums}
.seventh-working li+li{margin-top:6px}
.seventh-lab .lab-equation output{font-variant-numeric:tabular-nums}
.seventh-lab .lab-result .equation{overflow-wrap:anywhere}
.lab-scene text.on-dark{fill:#f3ecd7;stroke:#2c241a}
/* Colour identity in the equation strip. */
.lab[data-demo=town] #town-box-0,.lab[data-demo=couple] #couple-box-0,.lab[data-demo=differences] #differences-box-0{border-top:4px solid var(--green)}
.lab[data-demo=town] #town-box-1,.lab[data-demo=couple] #couple-box-1,.lab[data-demo=differences] #differences-box-1{border-top:4px solid var(--copper)}
.lab[data-demo=couple] #couple-box-2{border-top:4px solid #aa8435}
/* Yang Hui: each number tile is a button placed over its spot on the board. */
.circle-tile{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid #b7a58a;background:#fbf6e7;color:var(--ink);font:700 22px/1 var(--sans);display:grid;place-items:center;padding:0;z-index:2;transition:left .45s ease,top .45s ease,background .15s,opacity .2s;box-shadow:0 1px 4px #5c341f30}
.circle-tile:hover{border-color:var(--copper)}
.circle-tile[aria-pressed=true]{background:#f3e0c9;border:3px solid var(--copper)}
.circle-tile.in{border:3px solid var(--green);background:#e4eee7}
.circle-tile.faded{opacity:.45}
.circle-tile.hole{background:#fff;border:3px dashed var(--copper);color:var(--copper)}
.circle-tile.spare{background:#f3e7c7;border-color:#aa8435}
.circle-tile:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.circle-tile{transition:none}}
@media(max-width:760px){
 .lab[data-demo=town] .lab-scene .lbl,.lab[data-demo=couple] .lab-scene .lbl{font-size:30px}
 .seventh-working{margin:0 14px 20px;padding:14px 14px 14px 38px;font-size:19px}
 .seventh-lab .lab-scene .secondary{display:none}
 .circle-tile{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:16px;border-width:1.5px}
 .circle-tile.in,.circle-tile.hole,.circle-tile[aria-pressed=true]{border-width:2px}
 .lab[data-demo=town] .lab-equation,.lab[data-demo=couple] .lab-equation,.lab[data-demo=remainders] .lab-equation,.lab[data-demo=circles] .lab-equation,.lab[data-demo=differences] .lab-equation{grid-template-columns:1fr;gap:6px}
 .seventh-lab .lab-equation .operator{padding:0;text-align:center;font-size:24px;line-height:1}
 .seventh-lab .lab-equation>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
 .seventh-lab .lab-equation .eq-label{max-width:58%}
 .seventh-lab .lab-equation output{text-align:right}
}
@media(min-width:761px){.lab.seventh-lab .lab-equation{grid-template-columns:var(--cols,minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr))}}
.seventh-lab .lab-chips>span{white-space:nowrap}
.lab[data-demo=remainders] .lab-equation:not(.plain) #remainders-box-0{border-top:4px solid var(--green)}
.lab[data-demo=remainders] .lab-equation:not(.plain) #remainders-box-1{border-top:4px solid var(--copper)}
.lab[data-demo=remainders] .lab-equation:not(.plain) #remainders-box-2{border-top:4px solid #aa8435}
.seventh-stage{position:relative}