/* Polish lab, the Back to Class hub (/guides): tighter, squarer, the classes in their own colours, nothing tilted or floating.
   All of it hangs off html.lab-on-hub (the Lab button bottom left switches it). */
.labhub{position:fixed;left:14px;bottom:14px;z-index:90;padding:7px 12px;border-radius:6px;font:700 12px/1 "Open Sans",system-ui,sans-serif;letter-spacing:.06em;color:#d7f7ff;background:#10242b;box-shadow:inset 0 0 0 1px #2f7f95,0 6px 18px rgba(0,0,0,.6);cursor:pointer;border:0}
.labhub b{color:#8fd3e6;font-weight:600;margin-left:6px}

/* the classes still to come: one row, each in its own colour, waiting but not dead */
html.lab-on-hub .gd-tiles2 li{animation-duration:.3s;animation-delay:calc(var(--i) * 25ms);transform:translateY(6px)}
html.lab-on-hub .gd-tiles2 li>.gd-ctile,html.lab-on-hub .gd-tiles2 li>div{min-height:0;padding:14px 8px 12px;gap:2px;border-radius:6px;border:0;background:#1a1a1a;box-shadow:inset 0 0 0 1px #2e2e2e,inset 0 -2px 0 color-mix(in srgb,var(--cc) 55%,#1a1a1a)}
html.lab-on-hub .gd-tiles2 img{width:52px;height:52px;border-radius:6px;margin-bottom:8px;box-shadow:0 0 0 1px #000,0 0 0 2px #4a4334;filter:grayscale(.55) brightness(.8);transition:filter .15s}
html.lab-on-hub .gd-tiles2 li:hover img{filter:none;transform:none}
html.lab-on-hub .gd-tiles2 b{font-size:14px;color:color-mix(in srgb,var(--cc) 70%,#9a9a9a)}
html.lab-on-hub .gd-tiles2 li:hover b{color:var(--cc)}
html.lab-on-hub .gd-tiles2 small{font-size:10px}
html.lab-on-hub .gd-tiles2 li.pop>.gd-ctile{animation:none}
@media (max-width:520px){html.lab-on-hub .gd-tiles2 img{width:40px;height:40px}html.lab-on-hub .gd-tiles2 b{font-size:11.5px}html.lab-on-hub .gd-tiles2 li>.gd-ctile,html.lab-on-hub .gd-tiles2 li>div{padding:10px 4px 9px}}

/* hear about it: a plain panel, the message straight on the table */
html.lab-on-hub .gd-mail2{margin-top:10px;padding:18px 20px;border-radius:6px;border:0;background:#1a1a1a;box-shadow:inset 0 0 0 1px #2e2e2e,inset 3px 0 0 var(--gold2);grid-template-columns:1.25fr .75fr;gap:24px}
html.lab-on-hub .gd-follow a{border-radius:5px;border:0;background:#232323;box-shadow:inset 0 0 0 1px #3a3a3a;padding:8px 14px 8px 8px}
html.lab-on-hub .gd-follow a:hover{box-shadow:inset 0 0 0 1px var(--gold2)}
html.lab-on-hub .gd-follow img{border-radius:5px;box-shadow:0 0 0 1px #6b5a2a}
html.lab-on-hub .gd-mock{perspective:none;align-items:stretch;gap:6px}
html.lab-on-hub .gd-mocklabel{font-size:10px;letter-spacing:.1em;text-align:left}
html.lab-on-hub .gd-mockcard,html.lab-on-hub .gd-mock:hover .gd-mockcard{max-width:none;transform:none;border-radius:4px;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.5);transition:none}
html.lab-on-hub .gd-mockcard.nudge{animation:none}
html.lab-on-hub .gd-mockband{padding:8px 12px}
html.lab-on-hub .gd-mockbody{padding:12px 14px}
html.lab-on-hub .gd-mockbody h4{font-size:17px;margin-bottom:5px}
html.lab-on-hub .gd-mockbody p{margin-bottom:9px}
html.lab-on-hub .gd-mockbtn{border-radius:4px;padding:6px 12px}
html.lab-on-hub .gd-mocksig{margin-top:10px!important}
html.lab-on-hub .gd-mockbtn{border-radius:4px}
/* the window in the page's dress: the warm panel, the gold rule */
html.lab-on-hub .gd-win{border-radius:6px;background:#1d1b14;box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px #000,inset 0 0 0 1px #4a4020,inset 0 2px 0 var(--gold2)}
html.lab-on-hub .gd-winhead{border-bottom-color:#3a3420}
html.lab-on-hub .gd-wincard,html.lab-on-hub .gd-winback{border-radius:4px;background:#151310;border-color:#3a3420}
html.lab-on-hub .gd-peekbox{border-radius:4px}
@media (max-width:820px){html.lab-on-hub .gd-mail2{grid-template-columns:1fr;padding:16px}}

/* what a guide holds: six plates */
html.lab-on-hub .gd-insidegrid{gap:8px}
html.lab-on-hub .gd-insidegrid li{padding:12px 14px;border-radius:6px;border:0;background:#1a1a1a;box-shadow:inset 0 0 0 1px #2e2e2e;transition:none;column-gap:12px}
html.lab-on-hub .gd-insidegrid li:hover{transform:none;box-shadow:inset 0 0 0 1px #4a4334}
html.lab-on-hub .gd-insidegrid img{border-radius:5px;box-shadow:0 0 0 1px #6b5a2a}
html.lab-on-hub .gd-insidegrid b{font-size:14px;letter-spacing:.02em}
html.lab-on-hub .gd-rv{transition-duration:.25s}

/* plan it: the way back to the calculator, as a row of doors */
html.lab-on-hub .foot2 .how{display:grid;grid-template-columns:auto 1fr;gap:4px 28px;align-items:center;padding:12px 16px;border-radius:6px}
html.lab-on-hub .foot2 .how .fhead{grid-row:1/3;border:0;margin:0;padding:0}
html.lab-on-hub .foot2 .how .ltitle strong{font-family:Cinzel,Georgia,serif;color:#ffd75e;letter-spacing:.04em}
html.lab-on-hub .foot2 .how p.fine{margin:0;max-width:none;line-height:1.9;font-size:13px;color:var(--muted)}
html.lab-on-hub .foot2 .how p.fine a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}
html.lab-on-hub .foot2 .how p.fine a:hover{color:var(--gold)}
@media (max-width:820px){html.lab-on-hub .foot2 .how{grid-template-columns:1fr}html.lab-on-hub .foot2 .how .fhead{grid-row:auto}}

/* the two follow buttons wear their own marks */
html.lab-on-hub .gd-follow a img{display:none}
html.lab-on-hub .gd-follow a::before{content:"";flex:none;width:30px;height:30px;background:center/contain no-repeat}
html.lab-on-hub .gd-follow a[href*="youtube.com"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20class%3D%22lg-yt%22%3E%3Cpath%20fill%3D%22%23f00%22%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9.545%2015.568V8.432L15.818%2012z%22/%3E%3C/svg%3E")}
html.lab-on-hub .gd-follow a[href*="x.com"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20class%3D%22lg-x%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22/%3E%3C/svg%3E");background-size:22px;background-color:#000;border-radius:5px;box-shadow:0 0 0 1px #3a3a3a}

/* the sign-up: the tile is the button. Tap a class and it joins your list, the form's button names it, and the message on the right does too */
html.lab-on-hub .gd-tiles2 .gd-votes{display:none}
html.lab-on-hub .gd-tiles2 li>.gd-ctile:hover img{filter:none;box-shadow:0 0 0 1px #000,0 0 0 2px var(--cc)}
html.lab-on-hub .gd-tiles2 li>.gd-ctile small{display:none}
html.lab-on-hub .gd-tiles2 li.pop>.gd-ctile img{animation:labpick .25s ease-out}
@keyframes labpick{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}}
html.lab-on-hub .gd-signup2.picked .gd-mail2{box-shadow:inset 0 0 0 1px #6b5a2a,inset 3px 0 0 var(--gold)}
html.lab-on-hub .gd-mailrow{margin-top:12px}
html.lab-on-hub .gd-mailrow input{border-radius:5px;padding:10px 12px;background:#0f0f0f;border-color:#3a3a3a}
html.lab-on-hub .gd-mailrow .gd-go,html.lab-on-hub .gd-go{border-radius:5px;padding:10px 18px;background:var(--gold);box-shadow:0 0 0 1px #6b4a12}
html.lab-on-hub .gd-follow.lab-also{align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid #2e2e2e}
html.lab-on-hub .gd-follow.lab-also .lab-or{width:100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html.lab-on-hub .gd-follow.lab-also a{padding:6px 12px 6px 8px}
html.lab-on-hub .gd-follow.lab-also a::before{width:22px;height:22px}
html.lab-on-hub .gd-follow.lab-also b{font-size:13px}
html:not(.lab-on-hub) .gd-follow.lab-also{display:none}
@media (max-width:520px){html.lab-on-hub .gd-mailrow{flex-wrap:wrap}html.lab-on-hub .gd-mailrow .gd-go{flex:1 1 100%;white-space:normal}}
@media (prefers-reduced-motion:reduce){html.lab-on-hub .gd-tiles2 li.pop>.gd-ctile img{animation:none}html.lab-on-hub .gd-tiles2 li>.gd-ctile{transition:none}}
@media (max-width:520px){html.lab-on-hub .gd-follow.lab-also a{flex:1 1 100%}html.lab-on-hub .gd-follow.lab-also a span{display:inline;margin-left:6px}html.lab-on-hub .gd-follow.lab-also a b{display:inline}}
@media (max-width:520px){html.lab-on-hub .gd-follow.lab-also a b{white-space:nowrap}html.lab-on-hub .gd-follow.lab-also a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* the message follows your list: one line per guide, the open one below */
html:not(.lab-on-hub) .lab-inbox{display:none}
.lab-inbox{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.lab-inbox button{display:block;padding:0;border:0;border-radius:6px;background:#141414;box-shadow:0 0 0 1px #000,0 0 0 2px #3a3a3a;cursor:pointer;opacity:.6;transition:opacity .12s,transform .12s,box-shadow .12s;font:inherit;font-size:11px;color:var(--ink2)}
.lab-inbox button:hover{opacity:1;transform:translateY(-1px)}
.lab-inbox button:active{transform:translateY(1px)}
.lab-inbox button[aria-current]{opacity:1;box-shadow:0 0 0 1px #000,0 0 0 2px var(--cc)}
.lab-inbox button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.lab-inbox img{width:30px;height:30px;border-radius:6px;display:block}
html.lab-on-hub .gd-mockcard.lab-one .gd-mockband{box-shadow:inset 0 -2px 0 var(--cc)}
html.lab-on-hub .gd-mock [data-mock].flip{animation:none}

/* what a guide holds: six steps on one line, in the guide's own order, each a door into the guide that is up */
html:not(.lab-on-hub) .lab-step,html:not(.lab-on-hub) .lab-door em{display:none}
html:not(.lab-on-hub) .lab-door{display:contents;color:inherit;font:inherit;text-align:inherit}html:not(.lab-on-hub) .lab-peek{display:none}
html.lab-on-hub .gd-insidegrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
html.lab-on-hub .gd-insidegrid::before{content:"";position:absolute;left:8.33%;right:8.33%;top:36px;height:2px;background:#4a4020}
html.lab-on-hub .gd-insidegrid li{display:block;padding:0;border-radius:0;background:none;box-shadow:none}
html.lab-on-hub .gd-insidegrid li:hover{box-shadow:none}
html.lab-on-hub .lab-door{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;padding:10px 10px 12px;border-radius:6px;text-align:center;text-decoration:none;color:inherit;width:100%;border:0;background:none;font:inherit;cursor:pointer}
html.lab-on-hub .lab-door:hover,html.lab-on-hub .lab-door:focus-visible{background:#1a1a1a;box-shadow:inset 0 0 0 1px #4a4334;outline:0}
html.lab-on-hub .lab-door img{position:relative;width:52px;height:52px;margin-bottom:6px;border-radius:6px;box-shadow:0 0 0 1px #000,0 0 0 2px #6b5a2a,0 0 0 6px #101010}
html.lab-on-hub .lab-door:hover img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold),0 0 0 6px #1a1a1a}
html.lab-on-hub .lab-step{position:absolute;top:4px;left:calc(50% + 18px);z-index:1;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:#1a1400;font:700 11px/18px "Open Sans",system-ui,sans-serif;font-style:normal;box-shadow:0 0 0 2px #101010;box-sizing:border-box}
html.lab-on-hub .lab-door b{font-size:13.5px;line-height:1.25}
html.lab-on-hub .lab-door span{font-size:12.5px;line-height:1.45}
html.lab-on-hub .lab-door em{margin-top:auto;padding-top:6px;font-style:normal;font-size:11.5px;color:var(--gold2);opacity:0;transition:opacity .12s}
html.lab-on-hub .lab-door:hover em,html.lab-on-hub .lab-door:focus-visible em{opacity:1}
@media (hover:none){html.lab-on-hub .lab-door em{opacity:1}}
@media (max-width:1000px){html.lab-on-hub .gd-insidegrid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}html.lab-on-hub .gd-insidegrid::before{display:none}}
@media (max-width:620px){html.lab-on-hub .gd-insidegrid{grid-template-columns:1fr;row-gap:2px}html.lab-on-hub .gd-insidegrid::before{display:block;left:41px;right:auto;top:20px;bottom:40px;width:2px;height:auto}
  html.lab-on-hub .lab-door{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1px 14px;align-items:start;text-align:left;padding:8px 10px 8px 16px}html.lab-on-hub .lab-door img{grid-row:1/4;margin:0}html.lab-on-hub .lab-step{top:2px;left:56px}html.lab-on-hub .lab-door em{padding-top:2px}}
/* plan it: a title line, then the links */
html.lab-on-hub .foot2 .how{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}
html.lab-on-hub .foot2 .how .fhead{grid-row:auto}
html.lab-on-hub .foot2 .how .ltitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
@media (prefers-reduced-motion:reduce){html.lab-on-hub .lab-door em{transition:none}}

/* a click on a part opens that part of the guide, working, under the steps */
html.lab-on-hub .lab-door[aria-expanded="true"]{background:#1d1b14;box-shadow:inset 0 0 0 1px #4a4020,inset 0 2px 0 var(--gold2)}
html.lab-on-hub .lab-door[aria-expanded="true"] img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold),0 0 0 6px #1d1b14}
html.lab-on-hub .lab-door[aria-expanded="true"] em{opacity:1}
html:not(.lab-on-hub) .lab-peek{display:none}
.lab-peek{position:relative;margin:10px 0 0;padding:12px 14px 14px;border-radius:6px;background:#1d1b14;box-shadow:inset 0 0 0 1px #4a4020,inset 0 2px 0 var(--gold2);box-sizing:border-box}
.lab-peek::before{content:"";position:absolute;top:-6px;left:var(--nx,40px);width:10px;height:10px;transform:rotate(45deg);background:#1d1b14;box-shadow:inset 1px 1px 0 var(--gold2)}
.lab-peek header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:10px;padding-right:40px}
.lab-peek header b{font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.03em;color:#ffd75e}
.lab-peek header span{font-size:12.5px;color:var(--muted)}
.lab-peekx{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;border-radius:4px;background:#2a2a2a;color:var(--ink2);font-size:20px;line-height:1;cursor:pointer}
.lab-peekx:hover,.lab-peekx:focus-visible{background:#3a3a3a;color:#fff;outline:0;box-shadow:inset 0 0 0 1px var(--gold2)}
.lab-peekbox{position:relative;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px #000;background:#0b0b0d}
.lab-peekbox iframe{display:block;width:100%;height:420px;border:0;background:#0b0b0d;transition:opacity .15s}
.lab-peekbox.loading iframe{opacity:0}
.lab-peekbox.loading::before{content:"Opening the guide";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted)}
.lab-peekbox.more::after{content:"";position:absolute;left:0;right:14px;bottom:0;height:34px;background:linear-gradient(180deg,transparent,#0b0b0d);pointer-events:none}
@media (max-width:620px){.lab-peek{padding:10px}.lab-peek::before{display:none}}
@media (prefers-reduced-motion:reduce){.lab-peekbox iframe{transition:none}}
/* inside the frame: one part of the guide, nothing around it */
html.lab-part .lab-away,html.lab-part .labhub,html.lab-part .gd-chhead,html.lab-part video{display:none!important}
html.lab-part,html.lab-part body{background:#0b0b0d!important;min-height:0!important}
html.lab-part body{padding:0!important;margin:0!important}
html.lab-part .app{max-width:none!important;margin:0!important;padding:10px 14px 18px!important}
html.lab-part section{margin:0!important;padding-top:0!important;border:0!important;min-height:0!important;background-image:none!important}
html.lab-part a[href]{cursor:default}
html.lab-part h3.gd-subch{display:none}
html.lab-part *{scroll-margin-top:0!important}
html.lab-part .gd-buildgo,html.lab-part .gd-buildlink,html.lab-part .gd-watchpart{display:none!important}
html.lab-part a[href^="/"],html.lab-part a[href^="http"]{color:inherit!important;text-decoration:none!important;border:0!important;pointer-events:none}
/* what people build: the three trees get the width their tiles need, so no rank sits on its neighbour */
@media (min-width:901px){html.lab-on-hub .gd-buildgrid,html.lab-part .gd-buildgrid{grid-template-columns:minmax(0,.85fr) minmax(0,640px);max-width:none}}
/* the class crosses the message */
html.lab-on-hub .gd-mockbody{position:relative;overflow:hidden}
/* on a phone the part opens under the step that was tapped */
.lab-peek.under{margin:4px 0 10px;padding:8px}
.lab-peek.under header{padding-right:36px}
.lab-peek.under header span{display:none}
@media (max-width:620px){html.lab-on-hub .lab-door{height:auto}html.lab-on-hub .gd-insidegrid li{display:flow-root}}
/* the class tiles in the page's own dress, on every screen (Chris, 30 Sep: the phone had it, the desktop should too). Warm panel,
   gold rule, the name in the page's serif, and one small gold mark on the icon (a plus, a tick once picked) where "Tell me when" stood */
@media (min-width:0){
html.lab-on-hub .gd-tiles2{gap:7px}
html.lab-on-hub .gd-tiles2 li>.gd-ctile{position:relative;padding:12px 4px 10px;border-radius:6px;background:#1d1b14;box-shadow:inset 0 0 0 1px #4a4020,inset 0 2px 0 var(--gold2);overflow:visible}
html.lab-on-hub .gd-tiles2 li>.gd-ctile img{width:48px;height:48px;margin-bottom:7px;border-radius:7px;filter:none;box-shadow:0 0 0 1px #000,0 0 0 2px #6b5a2a}
html.lab-on-hub .gd-tiles2 li>.gd-ctile b{font-family:Cinzel,Georgia,serif;font-size:12px;letter-spacing:.03em;color:color-mix(in srgb,var(--cc) 82%,#fff)}
}
@media (min-width:821px){html.lab-on-hub .gd-tiles2 li>.gd-ctile{padding:16px 6px 13px}html.lab-on-hub .gd-tiles2 li>.gd-ctile img{width:56px;height:56px;margin-bottom:9px}html.lab-on-hub .gd-tiles2 li>.gd-ctile b{font-size:13px}}
/* The classes still to come, each with its two ways to have a say, in words (Chris, 30 Sep: "say Just vote so it's obvious"). Just vote
   is a button in the class's own colour, the colour its bar fills on the board; Tell me when is a tick box for the email below. The
   tiles sit in centred rows, all in one row on a desktop, so no gap is left at the end of a row and no class sits alone at the start. */
html.lab-on-hub .gd-tiles2{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
html.lab-on-hub .gd-tiles2 li{display:flex;flex:0 0 calc((100% - (var(--n, 7) - 1) * 8px) / var(--n, 7));min-width:0}
html.lab-on-hub .gd-tiles2 li>.gd-ctile{flex:1;min-width:0;cursor:default;padding:14px 8px 10px;transition:background .15s,box-shadow .15s}
html.lab-on-hub .gd-tiles2 .gd-acts{position:static;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;margin:auto 0 0;padding:10px 0 0}
html.lab-on-hub .gd-tiles2 .gd-acts>*{flex:none;min-width:0;min-height:0;border:0}
html.lab-on-hub .gd-tiles2 .gd-justvote{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 8px;border-radius:5px;background:color-mix(in srgb,var(--cc) 18%,#19160e);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 50%,#3d3522),0 1px 0 rgba(0,0,0,.45);color:color-mix(in srgb,var(--cc) 40%,#fff);font:700 12px/1 "Open Sans",system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,box-shadow .12s,color .12s,transform .08s}
html.lab-on-hub .gd-tiles2 .gd-justvote .gd-ico{width:11px;height:11px}
@media (hover:hover){html.lab-on-hub .gd-tiles2 .gd-justvote:hover{background:color-mix(in srgb,var(--cc) 32%,#19160e);box-shadow:inset 0 0 0 1px var(--cc),0 1px 0 rgba(0,0,0,.45);color:#fff}html.lab-on-hub .gd-tiles2 .gd-tellme:hover{background:rgba(255,215,94,.07);color:#ffd75e}html.lab-on-hub .gd-tiles2 .gd-tellme:hover .gd-box{box-shadow:inset 0 0 0 1.5px var(--gold)}}
html.lab-on-hub .gd-tiles2 .gd-justvote:active{transform:translateY(1px)}
html.lab-on-hub .gd-tiles2 .gd-justvote:focus-visible,html.lab-on-hub .gd-tiles2 .gd-tellme:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
html.lab-on-hub .gd-tiles2 .gd-justvote.is-voted{background:color-mix(in srgb,var(--cc) 40%,#15120b);box-shadow:inset 0 0 0 1px var(--cc);color:#fff;cursor:default;transform:none}
html.lab-on-hub .gd-tiles2 .gd-justvote.is-closed{background:#1a1812;box-shadow:inset 0 0 0 1px #37311f;color:#857d69;cursor:default;transform:none}
html.lab-on-hub .gd-tiles2 .gd-tellme{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 6px;border-radius:5px;background:none;box-shadow:none;color:#d9b95e;font:600 11.5px/1 "Open Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s}
html.lab-on-hub .gd-tiles2 .gd-tellme input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
html.lab-on-hub .gd-tiles2 .gd-tellme em{font:inherit;font-style:normal}
html.lab-on-hub .gd-tiles2 .gd-tellme .gd-box{width:13px;height:13px;background:#120f08;box-shadow:inset 0 0 0 1.5px #8a7330;color:#1a1400;transition:background .12s,box-shadow .12s}
html.lab-on-hub .gd-tiles2 .gd-tellme:has(input:checked){color:#ffd75e}
html.lab-on-hub .gd-tiles2 .gd-tellme:has(input:checked) .gd-box{background:var(--gold);box-shadow:none}
/* a class you have had your say on wears its own colour */
html.lab-on-hub .gd-tiles2 li.voted>.gd-ctile,html.lab-on-hub .gd-tiles2 li>.gd-ctile:has(input:checked){background:color-mix(in srgb,var(--cc) 9%,#1d1b14);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 55%,#4a4020),inset 0 2px 0 var(--cc)}
html.lab-on-hub .gd-tiles2 li.voted>.gd-ctile img,html.lab-on-hub .gd-tiles2 li>.gd-ctile:has(input:checked) img{box-shadow:0 0 0 1px #000,0 0 0 2px var(--cc)}
html.lab-on-hub .gd-listnote{margin-top:10px}
@media (min-width:821px){html.lab-on-hub .gd-tiles2 li>.gd-ctile{padding:16px 10px 12px}html.lab-on-hub .gd-tiles2 .gd-justvote,html.lab-on-hub .gd-tiles2 .gd-isup{height:34px;font-size:12.5px}html.lab-on-hub .gd-tiles2 .gd-tellme,html.lab-on-hub .gd-tiles2 .gd-readit{height:30px;font-size:12px}}
@media (min-width:1180px){html.lab-on-hub .gd-tiles2 li>.gd-ctile{padding:16px 6px 12px}}
@media (max-width:1179px){html.lab-on-hub .gd-tiles2 li{flex-basis:calc((100% - 4 * 8px) / 5)}}
@media (max-width:639px){html.lab-on-hub .gd-tiles2 li{flex-basis:calc((100% - 2 * 8px) / 3)}}
@media (max-width:520px){html.lab-on-hub .gd-tiles2{gap:7px}html.lab-on-hub .gd-tiles2 li{flex-basis:calc((100% - 2 * 7px) / 3)}html.lab-on-hub .gd-tiles2 li>.gd-ctile{padding:12px 5px 8px}html.lab-on-hub .gd-tiles2 li>.gd-ctile img{width:44px;height:44px}html.lab-on-hub .gd-tiles2 .gd-justvote{height:32px;padding:0 4px;gap:5px;font-size:11.5px}html.lab-on-hub .gd-tiles2 .gd-tellme{padding:0 2px;gap:5px;font-size:10.5px}html.lab-on-hub .gd-tiles2 .gd-tellme .gd-box{width:12px;height:12px}}
@media (max-width:359px){html.lab-on-hub .gd-tiles2 li{flex-basis:calc((100% - 7px) / 2)}}
/* a class whose guide is up, greyed in its place so the grid stays whole (Chris, 30 Sep): a green "Guide is up" where the vote would
   be, the green of the Up now cards, and the way to read it under that. The tile is one link to the guide, and wakes up under a mouse. */
html.lab-on-hub .gd-tiles2 li.done>.gd-ctile{cursor:pointer;text-decoration:none;color:inherit;background:#141310;box-shadow:inset 0 0 0 1px #2c2920,inset 0 2px 0 #3d3727}
html.lab-on-hub .gd-tiles2 li.done>.gd-ctile img{filter:grayscale(1) brightness(.6);box-shadow:0 0 0 1px #000,0 0 0 2px #3a3528;transition:filter .15s}
html.lab-on-hub .gd-tiles2 li.done>.gd-ctile b{color:#7d7767;transition:color .15s}
html.lab-on-hub .gd-tiles2 .gd-isup{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 6px;border-radius:5px;background:rgba(87,209,99,.08);box-shadow:inset 0 0 0 1px rgba(87,209,99,.34);color:#8ad890;font:700 12px/1 "Open Sans",system-ui,sans-serif;white-space:nowrap}
html.lab-on-hub .gd-tiles2 .gd-isup .gd-ico{width:11px;height:11px}
html.lab-on-hub .gd-tiles2 .gd-readit{display:flex;align-items:center;justify-content:center;gap:5px;height:28px;padding:0;border:0;background:none;box-shadow:none;color:#a8925a;font:600 11.5px/1 "Open Sans",system-ui,sans-serif;white-space:nowrap;transition:color .15s}
html.lab-on-hub .gd-tiles2 .gd-readit i{font-style:normal;font-size:15px;line-height:1;transform:translateY(-1px)}
html.lab-on-hub .gd-tiles2 li.done>.gd-ctile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover){html.lab-on-hub .gd-tiles2 li.done>.gd-ctile:hover{box-shadow:inset 0 0 0 1px #4a4430,inset 0 2px 0 var(--gold2)}html.lab-on-hub .gd-tiles2 li.done>.gd-ctile:hover img{filter:grayscale(.15) brightness(.92)}html.lab-on-hub .gd-tiles2 li.done>.gd-ctile:hover b{color:color-mix(in srgb,var(--cc) 70%,#fff)}html.lab-on-hub .gd-tiles2 li.done>.gd-ctile:hover .gd-readit{color:#ffd75e}}
@media (min-width:821px){html.lab-on-hub .gd-tiles2 .gd-isup{height:34px;font-size:12.5px}html.lab-on-hub .gd-tiles2 .gd-readit{height:30px;font-size:12px}}
@media (max-width:520px){html.lab-on-hub .gd-tiles2 .gd-isup{height:32px;padding:0 4px;gap:5px;font-size:11.5px}html.lab-on-hub .gd-tiles2 .gd-readit{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){html.lab-on-hub .gd-tiles2 .gd-justvote,html.lab-on-hub .gd-tiles2 .gd-tellme,html.lab-on-hub .gd-tiles2 .gd-box{transition:none}html.lab-on-hub .gd-tiles2 .gd-justvote:active{transform:none}}