/* Shared components. Modules reference these classes; they never restyle them. */

/* Icon */
.hl-icon {
  display: inline-block;
  flex: none;
  width: var(--hl-icon-size);
  height: var(--hl-icon-size);
}

/* Button */
.hl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hl-space-2);
  min-height: var(--hl-touch-target);
  padding: var(--hl-space-2) var(--hl-space-4);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-button);
  background: var(--hl-card);
  color: var(--hl-text);
  font-weight: var(--hl-weight-medium);
  line-height: var(--hl-line-height-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--hl-duration) var(--hl-easing);
}

.hl-button--primary {
  border-color: var(--hl-primary);
  background: var(--hl-primary);
  color: var(--hl-primary-ink);
  font-weight: var(--hl-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--hl-letter-spacing-caps);
}

.hl-button--accent {
  border-color: var(--hl-accent);
  background: var(--hl-accent);
  color: var(--hl-accent-ink);
  font-weight: var(--hl-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--hl-letter-spacing-caps);
}

.hl-button--danger {
  border-color: var(--hl-danger);
  background: var(--hl-danger);
  color: var(--hl-danger-ink);
  font-weight: var(--hl-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--hl-letter-spacing-caps);
}

.hl-button--quiet {
  border-color: transparent;
  background: transparent;
}

.hl-button--block {
  width: 100%;
}

.hl-button--large {
  min-height: calc(var(--hl-touch-target) * 1.5);
  padding-inline: var(--hl-space-5);
  font-size: var(--hl-text-lg);
}

.hl-button:hover {
  opacity: 0.88;
}

.hl-button:disabled,
.hl-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status chip: the status vocabulary is defined once here (spec 3.3). */
.hl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-space-1);
  padding: var(--hl-space-1) var(--hl-space-2);
  border: var(--hl-border-width) solid currentcolor;
  border-radius: var(--hl-radius-chip);
  background: transparent;
  color: var(--hl-text);
  font-size: var(--hl-text-xs);
  font-weight: var(--hl-weight-bold);
  line-height: var(--hl-line-height-tight);
  text-transform: uppercase;
  letter-spacing: var(--hl-letter-spacing-caps);
  white-space: nowrap;
}

.hl-chip .hl-icon {
  --hl-icon-size: 1.1em;
}

.hl-chip--success {
  border-color: var(--hl-success);
  background: var(--hl-success);
  color: var(--hl-success-ink);
}

.hl-chip--warn {
  border-color: var(--hl-warn);
  background: var(--hl-warn);
  color: var(--hl-warn-ink);
}

.hl-chip--info {
  border-color: var(--hl-info);
  background: var(--hl-info);
  color: var(--hl-info-ink);
}

.hl-chip--danger {
  border-color: var(--hl-danger);
  background: var(--hl-danger);
  color: var(--hl-danger-ink);
}

/* Card */
.hl-card {
  padding: var(--hl-space-4);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  background: var(--hl-card);
  box-shadow: var(--hl-shadow-raised);
}

.hl-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-space-3);
  margin-bottom: var(--hl-space-3);
}

.hl-card__title {
  margin: 0;
  font-size: var(--hl-text-lg);
}

/* Table */
.hl-table-wrap {
  overflow-x: auto;
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  background: var(--hl-card);
}

.hl-table {
  width: 100%;
}

.hl-table__caption {
  padding: var(--hl-cell-padding);
  font-weight: var(--hl-weight-bold);
  text-align: left;
}

.hl-table__head {
  padding: var(--hl-cell-padding);
  background: var(--hl-brand-2);
  color: var(--hl-brand-2-ink);
  font-size: var(--hl-text-xs);
  font-weight: var(--hl-weight-bold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--hl-letter-spacing-caps);
}

.hl-table__cell {
  padding: var(--hl-cell-padding);
  border-top: var(--hl-border-width) solid var(--hl-border);
  vertical-align: top;
}

.hl-table__head--num,
.hl-table__cell--num {
  text-align: right;
}

