/* The Bliss studies' shared page. Luke Steuber.
   Copied into each game by tools/bliss/copy_shell.py; edit it here. */
@font-face{font-family:"Plex Mono";src:url('./fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url('./fonts/IBMPlexSans-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light dark;--bg:#fff;--ink:#000;--text:#111;--sub:#5e5e5e;--line:#d4d4d4;--guide:#8f8f8f;--frame:#1c1c1c;--band:rgba(0,0,0,.05);--scrim:rgba(255,255,255,.84)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--frame:#ededed;--band:rgba(255,255,255,.06);--scrim:rgba(0,0,0,.8)}}
:root[data-theme=dark]{--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--frame:#ededed;--band:rgba(255,255,255,.06);--scrim:rgba(0,0,0,.8)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}
body{font:400 16px/1.45 "Plex Sans",system-ui,sans-serif;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:56px 1fr 72px;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,select{font:inherit;color:inherit}
header{position:relative;display:flex;align-items:center;justify-content:center}
#readout{font:500 13px/1 "Plex Mono",ui-monospace,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--sub)}
main{position:relative;min-height:0;min-width:0;display:grid;place-items:center;padding:0 16px}
#stage{position:relative;width:100%;height:100%;min-width:0;display:grid;place-items:center;outline:none}
.toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px max(12px,calc((100vw - 760px)/2));gap:12px}
.toolbar>div{display:flex;gap:4px}
.icon{width:48px;height:48px;min-width:48px;padding:12px;border:0;border-radius:0;background:none;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:opacity .15s,transform .1s}
.icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon:active{transform:scale(.94)}
.icon:disabled{opacity:.3;cursor:default}
#next{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);width:64px;height:64px;padding:18px;border:1px solid var(--frame);border-radius:50%;background:var(--bg);z-index:3}
#next:active{transform:translateX(-50%) scale(.94)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A Bliss symbol: ink on the page, with the skyline and earthline Bliss is written between. */
.bliss{display:block;overflow:visible}
.bliss .ink{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.bliss .rule{stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}
.gloss{font:400 14px/1.2 "Plex Sans",system-ui,sans-serif;color:var(--sub);text-align:center;min-height:1.2em;overflow-wrap:anywhere}
html[data-words=hidden] .gloss{visibility:hidden}

/* Sheets */
dialog.sheet{width:min(32rem,calc(100vw - 16px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--frame);border-radius:0;background:var(--bg);color:var(--text);display:none;flex-direction:column}
dialog.sheet[open]{display:flex}
dialog.sheet::backdrop{background:var(--scrim)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 24px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font:500 16px/1 "Plex Mono",ui-monospace,monospace}
.sheet-body{padding:20px 24px;overflow:auto}
.sheet-body p{margin:0 0 12px;max-width:60ch}
.sheet-body section+section{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.sheet-body .lead{font-size:18px;line-height:1.35;color:var(--ink)}
.sheet-body kbd{font:500 14px "Plex Mono",ui-monospace,monospace}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.row select{min-height:44px;padding:0 8px;border:1px solid var(--line);border-radius:0;background:var(--bg)}
.sheet-foot{padding:12px 24px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
.sheet-foot a{color:inherit}
.notice{font-size:13px;color:var(--sub)}

/* Board 1's lesson: one line of rules between the readout and the board, in its own row. */
.coach{margin:0;padding:0 16px 8px;justify-self:center;max-width:36ch;text-align:center;font:400 15px/1.35 "Plex Sans",system-ui,sans-serif;color:var(--text);text-wrap:balance}
body.coached{grid-template-rows:56px auto minmax(0,1fr) 72px}
body.coached>header{grid-row:1}body.coached>.coach{grid-row:2}body.coached>main{grid-row:3}body.coached>.toolbar{grid-row:4}
@keyframes hint-pulse{0%,100%{outline-color:transparent}50%{outline-color:var(--ink)}}
@media(max-height:520px) and (min-width:560px){
  body{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:40px 1fr}
  header{grid-column:1}
  main{grid-column:1;grid-row:2}
  .toolbar{grid-column:2;grid-row:1/3;flex-direction:column;padding:8px}
  .toolbar>div{flex-direction:column}
  #next{bottom:16px;left:calc(50% - 32px)}
  body.coached{grid-template-rows:40px auto minmax(0,1fr)}
  .coach{max-width:64ch;padding-bottom:4px}
  body.coached>.coach{grid-column:1;grid-row:2}body.coached>main{grid-row:3}body.coached>.toolbar{grid-row:1/4}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html[data-motion=reduce] *{animation:none!important;transition:none!important}