/* =====================================================================
   Aspire Time Clock — app-specific styles over Design System v3.1 (AI-224)
   The design system is vendored byte-for-byte under ds/ (tokens + the asp- component layer,
   loaded first from ds/app.css — never edit there; re-vendor). This file holds only what the
   worker clock screen adds: the desktop floor is lifted (TA-19 — one token, not a fork) and new
   asp--contract blocks sized for a phone or a wall-mounted tablet, touched by a thumb rather than
   a mouse. Governed by docs/shared/DESIGN-SYSTEM.md (DS-10..12) and mirrored by tools/ds-harness.js's
   rules even though that harness currently only scans app/: 12px floor, no raw colour literals.
   ===================================================================== */

:root{
  /* TA-19: the worker screen is a phone/tablet surface, not a desktop one. One token, no fork. */
  --asp-app-min-width: 0;
}

.asp-app{
  min-width: 0;
}

/* ---------- asp-clockscreen — the full-height stage every worker state renders into ---------- */
.asp-clockscreen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--cds-spacing-06);
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  padding:var(--cds-spacing-07) var(--cds-spacing-05) max(var(--cds-spacing-07), env(safe-area-inset-bottom));
  background:var(--cds-background);
  color:var(--cds-text-primary);
  text-align:center;
}
.asp-clockscreen__panel{
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  gap:var(--cds-spacing-05);
}
.asp-clockscreen__org{
  font-size:var(--cds-heading-04-font-size);
  font-weight:var(--cds-heading-04-font-weight, 600);
  line-height:var(--cds-heading-04-line-height, 1.2);
  color:var(--cds-text-primary);
}
.asp-clockscreen__time{
  font-size:64px;
  line-height:1.05;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--cds-text-primary);
}
.asp-clockscreen__date{
  font-size:var(--cds-body-02-font-size);
  color:var(--cds-text-secondary);
}
.asp-clockscreen__consent{
  font-size:var(--cds-helper-text-01-font-size);
  line-height:var(--cds-helper-text-01-line-height);
  color:var(--cds-text-helper);
  max-width:36ch;
  margin:0 auto;
}
.asp-clockscreen__title{
  font-size:var(--cds-heading-03-font-size);
  font-weight:var(--cds-heading-03-font-weight, 600);
  color:var(--cds-text-primary);
}
.asp-clockscreen__hint{
  font-size:var(--cds-body-compact-01-font-size);
  color:var(--cds-text-secondary);
}
.asp-clockscreen__error{
  font-size:var(--cds-body-compact-01-font-size);
  color:var(--cds-text-error);
}
.asp-clockscreen[data-state="camera"] .asp-clockscreen__panel,
.asp-clockscreen[data-state="ready"] .asp-clockscreen__panel,
.asp-clockscreen[data-state="capture"] .asp-clockscreen__panel,
.asp-clockscreen[data-state="submit"] .asp-clockscreen__panel{
  max-width:520px;
}

/* ---------- asp-shutter — the single large punch button ---------- */
.asp-shutter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--cds-spacing-03);
  width:100%;
  min-height:96px;
  padding:var(--cds-spacing-05) var(--cds-spacing-06);
  font:inherit;
  font-size:var(--cds-heading-03-font-size);
  font-weight:600;
  border-radius:var(--cds-radius-container);
  border:none;
  cursor:pointer;
  background:var(--cds-button-primary);
  color:var(--cds-text-on-color);
  transition:background var(--cds-duration-fast-02) var(--cds-ease-productive-standard);
}
.asp-shutter:where(:hover){ background:var(--cds-button-primary-hover); }
.asp-shutter:where(:active){ background:var(--cds-button-primary-active); }
.asp-shutter:focus-visible{ outline:3px solid var(--cds-focus); outline-offset:2px; }
.asp-shutter--out{ background:var(--cds-button-danger-primary); }
.asp-shutter--out:where(:hover){ background:var(--cds-button-danger-hover); }
.asp-shutter--out:where(:active){ background:var(--cds-button-danger-active); }
.asp-shutter:where([aria-disabled="true"]){
  background:var(--cds-button-disabled);
  color:var(--cds-text-on-color-disabled);
  cursor:not-allowed;
}
.asp-shutter[aria-busy="true"]{ position:relative; color:transparent; pointer-events:none; }
.asp-shutter[aria-busy="true"]::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border:3px solid var(--cds-text-on-color-disabled);
  border-top-color:var(--cds-text-on-color);
  border-radius:50%;
  animation:asp-clock-spin var(--cds-duration-slow-02) linear infinite;
}
@keyframes asp-clock-spin{ to{ transform:rotate(360deg); } }
.asp-shutter__icon{ flex:none; }

