/* JAKE · styles for the forum-table home · j2   (see jake.js)
   A fold control on the side modules; the look of what he has put up front (glass, a lit edge, a slow breath);
   the footer line that shows what he remembers. Plus two faint pools of light behind the page so glass has something to sit on. */
body{background:transparent}
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(44vmax 32vmax at 14% 10%,rgba(255,106,42,.07),transparent 70%),radial-gradient(40vmax 30vmax at 90% 34%,rgba(115,186,157,.06),transparent 70%);
  animation:jake-drift 47s ease-in-out infinite alternate}
@keyframes jake-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2.5%,0) scale(1.06)}}

/* side modules */
.side [data-jake]{position:relative}
.side [data-jake]:not([data-jake-fixed]) .side-h{padding-right:38px}
.jake-toggle{position:absolute;top:14px;right:14px;width:28px;height:28px;padding:0;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 var(--body);cursor:pointer}
.jake-toggle:hover{color:var(--orange);border-color:var(--orange)}
.side .jake-min{padding-bottom:14px}
.jake-min>:not(.side-h):not(.jake-toggle){display:none}
.jake-min .side-h{margin-bottom:0}
.side .card.jake-focus{position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 48%,rgba(255,106,42,.07)),rgba(16,25,32,.78);
  border-color:rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px -20px rgba(0,0,0,.75)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side .card.jake-focus{-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
}
.side .card.jake-focus::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 30px 2px rgba(255,106,42,.24);opacity:.3;animation:jake-breathe 7.5s ease-in-out infinite}
@keyframes jake-breathe{0%,100%{opacity:.22}50%{opacity:.72}}
.jake-focus .rotation img,.jake-focus .rotation .ph{width:84px;height:84px;border-radius:10px}
.jake-focus .rotation a{min-height:96px}

/* up front: the first body of the same table, in glass, with the reason on its own row */
.topics-table tbody.jake-front td,.topics-table tbody.jake-front th{background:linear-gradient(90deg,rgba(255,106,42,.10),rgba(255,255,255,.035) 30%,rgba(255,255,255,.02))}
.topics-table tbody.jake-front tr.jake-why th{position:static;text-align:left;text-transform:none;letter-spacing:.04em;font:400 12px/1.3 var(--body);color:var(--muted);padding:10px 14px 6px;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.topics-table tbody.jake-front tr.jake-why b{color:var(--orange);font-weight:700}
.topics-table tbody.jake-front tr.jake-up td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.topics-table tbody.jake-front tr.jake-up .tt{font-size:18px}
.topics-table tbody.jake-front tr:last-child td{border-bottom:2px solid rgba(255,106,42,.35)}
.topics-table tbody.jake-front tr.jake-up td:first-child{animation:jake-edge 7.5s ease-in-out infinite}
@keyframes jake-edge{0%,100%{box-shadow:inset 3px 0 0 rgba(255,106,42,.55)}50%{box-shadow:inset 3px 0 0 rgba(255,106,42,1),inset 14px 0 18px -14px rgba(255,106,42,.45)}}

/* the one place a person can see what he remembers */
.jake-foot{max-width:var(--maxw);margin:6px auto 0;padding:0 var(--gut) 20px;font-size:12px;color:var(--muted)}
.jake-about summary{cursor:pointer;display:inline-block;padding:6px 0;letter-spacing:.04em}
.jake-about summary:hover{color:var(--ink-hi)}
.jake-about-body{max-width:640px;padding:6px 0 4px;line-height:1.6}
.jake-about-body p{margin:0 0 8px}
.jake-about-body ul{margin:0 0 10px;padding-left:18px}
.jake-reset{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 12px var(--body);cursor:pointer}
.jake-reset:hover{color:var(--orange);border-color:var(--orange)}

/* phone: rows are stacked blocks, so the glass and the lit edge sit on the whole row, not on each cell */
@media (max-width:900px){
  .topics-table tbody.jake-front td,.topics-table tbody.jake-front th{background:none}
  .topics-table tbody.jake-front tr{background:linear-gradient(90deg,rgba(255,106,42,.10),rgba(255,255,255,.035) 30%,rgba(255,255,255,.02))}
  .topics-table tbody.jake-front tr.jake-why{padding:10px 14px 2px;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
  .topics-table tbody.jake-front tr.jake-why th{display:block;padding:0;box-shadow:none}
  .topics-table tbody.jake-front tr.jake-up{box-shadow:inset 3px 0 0 var(--orange);animation:jake-edge 7.5s ease-in-out infinite}
  .topics-table tbody.jake-front tr.jake-up td:first-child{box-shadow:none;animation:none}
  .topics-table tbody.jake-front tr:last-child td{border-bottom:0}
  .topics-table tbody.jake-front tr:last-child{border-bottom:2px solid rgba(255,106,42,.35)}
}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .side .card.jake-focus::after{animation:none;opacity:.32}
  .topics-table tbody.jake-front tr.jake-up,.topics-table tbody.jake-front tr.jake-up td:first-child{animation:none}
}