.hl-table__cell--num {
  font-family: var(--hl-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* Narrow screens: each row becomes a block, each cell shows its column label. */
@media (max-width: 40rem) {
  .hl-table-wrap {
    overflow-x: visible;
  }

  .hl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .hl-table tr {
    display: block;
    border-top: var(--hl-border-width) solid var(--hl-border);
  }

  .hl-table__cell {
    display: flex;
    justify-content: space-between;
    gap: var(--hl-space-3);
    border-top: 0;
    text-align: right;
  }

  .hl-table__cell::before {
    content: attr(data-label);
    color: var(--hl-text-muted);
    font-size: var(--hl-text-xs);
    font-weight: var(--hl-weight-bold);
    text-align: left;
    text-transform: uppercase;
  }

  .hl-table__empty {
    display: block;
  }
}

.hl-table__empty {
  padding: var(--hl-space-5);
  color: var(--hl-text-muted);
  text-align: center;
}

/* Form field */
.hl-field {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-1);
}

.hl-field__label {
  font-weight: var(--hl-weight-medium);
}

.hl-field__required {
  color: var(--hl-danger);
}

.hl-field__help {
  color: var(--hl-text-muted);
  font-size: var(--hl-text-sm);
}

.hl-field__errors {
  margin: 0;
  padding: 0;
  color: var(--hl-danger);
  font-size: var(--hl-text-sm);
  font-weight: var(--hl-weight-medium);
  list-style: none;
}

.hl-field--check {
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: var(--hl-space-3);
}

.hl-field--check > label {
  flex: 1 1 0;
  min-width: 0;
}

.hl-input {
  width: 100%;
  min-height: var(--hl-touch-target);
  padding: var(--hl-space-2) var(--hl-space-3);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-button);
  background: var(--hl-card);
}

.hl-input[aria-invalid="true"] {
  border-color: var(--hl-danger);
  border-width: var(--hl-focus-width);
}

.hl-checkbox {
  width: calc(var(--hl-touch-target) / 2);
  height: calc(var(--hl-touch-target) / 2);
  accent-color: var(--hl-primary);
}

/* Alert (one sentence per message, spec 3.5) */
.hl-alert {
  display: flex;
  gap: var(--hl-space-3);
  padding: var(--hl-space-3) var(--hl-space-4);
  border-left: var(--hl-focus-width) solid var(--hl-info);
  border-radius: var(--hl-radius-card);
  background: var(--hl-card);
}

.hl-alert__text {
  margin: 0;
  align-self: center;
}

.hl-alert--success {
  border-left-color: var(--hl-success);
}

.hl-alert--warn {
  border-left-color: var(--hl-warn);
}

.hl-alert--danger {
  border-left-color: var(--hl-danger);
}

/* Persistent notice (e.g. allergy safety notice in the kitchen). */
.hl-notice {
  display: flex;
  gap: var(--hl-space-3);
  align-items: center;
  padding: var(--hl-space-3) var(--hl-space-4);
  background: var(--hl-danger);
  color: var(--hl-danger-ink);
  font-weight: var(--hl-weight-medium);
}

/* Toasts */
.hl-toasts {
  position: fixed;
  right: var(--hl-space-4);
  bottom: var(--hl-space-4);
  left: var(--hl-space-4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hl-space-2);
  pointer-events: none;
}

.hl-toast {
  max-width: var(--hl-content-width-narrow);
  padding: var(--hl-space-3) var(--hl-space-4);
  border-radius: var(--hl-radius-card);
  background: var(--hl-brand-2);
  color: var(--hl-brand-2-ink);
  box-shadow: var(--hl-shadow-raised);
  pointer-events: auto;
  animation: hl-fade-in var(--hl-duration) var(--hl-easing);
}

.hl-toast--danger {
  background: var(--hl-danger);
  color: var(--hl-danger-ink);
}

.hl-toast--warn {
  background: var(--hl-warn);
  color: var(--hl-warn-ink);
}

@keyframes hl-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Key figure (kitchen totals, readable from a distance) */
.hl-stat {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-1);
}

.hl-stat__value {
  font-family: var(--hl-font-numeric);
  font-size: var(--hl-text-display);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--hl-weight-bold);
  line-height: var(--hl-line-height-tight);
}

