/* The reading workspace, one file for every pillar (Cards, Dreams, Signs; Slovenian and English).
   On wide screens everything sits on one screen. Before the reading: the panel (what the person
   writes or chooses) on the left and the stage (cards, symbol) on the right. Once the reading is
   shown: the reading on the left and the stage on the right. Phones stack: panel, stage, reading.
   The reading is the one child of .reading-workspace with class .result or .reading-result. */
.reading-workspace{max-width:1120px;margin:0 auto}
.reading-panel,.reading-stage,.reading-workspace>.result,.reading-workspace>.reading-result{min-width:0}
@media(min-width:960px){
  .reading-workspace{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);grid-template-areas:"panel stage" "reading stage";grid-template-rows:auto 1fr;column-gap:3rem;row-gap:0;align-items:start}
  .reading-panel{grid-area:panel;position:sticky;top:6.5rem}
  .reading-stage{grid-area:stage}
  .reading-workspace>.result,.reading-workspace>.reading-result{grid-area:reading;margin:0;max-width:none;max-height:calc(100vh - 16rem);overflow-y:auto;scrollbar-width:thin}
  .reading-workspace:has(>.result.show) .reading-panel,.reading-workspace:has(>.reading-result.show) .reading-panel{display:none}
}
.result:focus,.reading-result:focus{outline:none}