/* ---------- asp-pinpad — a 3x4 grid of large digit keys ---------- */
.asp-pinpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--cds-spacing-05);
  width:100%;
}
.asp-pinpad__dots{
  display:flex;
  gap:var(--cds-spacing-04);
  justify-content:center;
}
.asp-pinpad__dot{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--cds-border-strong-01);
  background:transparent;
  transition:background var(--cds-duration-fast-02) var(--cds-ease-productive-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-productive-standard);
}
.asp-pinpad__dot:where([data-filled="true"]){
  background:var(--cds-interactive);
  border-color:var(--cds-interactive);
}
.asp-pinpad[data-shake="true"] .asp-pinpad__dots{
  animation:asp-clock-shake var(--cds-duration-slow-01) var(--cds-ease-productive-standard);
}
@keyframes asp-clock-shake{
  10%,90%{ transform:translateX(-4px); }
  20%,80%{ transform:translateX(6px); }
  30%,50%,70%{ transform:translateX(-10px); }
  40%,60%{ transform:translateX(10px); }
}
.asp-pinpad__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--cds-spacing-04);
  width:100%;
  max-width:320px;
}
.asp-pinpad__key{
  min-height:64px;
  font:inherit;
  font-size:var(--cds-heading-04-font-size);
  font-weight:500;
  border-radius:var(--cds-radius-container);
  border:1px solid var(--cds-border-subtle-01);
  background:var(--cds-layer-01);
  color:var(--cds-text-primary);
  cursor:pointer;
  transition:background var(--cds-duration-fast-02) var(--cds-ease-productive-standard);
}
.asp-pinpad__key:where(:hover){ background:var(--cds-layer-hover-01); }
.asp-pinpad__key:where(:active){ background:var(--cds-layer-active-01); }
.asp-pinpad__key:focus-visible{ outline:2px solid var(--cds-focus); outline-offset:2px; }
.asp-pinpad__key:where([aria-disabled="true"]){
  color:var(--cds-text-disabled);
  cursor:not-allowed;
}
.asp-pinpad__key--delete,
.asp-pinpad__key--cancel{
  font-size:var(--cds-body-compact-01-font-size);
  color:var(--cds-text-secondary);
  background:transparent;
  border-color:transparent;
}

/* ---------- asp-namelist — the scrollable roster for SEARCH ---------- */
.asp-namelist{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--cds-spacing-03);
}
.asp-namelist__search{ width:100%; }
.asp-namelist__list{
  width:100%;
  max-height:min(52vh, 480px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--cds-spacing-03);
  border-radius:var(--cds-radius-container);
}
.asp-namelist__item{
  display:block;
  width:100%;
  min-height:64px;
  padding:var(--cds-spacing-04) var(--cds-spacing-05);
  font:inherit;
  font-size:var(--cds-heading-compact-02-font-size);
  text-align:left;
  border-radius:var(--cds-radius-container);
  border:1px solid var(--cds-border-subtle-01);
  background:var(--cds-layer-01);
  color:var(--cds-text-primary);
  cursor:pointer;
  transition:background var(--cds-duration-fast-02) var(--cds-ease-productive-standard);
}
.asp-namelist__item:where(:hover){ background:var(--cds-layer-hover-01); }
.asp-namelist__item:where(:active){ background:var(--cds-layer-active-01); }
.asp-namelist__item:focus-visible{ outline:2px solid var(--cds-focus); outline-offset:-2px; }
.asp-namelist__empty{
  padding:var(--cds-spacing-06);
  color:var(--cds-text-helper);
  font-size:var(--cds-body-compact-01-font-size);
}

/* ---------- camera preview ---------- */
.asp-clockscreen__video-wrap{
  position:relative;
  width:100%;
  max-width:360px;
  aspect-ratio:4 / 3;
  margin:0 auto;
  border-radius:var(--cds-radius-container);
  overflow:hidden;
  background:var(--cds-layer-01);
  border:1px solid var(--cds-border-subtle-01);
}
.asp-clockscreen__video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1); /* mirrored preview only — the captured frame is drawn unmirrored (TA-15) */
}
.asp-clockscreen__thumb{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:var(--cds-radius-container);
  border:1px solid var(--cds-border-subtle-01);
  margin:0 auto;
}

/* ---------- consent / blocked / notice cards reuse asp-inline-notification; app-only text sizing here ---------- */
.asp-clockscreen__done-name{
  font-size:var(--cds-heading-05-font-size);
  font-weight:600;
}
.asp-clockscreen__done-status{
  font-size:var(--cds-heading-03-font-size);
  color:var(--cds-support-success);
  font-weight:600;
}
.asp-clockscreen__done-status--out{ color:var(--cds-text-secondary); }

/* Larger touch targets read better from a distance once there's room for them */
@media (min-width: 480px){
  .asp-clockscreen__time{ font-size:88px; }
  .asp-pinpad__key{ min-height:72px; }
}

@media print{
  .asp-clockscreen{ display:none; }
}

/* The administrator's way in from the worker screen. Deliberately quiet: on a door tablet the
   only thing that should compete for attention is the clock-in button, and this is a link a
   supervisor knows to look for rather than one a worker is invited to try. Sits below the
   panel, centred, on the system's secondary text token. */
.asp-clockscreen__adminlink {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin: var(--cds-spacing-07) auto 0;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  border-radius: var(--asp-radius-sm, 4px);
  color: var(--cds-text-secondary);
  font-size: 14px;
  text-decoration: none;
}
.asp-clockscreen__adminlink:hover,
.asp-clockscreen__adminlink:focus-visible {
  color: var(--cds-text-primary);
  background: var(--cds-layer-hover);
  text-decoration: underline;
}
.asp-clockscreen__adminlink .asp-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}