/* The book, on a screen. White ground, one serif, grey mesh, black marks, the spine's green
   as the only accent. Nothing here is a decision the person has to make. */

:root {
  --ink: #111;
  --paper: #fff;
  --mesh: #b3b3b3;
  --green: #2f4f3a;
  --track: #d7e4db;     /* pale sage: how much there is */
  --pop: #5f9a72;       /* calm leaf green: how far along */
  --muted: #777;
  --serif: Baskerville, "Libre Baskerville", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
  display: block;
}

#top, #bottom {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}

#bottom {
  top: auto;
  bottom: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  align-items: flex-end;
}

#top { top: 0; }

#top > *, #bottom > * { pointer-events: auto; }

/* Back to all designs: top left, where the rest of the world keeps it. */
#back {
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 8px;
  display: grid;
  place-items: center;
  color: var(--ink);
  border-radius: 50%;
  flex: none;
}

#back svg { display: block; margin-left: -1px; }

#top { justify-content: flex-start; }
#ring { margin-left: auto; }

#who {
  font-size: 15px;
  line-height: 1.3;
  background: rgba(255, 255, 255, .85);
  padding: 4px 8px 4px 6px;
  border-radius: 3px;
  max-width: 70vw;
}

#number { color: var(--muted); margin-right: .35em; }
#number::after { content: " ·"; }
#effort { color: var(--green); margin-left: .5em; letter-spacing: .1em; font-size: 13px; }

button, a {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, .85);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button:active { background: #f2f2f2; }

#ring {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  display: grid;
  place-items: center;
}

#ring svg { display: block; transform: rotate(-90deg); }
#ring circle { fill: none; stroke-width: 3; }
#ring .track { stroke: var(--track); }
#ring .done {
  stroke: var(--pop);
  stroke-linecap: round;
  stroke-dasharray: 106.8;      /* 2 * pi * 17 */
  stroke-dashoffset: 106.8;
  transition: stroke-dashoffset .5s ease-out;
}

#pct {
  position: absolute;
  font-size: 11px;
  color: var(--pop);
  display: none;
}

#ring.show-pct svg { display: none; }
#ring.show-pct #pct { display: block; }

#menu { position: relative; }

#sheet {
  position: absolute;
  right: 0;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

#sheet[hidden] { display: none; }
#sheet button, #sheet a { text-align: left; background: #fff; }

#hint, #finished {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  margin: 0;
  padding: 4px 12px;
  background: rgba(255, 255, 255, .85);
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
  font-size: 17px;
  color: var(--ink);
  pointer-events: none;
  transition: opacity .6s;
}

#hint[hidden], #finished[hidden] { display: none; }
#finished { color: var(--green); }