/* The reading screen (DESIGN.md section 7). It ignores the brand except the fonts:
   nothing but the sentence, a row of dots, and a ring to hold when leaving. */

:root {
  --day-bg: #FFFFFF;
  --day-fg: #0B0D1F;
  --day-dot: rgba(20, 24, 58, .25);
  --day-dot-on: #14183A;
  --night-bg: #0C0D18;
  --night-fg: #FFE7A3;
  --night-dot: rgba(255, 210, 63, .3);
  --night-dot-on: #FFD23F;
  --paper-bg: #FFF9E8;
  --paper-fg: #14183A;
  --paper-dot: rgba(36, 71, 216, .25);
  --paper-dot-on: #2447D8;
}

.rd {
  --rd-bg: var(--day-bg);
  --rd-fg: var(--day-fg);
  --rd-dot: var(--day-dot);
  --rd-dot-on: var(--day-dot-on);
  --rd-size: 48px;
  position: relative; height: 100%; width: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--rd-bg); color: var(--rd-fg);
  font-family: var(--f-read);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; cursor: default;
  outline: none;
}
.rd[data-look="night"] { --rd-bg: var(--night-bg); --rd-fg: var(--night-fg); --rd-dot: var(--night-dot); --rd-dot-on: var(--night-dot-on); }
.rd[data-look="paper"] { --rd-bg: var(--paper-bg); --rd-fg: var(--paper-fg); --rd-dot: var(--paper-dot); --rd-dot-on: var(--paper-dot-on); }
.rd[data-face="sans"] { font-family: var(--f-ui); }
.rd:focus-visible { box-shadow: inset 0 0 0 4px var(--rd-dot-on); }

.rd__text {
  align-self: center; margin: 0; padding: 64px 28px 0;
  font-size: var(--rd-size); font-weight: 500; line-height: 1.22; letter-spacing: -.005em;
  text-align: left; overflow-wrap: break-word; hyphens: none;
  max-width: 22em;
}
.rd__text.is-fading { opacity: 0; }
.rd__probe { position: absolute; left: 0; top: 0; width: var(--probe-w); visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .rd__text { transition: opacity .12s linear; } }

.rd__foot { padding: 0 28px 22px; display: grid; justify-items: center; gap: 10px; min-height: 56px; }
.rd__dots { display: flex; gap: 9px; justify-content: center; align-items: center; height: 14px; }
.rd__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-dot); }
.rd__dots i.is-on { background: var(--rd-dot-on); width: 10px; height: 10px; }
.rd__dots i.is-more { width: 5px; height: 5px; }

/* practice adds one line under the dots: elapsed time, the only number on this screen */
.rd__clock { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rd__clock[hidden] { display: none; }
.rd__clock::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
@media (prefers-reduced-motion: no-preference) { .rd__clock::before { animation: beat 1.2s ease-in-out infinite; } }
@keyframes beat { 50% { transform: scale(.55); opacity: .6; } }

.rd__notice {
  margin: 0; max-width: 30em; text-align: center;
  font-family: var(--f-ui); font-size: .92rem; font-weight: 600; line-height: 1.35;
}
.rd__notice[hidden] { display: none; }

/* the ring to hold: top corner, opposite the advancing thumb */
.rd__exit {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--rd-fg); opacity: .3; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
.rd[data-hand="left"] .rd__exit { left: auto; right: 12px; }
.rd__exit:hover, .rd__exit:focus-visible, .rd__exit.is-holding { opacity: .85; }
.rd__exit:focus-visible { outline: 3px solid var(--rd-dot-on); outline-offset: 2px; }
.rd__exit svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.rd__exit .ring-track { fill: none; stroke: currentColor; stroke-width: 2.5; }
.rd__exit .ring-fill { fill: none; stroke: currentColor; stroke-width: 5; stroke-dasharray: 126; stroke-dashoffset: 126; }
.rd__exit.is-holding .ring-fill { stroke-dashoffset: 0; transition: stroke-dashoffset .8s linear; }
.rd__exit .ring-x { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

/* inside the home page's stage the type scales to the frame */
.stage__frame .rd { --rd-size: clamp(22px, 6.4cqi, 40px); }
.stage__frame .rd__text { padding: 60px 26px 0; }

/* full screen: the reading screen proper */
.rd-full {
  position: fixed; inset: 0; z-index: 1000; height: 100dvh; border: 0 !important; border-radius: 0 !important;
}
.rd-full .rd { --rd-size: var(--rd-user-size, 48px); }
.rd-full .rd__text { padding: 72px 28px 0; max-width: 18em; justify-self: start; }
.rd-full .rd__foot { padding-bottom: max(15dvh, 28px); }
@media (min-width: 900px) and (orientation: landscape) {
  .rd-full .rd { --rd-size: calc(var(--rd-user-size, 48px) * 1.25); }
  .rd-full .rd__text { padding-left: max(28px, 8vw); }
}
html.has-rd-full, html.has-rd-full body { overflow: clip; }