/* page-screen.css — layered live-job product composition */
.pwp-screen {
  margin: var(--pwp-space-9) 0 0;
  display: grid;
  gap: var(--pwp-space-6);
}

.pwp-screen__cap {
  max-inline-size: 62ch;
  display: grid;
  gap: var(--pwp-space-2);
}

.pwp-screen__title {
  margin: 0;
  font-size: var(--pwp-fs-h3);
  line-height: var(--pwp-lh-h3);
  letter-spacing: var(--pwp-track-h3);
  color: var(--pwp-ink-inverse);
}

.pwp-screen__sub {
  margin: 0;
  color: var(--pwp-ink-inverse-muted);
  font-size: var(--pwp-fs-small);
  line-height: var(--pwp-lh-body);
}

.pwp-screen__stage {
  position: relative;
  min-block-size: 600px;
  padding: var(--pwp-space-6) var(--pwp-space-8) var(--pwp-space-8) var(--pwp-space-6);
  perspective: 1200px;
}

.pwp-screen__stage::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2% 8%;
  border: var(--pwp-hairline);
  border-radius: var(--pwp-radius-lg);
  background:
    linear-gradient(var(--pwp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pwp-line) 1px, transparent 1px);
  background-size: var(--pwp-space-6) var(--pwp-space-6);
  opacity: .38;
}

.pwp-screen__frame {
  position: relative;
  z-index: 1;
  inline-size: min(88%, 920px);
  margin-inline: auto;
  border: var(--pwp-hairline-strong);
  border-radius: var(--pwp-radius-lg);
  overflow: hidden;
  background: var(--pwp-surface-950);
  box-shadow: var(--pwp-shadow-lg);
  transform: rotateX(1.5deg) rotateY(-1deg);
  transform-origin: center bottom;
}

.pwp-screen__bar {
  min-block-size: var(--pwp-space-7);
  display: flex;
  align-items: center;
  gap: var(--pwp-space-3);
  padding-inline: var(--pwp-space-4);
  border-block-end: var(--pwp-hairline);
  background: color-mix(in oklab, var(--pwp-surface-700) 72%, transparent);
  font-size: var(--pwp-fs-micro);
  color: var(--pwp-ink-inverse-muted);
}

.pwp-screen__dots { display: inline-flex; gap: var(--pwp-space-1); }
.pwp-screen__dots i {
  inline-size: var(--pwp-space-2);
  block-size: var(--pwp-space-2);
  border-radius: var(--pwp-radius-pill);
  background: var(--pwp-surface-600);
}
.pwp-screen__dots i:first-child { background: var(--pwp-accent); }
.pwp-screen__crumb { font-weight: var(--pwp-fw-semibold); letter-spacing: var(--pwp-track-label); text-transform: uppercase; }
.pwp-screen__live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--pwp-space-2); }
.pwp-screen__live::before {
  content: "";
  inline-size: var(--pwp-space-2);
  block-size: var(--pwp-space-2);
  border-radius: var(--pwp-radius-pill);
  background: var(--pwp-data-good);
  animation: pwp-screen-pulse 2.4s var(--pwp-ease-in-out) infinite;
}

@keyframes pwp-screen-pulse { 50% { opacity: .3; } }

.pwp-screen__body {
  padding: var(--pwp-space-5);
  display: grid;
  gap: var(--pwp-space-5);
  background: color-mix(in oklab, var(--pwp-surface-900) 84%, var(--pwp-surface-700));
}

.pwp-screen__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--pwp-hairline);
  background: var(--pwp-line);
  gap: 1px;
}

.pwp-screen__summary > div {
  padding: var(--pwp-space-4);
  display: grid;
  gap: var(--pwp-space-1);
  background: var(--pwp-surface-950);
}

.pwp-screen__label,
.pwp-screen__metriclabel,
.pwp-screen__chartlegend {
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  text-transform: uppercase;
  color: var(--pwp-ink-inverse-muted);
}

