/* A first visit (Study No. 1 before today's board, intro.js, prelude.js, hover.js) and the sound control (sound.js). */

/* Skip: in the date's slot beside "Study No. 1" (the date has nothing to say during the Study), in the date's own size
   and colour, so the label's two lines stay one voice. It's the way out to today's board, a tertiary action: no fill,
   no border, just the word, darkening under a pointer. The goal and the counters below keep the daily's own row. */
.skip { appearance: none; border: 0; background: none; padding: 0; margin: 0; font-family: inherit; font-weight: inherit; text-align: inherit; cursor: pointer; }
.skip[hidden] { display: none; }
@media (hover: hover) { .skip:hover { color: var(--ink); } }


/* The control sits first among the small print's links, a fingertip target around a mark the size of the line's text. */
.sound {
  appearance: none; border: 0; background: none; color: var(--quiet); cursor: pointer;
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px;
  -webkit-tap-highlight-color: transparent;
}
.sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sound .cone { fill: currentColor; stroke-width: 1.2; }
.sound .wave { transition: opacity 0.2s ease-out, transform 0.2s ease-out; transform-origin: 10px 10px; }
.sound .strike { opacity: 0; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.2s ease-out, opacity 0s 0.2s; }
.sound.off .wave { opacity: 0; transform: scale(0.8); }
.sound.off .strike { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s ease-out, opacity 0s; }
.sound:active { transform: scale(0.94); }
@media (hover: hover) { .sound:hover { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .sound * { transition: none !important; } }

/* While the Study is on the wall, the result block holds only the way on: the day's actions, the app and the record
   line belong to today's board. */
.hero.welcome .after > :not(.welcome-actions) { display: none !important; }
.hero:not(.welcome) .welcome-actions { display: none; }

/* MARK: The first visit, wordless (intro.js) */

/* The glow, as Marks.swift draws it: Mondrian's yellow, 7 px beyond the mark, blurred 9, breathing. */
.halo { position: absolute; z-index: -1; pointer-events: none; }
.halo-breath { position: absolute; inset: 0; background: #F4C736; filter: blur(9px); }

/* A piece of paint (or a broken line) in flight, above everything. */
.piece { position: fixed; z-index: 50; pointer-events: none; border-radius: 3px; will-change: transform;
  /* A chip of paint peeled off the canvas: a linen edge so it reads against its own colour, and a lifted shadow. */
  box-shadow: 0 0 0 2px #F4F1EA, 0 6px 14px rgba(23, 22, 21, 0.28); }
.piece.edge { box-shadow: 0 0 0 1px rgba(23, 22, 21, 0.25), 0 6px 14px rgba(23, 22, 21, 0.28); }

/* While paint is in the air, the ring waits to fill until it lands. */
.ring.incoming .ring-fill { transition-delay: 1s; }

/* In Study No. 1, each mark waits for the moment that gives it meaning; until then its place is kept, empty. Today's
   tries belong to today's board, so they wait for it. */
.hero.welcome:not(.met-ring) #ring,
.hero.welcome.spare-coming:not(.met-spare) #spare,
.hero.welcome:not(.met-ring):not(.met-spare) .progress { visibility: hidden; }
.hero.welcome .tries-mark { display: none; }
/* Skip ends on the board's right edge, where the date does. */
.hero.welcome .mast .skip { margin-left: auto; }
.hero.welcome:not(.met-spare):not(.spare-coming) #spare { display: none; }

/* The prelude (prelude.js) lies over the live board and takes no touches: any touch ends it and goes to the board. */
.board .prelude { pointer-events: none; z-index: 2; }

/* Study No. 1's goal while it's played, in the placard's place for words: secondary, as the app's status line is. */
.placard-title.goal { font: 400 16px/1.25 var(--sans); color: var(--quiet); }

.hero.welcome .placard-words { order: 1; margin-right: auto; }

/* The clock's eye (prototype D): faint, tucked against the digits, a fingertip target around a small mark. Put away, the
   digits fade and leave the layout, so the struck eye takes the clock's place; at the finish the time comes back with
   the painting and the eye steps aside. */
.clock-eye { appearance: none; border: 0; background: none; padding: 0; width: 44px; height: 44px; margin: -12px -12px -12px -13px;
  display: inline-grid; place-items: center; align-self: center; color: var(--faint); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clock-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: transform 0.16s ease-out; }
.clock-eye .slash { stroke-dasharray: 19; stroke-dashoffset: 19; transition: stroke-dashoffset 0.22s ease-out; }
.clock-eye:active svg { transform: scale(0.88); }
@media (hover: hover) { .clock-eye:hover { color: var(--quiet); } }
.clock-away .clock-eye .slash { stroke-dashoffset: 0; }
.race .clock { transition: opacity 0.22s ease, filter 0.22s ease; }
.clock-away .race .clock { position: absolute; opacity: 0; filter: blur(6px); pointer-events: none; }
.board.finished ~ .placard .clock-eye, .hero.settled .clock-eye { display: none; }
.clock-away .board.finished ~ .placard .race .clock, .clock-away.settled .race .clock { position: static; opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .race .clock, .clock-eye .slash { transition: none; } }