/* Imagination Game practice player: one editorial template for all sixteen exercises, informed by
   Open: a photograph that recedes, a title grouped with its control, and a running order on a
   quiet grid. Activated by player.js, which adds .practice-ui. */
.practice-ui {
  color-scheme: dark;
  --ink: #000;
  --text: #ece6de;
  --muted: #a59c92;
  --rule: #2c2926;
  --track: #3d3935;
  --window: #8a8076;
  --field: #0e0d0c;
  --gutter: 24px;
  --horizon: 52.3%;
}
.practice-ui * { box-sizing: border-box; }
.practice-ui body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.practice-ui .reading { max-width: none; margin: 0; padding: 0; }
.practice-ui .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.practice-ui p { margin: 0; }
.practice-ui a { color: inherit; }
.practice-ui button, .practice-ui textarea { font: inherit; color: inherit; }
.practice-ui button { cursor: pointer; }
.practice-ui :focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.practice-ui h1:focus { outline: none; }
.practice-ui .skip { z-index: 5; padding: 12px 16px; background: var(--text); color: var(--ink); }

/* Header: two quiet corners, as in Open's site, rather than a navigation bar. */
.practice-ui header { position: relative; z-index: 3; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; height: 56px; margin: 0; padding: 0 var(--gutter); border: 0; font-size: 14px; transition: opacity 1.2s ease; }
.practice-ui header .logo { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 15px; letter-spacing: .3em; text-decoration: none; color: var(--text); }
.practice-ui header .exit { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.practice-ui header .exit:hover { color: var(--text); }

/* The photograph. Black field, so it meets the page without a frame. */
.practice-ui .plate { position: relative; margin: 0; height: min(54svh, 460px); overflow: hidden; background: var(--ink); }
.practice-ui .plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); transition: opacity 1.6s ease, transform 1.6s ease, object-position 1.6s ease; }
.practice-ui .plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.75) 78%, #000 97%); }

/* The sheet: title, control, then what happens. */
.practice-ui .sheet { position: relative; z-index: 2; padding: 0 var(--gutter) 48px; }
.practice-ui .lead { margin-top: -120px; transition: opacity 1.2s ease; }
.practice-ui .kicker, .practice-ui .meta { font-size: 14px; color: var(--muted); }
.practice-ui .kicker { margin-bottom: 6px; }
.practice-ui .meta { margin-top: 8px; }
.practice-ui h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: .05em; color: var(--text); text-wrap: balance; }