.pwp-screen__summary strong {
  color: var(--pwp-ink-inverse);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-h3);
}

.pwp-screen__jobs { display: grid; }
.pwp-screen__jobrow {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(78px, .7fr) minmax(78px, .7fr) minmax(130px, 1fr);
  gap: var(--pwp-space-4);
  align-items: center;
  min-block-size: var(--pwp-space-8);
  padding-inline: var(--pwp-space-4);
  border-block-end: var(--pwp-hairline);
  color: var(--pwp-ink-inverse-muted);
  font-size: var(--pwp-fs-small);
}
.pwp-screen__jobrow:first-child {
  min-block-size: var(--pwp-space-7);
  color: var(--pwp-data-neutral);
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  text-transform: uppercase;
}
.pwp-screen__jobrow:last-child { border-block-end: 0; }
.pwp-screen__job { color: var(--pwp-ink-inverse); font-weight: var(--pwp-fw-semibold); }
.pwp-screen__bad { color: var(--pwp-accent-bright); font-weight: var(--pwp-fw-semibold); }
.pwp-screen__hours { display: grid; gap: var(--pwp-space-2); font-variant-numeric: tabular-nums; }
.pwp-screen__hours i {
  display: block;
  block-size: var(--pwp-space-1);
  border-radius: var(--pwp-radius-pill);
  background: var(--pwp-surface-600);
  overflow: hidden;
}
.pwp-screen__hours i::after {
  content: "";
  display: block;
  inline-size: var(--pwp-fill);
  block-size: 100%;
  border-radius: inherit;
  background: var(--pwp-data-good);
}
.pwp-screen__hours i.is-warn::after { background: var(--pwp-accent); }

.pwp-screen__float {
  position: absolute;
  z-index: 2;
  border: var(--pwp-hairline-strong);
  border-radius: var(--pwp-radius-md);
  background: color-mix(in oklab, var(--pwp-surface-800) 90%, transparent);
  color: var(--pwp-ink-inverse);
  box-shadow: var(--pwp-shadow-lg);
  backdrop-filter: blur(var(--pwp-glass-blur));
}

