/* play.css: the Play-IT page, from Nora's Figma "play-it / desktop" and "play-it / mobile" (10 Nov).
   Black page with a grey dot grid, white text. Positions and sizes are set by play-layout.js
   (Figma pixels × --u, where --u = screen width / 1440 on desktop and / 390 on mobile). */
.play-page {
  --u: 1px;
  background-color: var(--black);
  background-image: radial-gradient(circle, #5a5a5a calc(var(--u) * 1), transparent calc(var(--u) * 1.3));
  background-size: calc(var(--u) * 40) calc(var(--u) * 40);
  background-position: 0 0;               /* dots at 20, 60, 100 … like the Figma frame */
  color: var(--white);
}
.pl { position: relative; overflow: hidden; color: var(--white); min-height: 100vh; }
.pl > * { position: absolute; margin: 0; white-space: nowrap; }
.pl-crumb { font: 700 calc(var(--u) * 12)/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; }
.pl-title { font-family: var(--font-heading); font-weight: 700; line-height: 1; letter-spacing: 0; }
.pl-badge { display: block; height: auto; }
/* line spacing = one dot row (60), so every line starts on a row: intro 300 and 360, then one empty row, sub line 480 (Nora, 12 Nov) */
.pl-intro { white-space: normal; font: 400 calc(var(--u) * 30)/calc(var(--u) * 60) var(--font-body); }
.pl-intro strong { font-weight: 700; }
.pl-sub { white-space: normal; font: 700 calc(var(--u) * 24)/calc(var(--u) * 60) var(--font-heading); }
.pl-h2 { font: 700 calc(var(--u) * 32)/1 var(--font-heading); }
.pl-box {
  border: 1px solid var(--white);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pl-cap, .pl-cell-label { font: 700 calc(var(--u) * 9.5)/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
.pl-name { font: 400 calc(var(--u) * 24)/1 var(--font-body); }   /* two steps bigger (Nora, 12 Nov) */

/* Table: Titel / År / Roll / Definition */
.pl-table { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-table > * { position: absolute; margin: 0; white-space: nowrap; pointer-events: auto; }
.pl-th { font: 700 calc(var(--u) * 12)/1 var(--font-heading); }
.pl-cell { font: 400 calc(var(--u) * 21)/1 var(--font-body); white-space: normal !important; hyphens: auto; }
.pl-cell a { color: inherit; text-decoration: none; }
.pl-cell a:hover, .pl-cell a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.pl-dash { height: 0; border-top: 1px dashed var(--white); }
.pl-line { height: 0; border-top: 1px solid var(--white); }

/* Header: dark on this page; the current page is white and underlined (as in the Figma frame) */
.play-page .site-header.on-dark .site-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

/* Footer: same as on the other pages, in white on black */
.play-page .site-footer { background: var(--black); color: var(--white); }
.play-page .ft, .play-page .ft-bar { border-color: var(--white); }
.play-page .ft-col h4, .play-page .ft-col a, .play-page .ft-col span, .play-page .ft-bar { color: var(--white); }
.play-page .ft-made { color: rgba(255, 255, 255, .6); }

@media (max-width: 760px) {
  .play-page {
    background-size: calc(var(--u) * 20) calc(var(--u) * 20);
    background-position: calc(var(--u) * -10) calc(var(--u) * -10);   /* dots on the 20 px grid */
  }
  .pl-crumb { display: none; }
  .pl-intro { font-size: calc(var(--u) * 22); line-height: calc(var(--u) * 40); }   /* two 20 px rows per line */
  .pl-sub { font-size: calc(var(--u) * 19); line-height: calc(var(--u) * 40); }
  .pl-h2 { font-size: calc(var(--u) * 24); }
  .pl-name { font-size: calc(var(--u) * 20); }
  .pl-th { font-size: calc(var(--u) * 11); }
  .pl-cell-label { font-size: calc(var(--u) * 8); }
  .pl-cell { font-size: calc(var(--u) * 12.5); }
  /* the shared mobile rule adds top padding to the first section; this page places everything itself */
  .play-page main.pl { padding: 0 !important; }
}

/* Box 01 links to the writing mirror (12 Nov) */
.pl-box-link { display: block; }
.pl-box-link:hover, .pl-box-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.pl-name a { color: inherit; text-decoration: none; }
.pl-name a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Play-IT table: same look as the table on "Mitt arbete" (work-table.css), white on the black dot page,
   its own full screen like the carousel; left and right edges on the Play-IT grid (120 from the frame) */
.pl-wt { background: transparent; color: var(--white);
  padding-left: calc(var(--ox, 0px) + var(--u, 1px) * 120); padding-right: calc(var(--ox, 0px) + var(--u, 1px) * 120); }
.pl-wt .wt-table { max-width: none; }
.pl-wt-title { margin: 0 0 var(--space-6); font: 700 clamp(24px, 2.2vw, 32px)/1 var(--font-heading); }
#pl-wt-body .wt-row { transition: opacity .4s ease; }
@media (hover: hover) and (pointer: fine) { #pl-wt-body:hover .wt-row:not(:hover) { opacity: .4; } }
@media (max-width: 760px) { .pl-wt { padding-left: 20px !important; padding-right: 20px !important; } }