.workpath-home,
.attendance-screen {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) 0;
}

.workpath-home header,
.attendance-screen header {
  display: grid;
  gap: var(--spacing-xxs);
}

.workpath-home header p,
.workpath-home header h1,
.attendance-screen header p,
.attendance-screen header h1,
.attendance-section h2,
.attendance-actions h2,
.attendance-summary h2,
.attendance-summary p,
.home-attendance-card p {
  margin: 0;
}

.workpath-home .eyebrow,
.attendance-screen .eyebrow,
.attendance-summary .eyebrow {
  color: var(--color-action-primary);
  font-size: var(--typography-caption-font-size);
  font-weight: var(--typography-label-font-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workpath-home h1,
.attendance-screen header h1 {
  font-size: var(--typography-heading-font-size);
  line-height: var(--typography-heading-line-height);
}

.home-attendance-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 104px;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface-default);
  box-shadow: var(--elevation-medium);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-attendance-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: var(--spacing-xxs);
}

.home-attendance-card p {
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  overflow-wrap: anywhere;
}

.attendance-card-title {
  font-size: var(--typography-label-font-size);
  font-weight: var(--typography-heading-font-weight);
}

.attendance-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-action-primary);
  color: var(--color-action-primary-contrast);
  font-weight: var(--typography-heading-font-weight);
}

.attendance-range {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--spacing-xs);
}

.attendance-range label {
  display: grid;
  gap: var(--spacing-xxs);
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
}

.attendance-range input,
.attendance-range button,
.attendance-actions button {
  min-width: 0;
  min-height: var(--layout-touch-target-min);
  box-sizing: border-box;
  border-radius: var(--radius-control);
  padding: var(--spacing-xs);
  font: inherit;
}

.attendance-range input {
  width: 100%;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
}

.attendance-range button,
.attendance-actions button {
  border: 0;
  background: var(--color-action-primary);
  color: var(--color-action-primary-contrast);
  font-weight: var(--typography-label-font-weight);
  cursor: pointer;
}

.attendance-actions {
  display: grid;
  gap: var(--spacing-sm);
}

.attendance-actions > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
}

.attendance-action-message {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
}

.attendance-summary {
  display: grid;
  gap: var(--spacing-xs);
}

.attendance-status {
  justify-self: start;
  border-radius: var(--radius-pill);
  padding: var(--spacing-xxs) var(--spacing-xs);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
  font-weight: var(--typography-label-font-weight);
}

.attendance-summary dl,
.attendance-record dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
  margin: var(--spacing-xs) 0 0;
}

.attendance-summary dl div,
.attendance-record dl div {
  min-width: 0;
  display: grid;
  gap: var(--spacing-xxs);
}

.attendance-summary dt,
.attendance-record dt {
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
}

.attendance-summary dd,
.attendance-record dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--typography-caption-font-size);
}

.attendance-latest {
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
}

.attendance-section {
  display: grid;
  gap: var(--spacing-sm);
}

.attendance-section h2,
.attendance-actions h2 {
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
}

.attendance-records,
.attendance-punches {
  display: grid;
  gap: var(--spacing-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.attendance-record > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.attendance-punch {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-default);
}

.attendance-punch > span:last-child {
  display: grid;
  gap: var(--spacing-xxs);
}

.attendance-punch span span {
  color: var(--color-text-secondary);
  font-size: var(--typography-caption-font-size);
}

.attendance-punch-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-top: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
}

.attendance-empty { text-align: center; }

@media (max-width: 480px) {
  .attendance-range { grid-template-columns: 1fr 1fr; }
  .attendance-range button { grid-column: 1 / -1; }
  .attendance-summary dl,
  .attendance-record dl { grid-template-columns: 1fr; }
}