.practice-ui h1.long { font-size: 23px; line-height: 1.25; }
/* Transport: one circle that never moves. Begin, pause and resume all live here. */
.practice-ui .transport { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: center; margin-top: 24px; transition: opacity 1.2s ease; }
.practice-ui .play { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: var(--ink); }
.practice-ui .play:hover { background: #fff; }
.practice-ui .play:disabled { opacity: .45; cursor: wait; }
.practice-ui .play svg { width: 26px; height: 26px; fill: currentColor; }
.practice-ui[data-session=ready] .play svg, .practice-ui[data-session=paused] .play svg { transform: translateX(1.5px); }
.practice-ui .transport-row { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; min-height: 44px; }
.practice-ui .status { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.practice-ui .track { position: relative; height: 2px; margin-top: 2px; background: var(--track); }
.practice-ui .track span { position: absolute; top: 0; left: 0; height: 2px; }
.practice-ui .track .window { background: var(--window); }
.practice-ui .track .fill { width: 0; background: var(--text); }
.practice-ui .times { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.practice-ui .transport-unavailable .placeholder-circle { width: 64px; height: 64px; border: 1px solid var(--track); border-radius: 50%; }
.practice-ui .transport-unavailable .status { color: var(--muted); font-weight: 400; }
.practice-ui .error { margin-top: 12px; color: #f0b9a4; font-size: 15px; }
.practice-ui .error[hidden] { display: none; }

/* Below the horizon line. */
.practice-ui .below { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); transition: opacity 1.2s ease; }
.practice-ui .lede { max-width: 34em; margin-bottom: 28px; font-size: 17px; line-height: 1.65; }
.practice-ui .running-order { list-style: none; margin: 0; padding: 0; }
.practice-ui .running-order li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.practice-ui .running-order li:first-child { border-top: 0; padding-top: 0; }
.practice-ui .running-order .t { grid-row: span 2; font-size: 15px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.practice-ui .running-order .n { font-size: 17px; line-height: 1.5; }
.practice-ui .running-order .d { grid-column: 2; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.practice-ui .running-order [data-state=past] .n, .practice-ui .running-order [data-state=future] .n { color: var(--muted); }
.practice-ui .running-order [data-state=current] .n { font-weight: 500; }
.practice-ui .running-order [data-state=current] .t { color: var(--text); }
.practice-ui[data-session=playing] .running-order [data-state=past] .d, .practice-ui[data-session=playing] .running-order [data-state=future] .d,
.practice-ui[data-session=paused] .running-order [data-state=past] .d, .practice-ui[data-session=paused] .running-order [data-state=future] .d { display: none; }
.practice-ui .restart-row { display: none; margin-top: 12px; }
.practice-ui[data-session=paused] .restart-row { display: block; }
.practice-ui .text-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.practice-ui .text-button:hover { color: var(--text); }

/* Listening: preparation leaves; only the running order and the control remain. */
.practice-ui[data-session=playing] .lede, .practice-ui[data-session=paused] .lede { display: none; }
.practice-ui[data-screen=session][data-session=playing] .plate img, .practice-ui[data-screen=session][data-session=paused] .plate img { opacity: .55; }
.practice-ui[data-screen=session][data-media=closing][data-session=playing] .plate img, .practice-ui[data-screen=session][data-media=closing][data-session=paused] .plate img { opacity: .3; }
/* Visualization: the photograph goes dark so it cannot compete with the practitioner's own image. */
.practice-ui[data-screen=session][data-media=interval][data-session=playing] .plate img { opacity: 0; }
.practice-ui[data-screen=session][data-media=interval][data-session=paused] .plate img { opacity: .15; }
.practice-ui[data-media=interval][data-session=playing] header,
.practice-ui[data-media=interval][data-session=playing] .title-group,
.practice-ui[data-media=interval][data-session=playing] .below { opacity: .28; }
.practice-ui[data-media=interval][data-session=playing] .transport { opacity: .6; }
.practice-ui[data-media=interval][data-session=playing] .transport:hover,
.practice-ui[data-media=interval][data-session=playing] .transport:focus-within { opacity: 1; }

/* Original text and credits. */
.practice-ui .source { margin-top: 32px; border-top: 1px solid var(--rule); }
.practice-ui .source summary { display: flex; align-items: center; min-height: 52px; color: var(--muted); font-size: 15px; cursor: pointer; }
.practice-ui .source summary:hover { color: var(--text); }
.practice-ui .source-prose { max-width: 34em; margin: 8px 0 20px; font-size: 17px; line-height: 1.75; }
.practice-ui .source-prose p + p { margin-top: 1em; }
.practice-ui .reading-text { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.practice-ui .reading-text .source-prose { margin-top: 0; }
.practice-ui .credit { max-width: 34em; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.practice-ui .credit a { text-underline-offset: 3px; }

/* Reflection: the same sheet, now beside the reflection rather than the object. */
.practice-ui[data-screen=complete] .plate { height: min(40svh, 320px); }
.practice-ui[data-screen=complete] .plate img { object-position: var(--reflection-focus); }
.practice-ui[data-screen=complete] .plate::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 26%; pointer-events: none; background: linear-gradient(to bottom, #000 15%, transparent); }
.practice-ui label { display: block; margin-bottom: 10px; font-size: 15px; }
.practice-ui label span { color: var(--muted); }
.practice-ui textarea { display: block; width: 100%; min-height: 140px; padding: 14px 16px; border: 1px solid var(--track); border-radius: 4px; background: var(--field); font-size: 17px; line-height: 1.6; resize: vertical; }
.practice-ui textarea::placeholder { color: #8a8279; }
.practice-ui .small { margin-top: 10px; font-size: 14px; color: var(--muted); }
.practice-ui .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.practice-ui .primary { min-height: 52px; padding: 0 28px; border: 0; border-radius: 26px; background: var(--text); color: var(--ink); font-size: 16px; font-weight: 500; }
.practice-ui .primary:hover { background: #fff; }
.practice-ui blockquote { margin: 10px 0 0; padding-left: 16px; border-left: 2px solid var(--track); font-size: 17px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Exercise index: same spread; rows of thumbnail, number and title. */
.practice-ui[data-page=index] .plate { height: min(40svh, 320px); }
.practice-ui .header-meta { color: var(--muted); }
.practice-ui .index-intro { max-width: 34em; margin-top: 20px; font-size: 17px; line-height: 1.65; }
.practice-ui .exercise-group { margin-top: 40px; }
.practice-ui .exercise-group h2 { margin: 0 0 8px; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text); }
.practice-ui .exercise-group h2 span { font-weight: 400; color: var(--muted); }
.practice-ui .exercise-list { list-style: none; margin: 0; padding: 0; }
.practice-ui .exercise-list li { margin: 0; border-top: 1px solid var(--rule); }
.practice-ui .exercise-list li:first-child { border-top: 0; }
.practice-ui .exercise-row { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: 80px; padding: 12px 0; text-decoration: none; color: var(--text); }
.practice-ui .row-number { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.practice-ui .row-thumb { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--field); opacity: .9; transition: opacity .3s ease; }
.practice-ui .row-text { display: grid; gap: 2px; }
.practice-ui .row-title { font-size: 17px; line-height: 1.4; }
.practice-ui .row-meta { font-size: 14px; color: var(--muted); }
.practice-ui .exercise-row:hover .row-title { text-decoration: underline; text-decoration-color: var(--window); text-underline-offset: 4px; }
.practice-ui .exercise-row:hover .row-thumb, .practice-ui .exercise-row:focus-visible .row-thumb { opacity: 1; }
.practice-ui .index-credit { margin-top: 40px; }

/* Desktop: a spread. Photograph on the left page; text hung from the apple's horizon on the right. */
@media (min-width: 900px) {
  .practice-ui { --plate-w: min(46vw, 66.6svh); }
  .practice-ui header { position: absolute; top: 0; left: 0; right: 0; height: 80px; padding: 0 48px; }
  .practice-ui .plate { position: fixed; top: 0; bottom: 0; left: 0; width: var(--plate-w); height: auto; }
  .practice-ui .plate img { object-position: var(--focus-desktop); }
  .practice-ui .plate::after { background: linear-gradient(to right, transparent 82%, #000); }
  .practice-ui .sheet { max-width: 520px; margin-left: calc(var(--plate-w) + clamp(48px, 7vw, 112px)); padding: 0 48px 72px 0; }
  .practice-ui .lead { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--horizon-y, 52.3svh); margin-top: 0; padding: 96px 0 32px; }
  .practice-ui h1 { font-size: 38px; }
  .practice-ui h1.long { font-size: 30px; }
  .practice-ui[data-page=index] .plate { height: auto; }
  .practice-ui[data-page=index] .lead + .exercise-group { margin-top: 0; }
  .practice-ui .below { margin-top: 0; padding-top: 28px; }
  .practice-ui[data-screen=complete] .plate { height: auto; }
  /* Shift the photograph up so its horizon sits at 28.3%, and hang the reflection sheet from it. */
  .practice-ui[data-screen=complete] .plate img { transform: translateY(var(--reflection-shift)); }
  .practice-ui[data-screen=complete] .plate::before { height: 20%; }
  .practice-ui[data-screen=complete] .lead { min-height: 28.3svh; }
}
@media (max-width: 360px) {
  .practice-ui { --gutter: 18px; }
  .practice-ui h1 { font-size: 25px; }
  .practice-ui .transport { column-gap: 14px; }
  .practice-ui .status { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-ui *, .practice-ui .plate img { transition: none !important; }
}