.hl-stat__label {
  color: var(--hl-text-muted);
  font-size: var(--hl-text-sm);
}

/* Kitchen packing list: one row per person's meal, a large tick button at the end. */
.hl-pack-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-pack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-space-3);
  min-height: var(--hl-touch-target);
  padding-block: var(--hl-space-3);
  border-top: var(--hl-border-width) solid var(--hl-border);
}

.hl-pack--done .hl-pack__body {
  color: var(--hl-text-muted);
}

.hl-pack__body {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: var(--hl-space-1);
}

.hl-pack__who {
  font-weight: var(--hl-weight-bold);
}

/* The packing tick: a toggle, quiet until packed (many per screen, spec 3.4). */
.hl-pack__toggle {
  min-width: 13rem;
  border-color: var(--hl-primary);
  font-weight: var(--hl-weight-bold);
}

.hl-pack__toggle--on {
  border-color: var(--hl-success);
  background: var(--hl-success);
  color: var(--hl-success-ink);
}

.hl-pack__note {
  font-size: var(--hl-text-sm);
  font-style: italic;
}

/* Delivery steps: a short timeline with the driver's note and photo. */
.hl-steps {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-1);
  padding-left: var(--hl-space-3);
  border-left: var(--hl-focus-width) solid var(--hl-success);
}

.hl-steps__item--undone {
  border-left-color: var(--hl-border);
  color: var(--hl-text-muted);
  text-decoration: line-through;
}

.hl-steps__title {
  font-weight: var(--hl-weight-bold);
}

.hl-steps__photo {
  display: block;
  max-width: 100%;
  max-height: 12rem;
  border-radius: var(--hl-radius-card);
}

/* Style guide page only */
.hl-styleguide__theme {
  padding: var(--hl-space-5);
  background: var(--hl-page);
  color: var(--hl-text);
}

.hl-styleguide__swatch {
  display: flex;
  align-items: flex-end;
  min-height: 4rem;
  padding: var(--hl-space-2);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  font-size: var(--hl-text-xs);
}

.hl-styleguide__swatch--brand { background: var(--hl-brand); color: var(--hl-brand-ink); }
.hl-styleguide__swatch--brand-2 { background: var(--hl-brand-2); color: var(--hl-brand-2-ink); }
.hl-styleguide__swatch--accent { background: var(--hl-accent); color: var(--hl-accent-ink); }
.hl-styleguide__swatch--page { background: var(--hl-page); color: var(--hl-text); }
.hl-styleguide__swatch--card { background: var(--hl-card); color: var(--hl-text); }
.hl-styleguide__swatch--success { background: var(--hl-success); color: var(--hl-success-ink); }
.hl-styleguide__swatch--info { background: var(--hl-info); color: var(--hl-info-ink); }
.hl-styleguide__swatch--warn { background: var(--hl-warn); color: var(--hl-warn-ink); }
.hl-styleguide__swatch--danger { background: var(--hl-danger); color: var(--hl-danger-ink); }

/* Choice list: large touch targets for picking one option (radio) or several (checkbox). */
.hl-choices {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.hl-choices__legend {
  margin-bottom: var(--hl-space-2);
  font-weight: var(--hl-weight-bold);
}

.hl-choice {
  display: flex;
  gap: var(--hl-space-3);
  align-items: flex-start;
  min-height: var(--hl-touch-target);
  padding: var(--hl-space-3);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  background: var(--hl-card);
  cursor: pointer;
}

.hl-choice:has(.hl-choice__input:checked) {
  border-color: var(--hl-primary);
  border-width: var(--hl-focus-width);
}

.hl-choice__input {
  flex: none;
  width: calc(var(--hl-touch-target) / 2);
  height: calc(var(--hl-touch-target) / 2);
  margin: 0;
  accent-color: var(--hl-primary);
}

.hl-choice__body {
  display: flex;
  flex-direction: column;
  gap: var(--hl-space-1);
}

.hl-choice__title {
  font-weight: var(--hl-weight-medium);
}

.hl-choice__text {
  color: var(--hl-text-muted);
  font-size: var(--hl-text-sm);
}

/* A day in a week overview: date, then its meals. */
.hl-day__date {
  font-size: var(--hl-text-lg);
  font-weight: var(--hl-weight-bold);
}

.hl-day__meal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-space-2);
  padding-block: var(--hl-space-2);
  border-top: var(--hl-border-width) solid var(--hl-border);
}

