/* Why continual physical learners need sleep: game marks on the shared figure plate (labs/plate.css). */
#sleepLab .sg2{color:var(--ink);text-shadow:none}
.sg2 .plate-main{justify-content:center}
.sg2-fig{user-select:none;cursor:pointer;touch-action:manipulation}
.sg2-key{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 0 0 4px;font:12px/1.3 var(--sans);color:var(--ink-2)}
.sg2-key span{display:inline-flex;align-items:center;gap:6px}
.sg2-key .k-grad{display:inline-block;width:42px;height:6px;border-radius:2px;background:linear-gradient(90deg,#2c66a0,#c4baa8 50%,#d67862 75%,#b22822)}
.sg2-key .k-thick{display:inline-block;width:18px;height:6px;background:var(--ink-2);clip-path:polygon(0 35%,100% 0,100% 100%,0 65%)}
.sg2-key .k-port{display:inline-block;width:16px;height:4px;border-radius:2px}
.sg2-key .k-port.in{background:var(--blue)}.sg2-key .k-port.out{background:var(--red)}.sg2-key .k-port.ink{background:var(--ink)}.sg2-key .k-port.orange{background:var(--orange)}.sg2-key .k-port.grey{background:var(--grey)}

/* the network, drawn in ink on the ivory stage */
.sg2-field{fill:#f2ede2;stroke:none}
.sg2-frame{fill:none;stroke:color-mix(in srgb,var(--ink) 45%,transparent);stroke-width:1}
.sg2-bond{fill:none;stroke-linecap:round}
.sg2-port{fill:none;stroke-width:5.5;stroke-linecap:round}
.sg2-port.in{stroke:var(--blue)}.sg2-port.out{stroke:var(--red)}
.sg2-portlabel{font:italic 700 15px/1 var(--serif)!important;paint-order:stroke;stroke:#f2ede2;stroke-width:3px}
.sg2-portlabel.in{fill:var(--blue)}.sg2-portlabel.out{fill:var(--red)}
.sg2-mode{fill:var(--ink-2);font:600 11.5px/1 var(--sans)!important;paint-order:stroke;stroke:#f2ede2;stroke-width:3px}
.sg2-h{fill:var(--ink);font:600 11px/1 var(--sans)!important;letter-spacing:.09em;text-transform:uppercase}
.sg2-sub{fill:var(--ink-3);font:11px/1 var(--sans)!important}
.sg2-barC{fill:var(--blue)}.sg2-barP{fill:var(--red);opacity:.85}
.sg2-barframe{fill:none;stroke:var(--ink);stroke-width:1}
.sg2-bl{font:600 11.5px/1 var(--sans)!important}.sg2-bv{font:12px/1 var(--sans)!important;fill:var(--ink-2)}
.sg2-bl.c{fill:var(--blue)}.sg2-bl.p{fill:var(--red)}
.sg2-hbar{opacity:.9}
.sg2-room{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:3 3}
.sg2-axis{stroke:var(--ink-2);stroke-width:1}
.sg2-tick{fill:var(--ink-3);font:10.5px/1 var(--sans)!important}
.sg2-fbar{stroke:var(--ink);stroke-width:1}
.sg2-tipring{fill:none;stroke:var(--ink);stroke-width:1.5}
.sg2-tipbox{fill:#fffaf0;stroke:color-mix(in srgb,var(--ink) 35%,transparent)}
.sg2-tiphead{fill:var(--ink);font:600 11.5px/1 var(--sans)!important}
.sg2-tiptext{fill:var(--ink-2);font:11.5px/1 var(--sans)!important}

/* side panels: light ink on the photo */
.sg2-b-title .legend,.sg2-c-title .legend{float:right;text-transform:none;letter-spacing:0;font-weight:500;display:inline-flex;gap:8px;align-items:center;color:var(--ink-2)}
.sg2-b-title .legend span,.sg2-c-title .legend span{display:inline-flex;align-items:center;gap:4px}
.sg2 .k-line{display:inline-block;width:16px;height:3px;vertical-align:2px}
.sg2 .k-line.red{background:var(--red)}.sg2 .k-line.blue{background:var(--blue)}.sg2 .k-line.ink{background:var(--ink)}.sg2 .k-line.grey{background:var(--grey)}.sg2 .k-line.purple{background:var(--purple)}
.sg2 .k-line.red.dim{opacity:.45}
.sg2-chart{display:block;width:100%;height:auto;max-height:170px}
.sg2-b .sg2-chart{max-height:116px}
.sg2-c .sg2-chart{max-height:none;height:100%}
.plate.is-compact .sg2-b .sg2-chart{max-height:100px}
.sg2-goal{fill:color-mix(in srgb,var(--green) 18%,transparent)}
.sg2-goal-line{stroke:var(--green);stroke-width:1;stroke-dasharray:4 3}
.sg2-eta{fill:none;stroke:var(--blue);stroke-width:2}
.sg2-eta-dot{fill:var(--blue)}
.svg-tick.blue{fill:var(--blue);font-weight:650}.svg-tick.red{fill:var(--red);font-weight:650}.svg-tick.grey{fill:var(--ink-2)}.svg-tick.purple{fill:var(--purple)}
.svg-tick.good{fill:var(--green);font-weight:700}.svg-tick.bad{fill:var(--red);font-weight:700}
.svg-label.quiet{fill:var(--ink-3);font-size:10px}
.sg2-firstbar{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 2}
.sg2-streambar{fill:var(--blue);opacity:.9}
.sg2-band{fill:color-mix(in srgb,var(--ink) 12%,transparent)}
.sg2-mean{fill:none;stroke:var(--ink-3);stroke-width:1.3}
.sg2-mine{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linejoin:round}
.sg2-mine.p{stroke:var(--red)}.sg2-mine.dim{opacity:.4;stroke-dasharray:3 3}
.sg2-exact{stroke-width:1;stroke-dasharray:4 3}
.sg2-exact.blue{stroke:var(--blue)}.sg2-exact.grey{stroke:var(--ink-2)}.sg2-exact.red{stroke:var(--red)}
.sg2-run{fill:none;stroke-width:1.8}
.sg2-run.blue{stroke:var(--blue)}.sg2-run.grey{stroke:var(--ink)}.sg2-run.red{stroke:var(--red)}
.sg2-qband.ink{fill:color-mix(in srgb,var(--ink) 14%,transparent)}.sg2-qband.blue{fill:color-mix(in srgb,var(--blue) 22%,transparent)}.sg2-qband.red{fill:color-mix(in srgb,var(--red) 22%,transparent)}
.sg2-q{fill:none;stroke-width:1.6}
.sg2-q.ink{stroke:var(--ink)}.sg2-q.blue{stroke:var(--blue)}.sg2-q.red{stroke:var(--red)}.sg2-q.purple{stroke:var(--purple)}
.sg2-q.mine{stroke-width:1.2;stroke-dasharray:2 2;opacity:.9}
.sg2-err{stroke:var(--blue);stroke-width:1.2}
.sg2-dot.blue{fill:var(--blue)}.sg2-dot.ink{fill:var(--ink)}.sg2-dot.purple{fill:var(--purple)}.sg2-dot.red{fill:var(--red)}
.sg2-diag{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
.sg2-pt.off{fill:var(--ink-2);opacity:.6}.sg2-pt.on{fill:var(--red);opacity:.7}
.sg2-pair{fill:none;stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:.8}
.sg2-meanbar{stroke:var(--ink);stroke-width:2}

/* the task stream, as the strip in Fig. 1d */
.sg2-strip{display:flex;flex-wrap:nowrap;gap:2px;margin:0 0 7px}
.sg2-strip .tile{display:inline-grid;place-items:center;flex:0 0 12px;height:16px;font:600 9px/1 var(--sans);border-radius:2px;background:color-mix(in srgb,var(--ink) 16%,transparent);color:var(--ink)}
.sg2-strip .tile.first{background:var(--ink);color:#1b2433}
.sg2-strip .tile.ok{box-shadow:inset 0 -3px 0 var(--green)}
.sg2-strip .tile.no{box-shadow:inset 0 -3px 0 var(--red)}
.sg2-strip .tile.now{outline:2px solid var(--accent);outline-offset:1px}
.sg2-tabs{display:flex;gap:4px;margin:0 0 8px;flex-wrap:wrap}
.sg2-tabs button{appearance:none;font:500 12px/1 var(--sans);color:var(--ink-2);background:transparent;border:1px solid var(--hair);border-radius:3px;padding:6px 9px;cursor:pointer}
.sg2-tabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#1b2433}
.sg2 .caption-text b.in{color:var(--blue)}.sg2 .caption-text b.out{color:var(--red)}
.sg2 .caption-text .accent{color:var(--accent)}
.sg2 .good{color:var(--green)}.sg2 .bad{color:var(--red)}
@media (max-width:620px){.sg2 .plate-main{min-height:0}}
#embody [data-embody-panel="sleep"]:has(.plate.sg2),#sleepLab:has(.plate.sg2){margin-top:0!important}

/* Egyptian Arabic (html dir="rtl", text from ar.js via labs/demo-ar.js): the plate mirrors, the drawings stay
   left to right. Arabic takes the site's Arabic faces (the plate otherwise pins Latin-only ones). */
html[dir="rtl"] #sleepLab .plate{--serif:"Noto Naskh Arabic","Source Serif 4",Georgia,serif;--sans:Cairo,Inter,system-ui,sans-serif}
html[dir="rtl"] #sleepLab :is(.plate-title,.plate-nav button,.panel-title,.plate-about h4,.sg2-h){letter-spacing:0}
html[dir="rtl"] #sleepLab .panel-title{text-transform:none}
html[dir="rtl"] #sleepLab .plate-nav button .n{margin-right:0;margin-left:5px}
html[dir="rtl"] #sleepLab .plate-nav button.is-done::after{margin-left:0;margin-right:6px}
html[dir="rtl"] #sleepLab .plate-about{right:auto;left:0}
html[dir="rtl"] #sleepLab :is(.sg2-b-title,.sg2-c-title) .legend{float:left}
html[dir="rtl"] #sleepLab .sg2-key{padding:6px 4px 0 0}
/* the task strip is a time line, like the charts' visit axes: visit 1 on the left */
html[dir="rtl"] #sleepLab .sg2-strip{direction:ltr;justify-content:flex-end}
/* tooltip lines end at the box's right edge (box 186 wide, lines drawn from its left edge + 9: game.js drawTip) */
html[dir="rtl"] #sleepLab :is(.sg2-tiphead,.sg2-tiptext){text-anchor:end;transform:translateX(168px)}