/* HOMECARE — M11 PART 02 Assigned Work. Mobile-first, read-only UI. */
.hc-work {
  display: grid;
  min-width: 0;
  gap: var(--hc-space-4);
  padding-bottom: var(--hc-space-6);
}

.hc-work-heading h1,
.hc-work-request h2 {
  color: var(--hc-text-strong);
  overflow-wrap: anywhere;
}

.hc-work-heading > p:last-child,
.hc-work-card__meta,
.hc-work-card__request,
.hc-work-state p {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-work-list {
  display: grid;
  gap: var(--hc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-work-card {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: var(--hc-space-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.hc-work-card:hover { border-color: var(--hc-border-strong); box-shadow: var(--hc-shadow-md); }
.hc-work-card:focus-visible,
.hc-work-back:focus-visible { outline: 2px solid var(--hc-border-focus); outline-offset: 2px; box-shadow: var(--hc-focus-ring); }

.hc-work-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: var(--hc-space-2);
}

.hc-work-card__reference {
  min-width: 0;
  color: var(--hc-text-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-work-card__progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: var(--hc-bg-subtle);
  border-radius: var(--hc-radius-pill);
}

.hc-work-card__progress > span {
  display: block;
  width: var(--hc-work-progress);
  height: 100%;
  background: var(--hc-color-accent);
  border-radius: inherit;
}

.hc-work-card__request { line-height: 1.45; }
.hc-work-state { display: grid; gap: var(--hc-space-2); }
.hc-work-back { justify-self: start; }

.hc-work-request { display: grid; min-width: 0; gap: var(--hc-space-2); }
.hc-work-request dl { display: grid; margin: 0; }
.hc-work-request dl > div {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
  gap: var(--hc-space-3);
  padding: var(--hc-space-2) 0;
  border-top: 1px solid var(--hc-border);
}
.hc-work-request dt { color: var(--hc-text-muted); font-size: var(--hc-font-size-xs); }
.hc-work-request dd { min-width: 0; margin: 0; color: var(--hc-text-strong); font-size: var(--hc-font-size-sm); overflow-wrap: anywhere; }

.hc-work-actions { display: grid; gap: var(--hc-space-3); }
.hc-work-actions h2 { color: var(--hc-text-strong); font-size: var(--hc-font-size-lg); }
.hc-work-actions__hint { color: var(--hc-text-muted); font-size: var(--hc-font-size-sm); }
.hc-work-actions form { display: grid; gap: var(--hc-space-2); padding-top: var(--hc-space-3); border-top: 1px solid var(--hc-border); }
.hc-work-actions label { display: grid; gap: var(--hc-space-1); color: var(--hc-text-strong); font-size: var(--hc-font-size-sm); font-weight: var(--hc-font-weight-semibold); }
.hc-work-actions input, .hc-work-actions select, .hc-work-actions textarea { width: 100%; min-width: 0; min-height: var(--hc-touch-target, 44px); padding: var(--hc-space-2); color: var(--hc-text-strong); font: inherit; background: var(--hc-bg-surface); border: 1px solid var(--hc-border-strong); border-radius: var(--hc-radius-sm); }
.hc-work-actions textarea { min-height: 76px; resize: vertical; }
.hc-work-actions button { justify-self: start; }
.hc-work-actions__error { color: var(--hc-danger-600); font-size: var(--hc-font-size-sm); }

@media (max-width: 359px) {
  .hc-work-card__top { display: grid; }
  .hc-work-request dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--hc-space-1); }
}