/* Day heading with previous / next arrows (kitchen, delivery). */
.hl-day-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 var(--hl-space-2);
  width: 100%;
  max-width: var(--hl-content-width-narrow);
  margin-inline: auto;
}

.hl-day-nav__title {
  margin: 0;
  font-size: var(--hl-text-xl);
  text-align: center;
}

.hl-day-nav__step {
  min-width: var(--hl-touch-target);
  padding-inline: 0;
}

.hl-day-nav__today {
  display: inline-flex;
  grid-column: 2;
  align-items: center;
  justify-content: center;
  gap: var(--hl-space-1);
  min-height: var(--hl-touch-target);
  font-size: var(--hl-text-sm);
}

/* Photo picker: one large button that opens the camera. */
.hl-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hl-space-2);
  min-height: calc(var(--hl-touch-target) * 1.5);
  padding: var(--hl-space-2) var(--hl-space-4);
  border: var(--hl-border-width) dashed var(--hl-border);
  border-radius: var(--hl-radius-button);
  background: var(--hl-page);
  font-weight: var(--hl-weight-bold);
  cursor: pointer;
}

.hl-photo:focus-within {
  outline: var(--hl-focus-width) solid var(--hl-focus);
  outline-offset: var(--hl-border-width);
}

.hl-photo--done {
  border-style: solid;
  border-color: var(--hl-success);
}

.hl-photo__preview {
  width: 3rem;
  height: 3rem;
  border-radius: var(--hl-radius-button);
  object-fit: cover;
}

/* Optional extra (a note): closed until asked for. */
.hl-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--hl-space-2);
  min-height: var(--hl-touch-target);
  font-weight: var(--hl-weight-bold);
  text-decoration: underline;
  cursor: pointer;
}

.hl-disclosure[open] > summary .hl-icon {
  transform: rotate(45deg);
}

.hl-disclosure[open] > summary {
  margin-bottom: var(--hl-space-2);
}

/* Drops of the day at a glance, linking to each card. */
.hl-drop-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hl-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-drop-summary__link {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-space-2);
  min-height: var(--hl-touch-target);
  padding: var(--hl-space-1) var(--hl-space-3);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-button);
  background: var(--hl-card);
  color: var(--hl-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.hl-drop-summary__time {
  font-weight: var(--hl-weight-bold);
}

/* A whole card that is one link (a week to order, for example). */
.hl-link-card {
  display: flex;
  align-items: center;
  gap: var(--hl-space-3);
  padding: var(--hl-space-4);
  border: var(--hl-border-width) solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  background: var(--hl-card);
  color: var(--hl-text);
  text-decoration: none;
}

.hl-link-card--open {
  border-color: var(--hl-primary);
  box-shadow: var(--hl-shadow-raised);
}

.hl-link-card__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--hl-space-1);
  min-width: 0;
}

.hl-link-card__title {
  font-size: var(--hl-text-lg);
  font-weight: var(--hl-weight-bold);
}

.hl-link-card__todo {
  font-weight: var(--hl-weight-bold);
}

/* A list of labelled links or rows with an action at the end (downloads, adjustments). */
.hl-download-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-download-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-space-2) var(--hl-space-4);
  min-height: var(--hl-touch-target);
  padding-block: var(--hl-space-1);
  border-bottom: var(--hl-border-width) solid var(--hl-border);
}

.hl-download-list > li:last-child {
  border-bottom: 0;
}

.hl-table__total > .hl-table__cell {
  border-top: var(--hl-border-width) solid var(--hl-text);
  font-weight: var(--hl-weight-bold);
  text-align: start;
}

.hl-table__total > .hl-table__cell--num {
  text-align: end;
}