.pwp-screen__float--margin {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: min(30%, 260px);
  padding: var(--pwp-space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pwp-space-2);
}
.pwp-screen__metriclabel { grid-column: 1 / -1; }
.pwp-screen__metric { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-metric); line-height: var(--pwp-lh-display); }
.pwp-screen__delta { align-self: end; color: var(--pwp-accent-bright); font-size: var(--pwp-fs-small); }
.pwp-screen__spark { grid-column: 1 / -1; inline-size: 100%; block-size: var(--pwp-space-7); }
.pwp-screen__spark path { fill: none; stroke: var(--pwp-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pwp-screen__spark path:first-child { stroke: var(--pwp-line-strong); stroke-dasharray: 4 5; }

.pwp-screen__float--chart {
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: min(42%, 390px);
  padding: var(--pwp-space-4);
}
.pwp-screen__charthead { display: flex; justify-content: space-between; gap: var(--pwp-space-3); align-items: center; }
.pwp-screen__charttitle { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-small); }
.pwp-screen__chart { inline-size: 100%; block-size: 110px; margin-block-start: var(--pwp-space-3); }
.pwp-screen__chart line { stroke: var(--pwp-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pwp-screen__chart polyline { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.pwp-screen__chart .pwp-screen__planned { stroke: var(--pwp-data-good); }
.pwp-screen__chart .pwp-screen__actual { stroke: var(--pwp-accent); }

.pwp-screen__float--alert {
  inset-inline-end: 2%;
  inset-block-end: var(--pwp-space-4);
  inline-size: min(38%, 340px);
  padding: var(--pwp-space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pwp-space-3);
  border-color: color-mix(in oklab, var(--pwp-accent) 58%, var(--pwp-border-dark));
}
.pwp-screen__float--alert svg { fill: none; stroke: var(--pwp-accent-bright); stroke-width: 1.7; }
.pwp-screen__alertcopy { display: grid; gap: var(--pwp-space-1); color: var(--pwp-ink-inverse-muted); font-size: var(--pwp-fs-micro); line-height: var(--pwp-lh-body); }
.pwp-screen__alertcopy strong { color: var(--pwp-ink-inverse); font-size: var(--pwp-fs-small); }

.js .pwp-screen.is-visible .pwp-screen__frame { animation: pwp-screen-arrive var(--pwp-dur-craft-slow) var(--pwp-ease-soft) both; }
.js .pwp-screen.is-visible .pwp-screen__float { animation: pwp-screen-float-in var(--pwp-dur-reveal) var(--pwp-ease-entrance) both; }
.js .pwp-screen.is-visible .pwp-screen__float--chart { animation-delay: var(--pwp-dur-instant); }
.js .pwp-screen.is-visible .pwp-screen__float--alert { animation-delay: var(--pwp-dur-fast); }
@keyframes pwp-screen-arrive { from { opacity: 0; transform: translateY(var(--pwp-space-5)) rotateX(1.5deg) rotateY(-1deg); } }
@keyframes pwp-screen-float-in { from { opacity: 0; transform: translateY(var(--pwp-space-4)) scale(.96); } }

@media (max-width: 900px) {
  .pwp-screen__stage {
    min-block-size: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pwp-space-4);
  }
  .pwp-screen__stage::before { display: none; }
  .pwp-screen__frame { grid-column: 1 / -1; inline-size: 100%; transform: none; }
  .pwp-screen__float { position: relative; inset: auto; inline-size: auto; }
  .pwp-screen__float--alert { grid-column: 1 / -1; }
  .pwp-screen__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .js .pwp-screen.is-visible .pwp-screen__frame { animation-name: pwp-screen-float-in; }
}

@media (max-width: 640px) {
  .pwp-screen { margin-block-start: var(--pwp-space-8); gap: var(--pwp-space-5); }
  .pwp-screen__stage { grid-template-columns: 1fr; }
  .pwp-screen__float--alert { grid-column: auto; }
  .pwp-screen__summary { grid-template-columns: 1fr; }
  .pwp-screen__summary > div { grid-template-columns: 1fr auto; align-items: baseline; }
  .pwp-screen__jobrow { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--pwp-space-3); padding: var(--pwp-space-3); }
  .pwp-screen__jobrow > :last-child { grid-column: 1 / -1; }
  .pwp-screen__jobrow:first-child > :last-child { display: none; }
  .pwp-screen__bar { gap: var(--pwp-space-2); padding-inline: var(--pwp-space-3); }
  .pwp-screen__crumb { max-inline-size: 15ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pwp-screen__live { font-size: 0; }
  .pwp-screen__body { padding: var(--pwp-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .pwp-screen__live::before,
  .js .pwp-screen.is-visible .pwp-screen__frame,
  .js .pwp-screen.is-visible .pwp-screen__float { animation: none; }
}
/* Homepage V1 — one focused margin card over the worker scene. */
.pwp-hero-scene {
  --pwp-card-rx: 0deg;
  --pwp-card-ry: 0deg;
  position: relative;
  z-index: 2;
  min-inline-size: 0;
  color: var(--pwp-ink-inverse);
  perspective: 900px;
}
.pwp-hero-scene__card {
  position: relative;
  overflow: hidden;
  border: var(--pwp-hairline);
  border-radius: var(--pwp-radius-md);
  padding: var(--pwp-space-5);
  background: color-mix(in oklab, var(--pwp-surface-950) 90%, transparent);
  box-shadow: var(--pwp-shadow-lg);
  backdrop-filter: blur(var(--pwp-glass-blur));
  transform: translateY(0) rotateX(var(--pwp-card-rx)) rotateY(var(--pwp-card-ry));
  transform-origin: 50% 50%;
  transition: transform var(--pwp-dur-craft-base) var(--pwp-ease-soft), border-color var(--pwp-dur-craft-base) var(--pwp-ease-soft), box-shadow var(--pwp-dur-craft-base) var(--pwp-ease-soft);
}
.pwp-hero-scene:hover .pwp-hero-scene__card { border-color: color-mix(in oklab, var(--pwp-accent) 50%, var(--pwp-border-dark-strong)); box-shadow: 0 22px 48px -18px color-mix(in oklab, var(--pwp-accent) 32%, transparent); transform: translateY(-5px) rotateX(var(--pwp-card-rx)) rotateY(var(--pwp-card-ry)); }
.pwp-hero-scene__title,
.pwp-hero-scene__chart,
.pwp-hero-scene__metrics,
.pwp-hero-scene figcaption { position: relative; z-index: 1; }
.pwp-hero-scene__title {
  margin: 0;
  font-family: var(--pwp-ff-display);
  font-size: 1.125rem;
  font-weight: var(--pwp-fw-medium);
  line-height: var(--pwp-lh-tight);
}
.pwp-hero-scene__metrics small,
.pwp-hero-scene figcaption { color: var(--pwp-ink-inverse-muted); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pwp-hero-scene__chart { margin-block-start: var(--pwp-space-4); }
.pwp-hero-scene__chart > svg { display: block; inline-size: 100%; block-size: 112px; overflow: visible; }
.pwp-hero-scene__gridlines line { stroke: var(--pwp-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pwp-hero-scene__area { fill: color-mix(in oklab, var(--pwp-data-good) 8%, transparent); }
.pwp-hero-scene__planned,
.pwp-hero-scene__actual { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke-width var(--pwp-dur-craft-base) var(--pwp-ease-soft); }
.pwp-hero-scene__planned { stroke: var(--pwp-data-good); }
.pwp-hero-scene__actual { stroke: var(--pwp-accent); }
.pwp-hero-scene:hover .pwp-hero-scene__planned,
.pwp-hero-scene:hover .pwp-hero-scene__actual { stroke-width: 2.75; }
.pwp-hero-scene__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pwp-space-5); margin-block-start: var(--pwp-space-4); }
.pwp-hero-scene__metrics > span { display: flex; flex-direction: column; gap: var(--pwp-space-1); }
.pwp-hero-scene__metrics strong { font-family: var(--pwp-ff-display); font-size: 1.6rem; font-weight: var(--pwp-fw-medium); line-height: var(--pwp-lh-display); }
.pwp-hero-scene__metrics > span:first-child strong { color: var(--pwp-data-good); }
.pwp-hero-scene__metrics > span:last-child strong { color: var(--pwp-accent-bright); }
.pwp-hero-scene figcaption { margin-block-start: var(--pwp-space-3); text-align: end; opacity: .66; }
@media (min-width: 1280px) {
  .pwp-hero-scene { position: absolute; inset-inline-start: 51%; inset-block-start: 19%; inline-size: 286px; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .pwp-hero-scene { inline-size: 286px; margin-block-start: var(--pwp-space-6); margin-inline-start: auto; margin-inline-end: 6%; }
}
@media (max-width: 639px) {
  .pwp-hero-scene { inline-size: min(86vw, 286px); margin-block-start: var(--pwp-space-6); margin-inline: auto; padding-block-start: 12rem; }
  .pwp-hero-scene__card { padding: var(--pwp-space-4); }
}
.js .pwp-hero-scene__card { opacity: 0; filter: blur(6px); animation: pwp-hero-scene-in var(--pwp-dur-reveal) var(--pwp-ease-entrance) var(--pwp-dur-slow) forwards; }
@keyframes pwp-hero-scene-in { from { opacity: 0; filter: blur(6px); translate: 0 var(--pwp-space-4); } to { opacity: 1; filter: none; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .pwp-hero-scene *, .pwp-hero-scene *::before { animation: none !important; transition: none !important; transform: none !important; translate: none !important; }
  .js .pwp-hero-scene__card { opacity: 1; filter: none; }
}