/* Pekan OS 2031, round 7: the gated tool engine surface.

   Plan 14 section 5.4. The progress surface reads as an OS sheet, not as a
   web spinner: a 4 px bar with a 4 px radius and a required status line
   under it, inside the tool window. There is no centred page spinner and no
   dimmed marketing overlay here, because the sheet the visitor is already
   looking at is the surface.

   Mobile is the same copy and the same bar at full width. Nothing is hidden
   at 390 and nothing extra is opened.

   Rule 9: under prefers-reduced-motion the engine does not build the bar at
   all, so there is nothing here to switch off. The .pk-still rules only tidy
   the spacing of the status line standing on its own.

   Colour comes from the OS tokens. Nothing here invents a hex.
   No em dashes anywhere in this file. */

.pk-work {
  /* the 12 px sheet of section 5.4 */
  margin: 12px 0;
}

/* ===== the bar =====
   ControlCornerRadius is 4, which is --os-r-btn minus one and small enough
   that a 4 px tall bar reads as a capsule rather than as a rounded box. It is
   written as a literal 4 px because the token set has no 4, and the plan
   names the number. */
.pk-bar {
  position: relative;
  overflow: hidden;
  height: 4px;
  border-radius: 4px;
  background: var(--pk-glass-panel, rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pk-chunk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  border-radius: 4px;
  background: var(--pk-accent, #5956e9);
  animation: pk-slide 900ms linear infinite;
}

/* determinate is only ever reached through PEKAN_TOOLS percent(), which
   nothing calls without a real poll behind it. The chunk stops sliding and
   its width becomes the number. */
.pk-bar.pk-det .pk-chunk {
  animation: none;
  left: 0;
  transition: width 200ms linear;
}

@keyframes pk-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(357%); }
}

/* ===== the status line, which is required =====
   Windows pattern: the bar says something is happening, the line says what.
   A bar on its own is the thing this engine refuses to draw. */
.pk-status {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--os-text-2, rgba(255, 255, 255, 0.78));
}

.pk-el {
  color: var(--os-text-3, rgba(255, 255, 255, 0.55));
  font-variant-numeric: tabular-nums;
}

.pk-still .pk-status {
  margin: 0;
}

/* the result line, which carries the basis word beside any number */
.pk-result {
  margin: 0 0 10px;
  font-family: var(--pk-font, var(--os-ui));
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pk-text, var(--os-text));
}

.pk-err {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--os-text-2, rgba(255, 255, 255, 0.78));
}

/* the sentence that says what the gate will ask for before it asks, so the
   button on the result frame is never a surprise */
.pk-ahead {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--os-text-3, rgba(255, 255, 255, 0.55));
}

/* the Windows 98 silhouette some dialogs wear. The bar keeps the geometry of
   that era: square, sunken, and the same 4 px tall. */
.clut-98 .pk-bar {
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: inset 1px 1px 0 #8B849E;
}

.clut-98 .pk-chunk { border-radius: 0; }
.clut-98 .pk-status { color: #2C2438; }
.clut-98 .pk-result { color: #17131F; }
.clut-98 .pk-err { color: #2C2438; }
.clut-98 .pk-ahead { color: #4B4460; }

@media (max-width: 620px) {
  /* same copy, same 4 px, full width. The tool window is still the surface. */
  .pk-work { margin: 12px 0; }
  .pk-status { font-size: 13px; }

  /* T9 on a phone. The two answer buttons are the whole interaction, so they
     get real touch targets: the independent QA pass measured 32 px controls
     elsewhere in this OS against the 44 px standard, and a mission whose
     buttons are hard to hit is not a playable mission. */
  .pk-play-q { font-size: 15px; }
  .pk-play [data-pk-play] {
    min-height: 44px;
    flex: 1 1 auto;
  }
}

/* ===== T9: Grand Theft Autofill VI, the playable round =====

   Six fields, one decision each, inside the tool window. This is the value
   that stands in front of the gate, so it is built as a working panel and
   not as a teaser: a round counter, a track that fills as the visitor plays,
   the field under review, two answers, and the reason under the answer.

   The track is NOT a progress bar. It reports how far through a set of six
   the visitor has walked, which is a fact about their own clicks, so it is
   correct under reduced motion as well and carries no animation. */

.pk-play {
  margin: 12px 0 4px;
}

.pk-play-count {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--os-text-3, rgba(255, 255, 255, 0.55));
  font-variant-numeric: tabular-nums;
}

.pk-play-track {
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--pk-glass-panel, rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pk-play-track span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--pk-accent, #5956e9);
  transition: width var(--pk-duration, 220ms) var(--pk-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  .pk-play-track span { transition: none; }
}

.pk-play-q {
  margin: 12px 0 10px;
  font-family: var(--pk-font, var(--os-ui));
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pk-text, var(--os-text));
}

/* ===== the gated tool sheet as spatial material =====
   The tool window interior is the surface a visitor reads a result on, so it
   carries the same glass as every other system panel rather than reading as a
   card pasted into a window. Radius follows the shared panel step. */
.pk-play,
.pk-work {
  border-radius: var(--pk-radius-panel, 16px);
}

/* the two answer buttons: system controls on glass, never pills */
.pk-play [data-pk-play] {
  border: 1px solid var(--pk-glass-border, rgba(255, 255, 255, 0.25));
  border-radius: var(--pk-radius-control, 10px);
  background: var(--pk-glass-panel, rgba(255, 255, 255, 0.065));
  color: var(--pk-text, #fff);
  font-family: var(--pk-font, var(--os-ui));
  transition:
    background var(--pk-duration, 180ms) var(--pk-ease, ease),
    transform var(--pk-duration, 180ms) var(--pk-ease, ease);
}

.pk-play [data-pk-play]:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.13);
}

.pk-play [data-pk-play]:focus-visible {
  outline: 2px solid var(--pk-text, #fff);
  outline-offset: 3px;
}

/* the reason, which is the part the visitor keeps whether or not they ever
   reach the gate. Quieter than the question and never coloured red: a wrong
   call is a thing they just learned, not an error state. */
.pk-play-a {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--os-line-2, rgba(255, 255, 255, 0.18));
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--os-text-2, rgba(255, 255, 255, 0.78));
}

.pk-play-a.pk-play-ok {
  border-left-color: var(--os-good, #3FB984);
}

.pk-play [data-pk-play][disabled] {
  opacity: 0.55;
  cursor: default;
}

/* the Windows 98 silhouette, matching the bar rules above */
.clut-98 .pk-play-track {
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: inset 1px 1px 0 #8B849E;
}

.clut-98 .pk-play-track span { border-radius: 0; }
.clut-98 .pk-play-count { color: #4B4460; }
.clut-98 .pk-play-q { color: #17131F; }
.clut-98 .pk-play-a { color: #2C2438; border-left-color: #8B849E; }