/* Material Design 3 tokens */
:root {
  --md-primary: #4f378b;
  --md-on-primary: #ffffff;
  --md-surface: #fef7ff;
  --md-surface-container: #f3edf7;
  --md-on-surface: #1d1b20;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;
  --md-tone-0: #00696d;
  --md-tone-1: #6750a4;
  --md-tone-2: #6b6f00;
  --md-tone-3: #2f6a2f;
  --md-tone-4: #2a5ea8;
  --md-star: #b78a00;
  --md-success: #2e7d32;
  --md-error: #b3261e;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-elevation-1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --md-easing: cubic-bezier(0.2, 0, 0, 1);
  --drawer-width: 304px;
  color-scheme: light;
}

/* js/theme.js sets data-theme before the first paint. */
:root[data-theme="dark"] {
  --md-primary: #d0bcff;
  --md-on-primary: #381e72;
  --md-surface: #141218;
  --md-surface-container: #211f26;
  --md-on-surface: #e6e0e9;
  --md-on-surface-variant: #cac4d0;
  --md-outline: #938f99;
  --md-outline-variant: #49454f;
  --md-secondary-container: #4a4458;
  --md-on-secondary-container: #e8def8;
  --md-tone-0: #6fd8dc;
  --md-tone-1: #d0bcff;
  --md-tone-2: #d4d86a;
  --md-tone-3: #9bd795;
  --md-tone-4: #a8c8ff;
  --md-star: #f2c94c;
  --md-success: #7bd88f;
  --md-error: #f2b8b5;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;
  color-scheme: dark;
}

/* The settings page stores only the main colours; everything else follows from them.
   It also applies to its live preview, which sits inside a page of either theme. */
:root[data-theme="light"][data-custom-themes~="light"],
.theme-preview[data-mode="light"] {
  --theme-tint: 14%;
  --theme-error-tint: 16%;
}

:root[data-theme="dark"][data-custom-themes~="dark"],
.theme-preview[data-mode="dark"] {
  --theme-tint: 30%;
  --theme-error-tint: 40%;
  color-scheme: dark;
}

:root[data-theme="light"][data-custom-themes~="light"],
:root[data-theme="dark"][data-custom-themes~="dark"],
.theme-preview {
  /* Clamped to black or white, whichever reads better on the primary colour. */
  --md-on-primary: oklch(from var(--md-primary) calc((0.66 - l) * 100) 0 0);
  --md-on-surface-variant: color-mix(in srgb, var(--md-on-surface) 80%, var(--md-surface));
  --md-outline: color-mix(in srgb, var(--md-on-surface) 55%, var(--md-surface));
  --md-outline-variant: color-mix(in srgb, var(--md-on-surface) 22%, var(--md-surface));
  --md-secondary-container: color-mix(in srgb, var(--md-primary) var(--theme-tint), var(--md-surface));
  --md-on-secondary-container: var(--md-on-surface);
  --md-error-container: color-mix(in srgb, var(--md-error) var(--theme-error-tint), var(--md-surface));
  --md-on-error-container: var(--md-on-surface);
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Vazirmatn", system-ui, sans-serif;
  background: var(--md-surface);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
}

/* Login */
.login-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--md-surface-container);
  border-radius: 28px;
}

.login-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
}

.form-error {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  font-size: 14px;
  line-height: 20px;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setup-logout {
  display: flex;
  justify-content: center;
}

.form-hint {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

/* Outlined text field */
.text-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.text-field input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  outline: none;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 16px;
  transition: border-color 150ms var(--md-easing);
}

.text-field input:hover {
  border-color: var(--md-on-surface);
}

.text-field input:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.text-field label {
  position: absolute;
  top: 16px;
  right: 12px;
  padding: 0 4px;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  pointer-events: none;
  transition: transform 150ms var(--md-easing), font-size 150ms var(--md-easing),
    color 150ms var(--md-easing);
}

.text-field input:focus + label,
.text-field input:not(:placeholder-shown) + label,
.text-field input:-webkit-autofill + label {
  transform: translateY(-24px);
  font-size: 12px;
  line-height: 16px;
}

.text-field input:focus + label {
  color: var(--md-primary);
}

.text-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--md-on-surface);
  -webkit-box-shadow: inset 0 0 0 100px var(--md-surface-container);
  caret-color: var(--md-on-surface);
}

.text-field--error input,
.text-field--error input:hover,
.text-field--error input:focus {
  border-color: var(--md-error);
}

.text-field--error input:focus {
  box-shadow: inset 0 0 0 1px var(--md-error);
}

.text-field--error label,
.text-field--error input:focus + label {
  color: var(--md-error);
}

.supporting-text {
  margin: 4px 16px 0;
  color: var(--md-error);
  font-size: 12px;
  line-height: 16px;
}

/* Floats over what is below, so the form neither moves nor loses a click. */
.keyboard-hint {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 4px;
  background: var(--md-surface);
  box-shadow: var(--md-elevation-1);
  color: var(--md-on-surface);
  font-size: 14px;
  line-height: 20px;
  pointer-events: none;
}

.keyboard-hint[hidden] {
  display: none;
}

.keyboard-hint::before {
  content: "!";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: #f57c00;
  color: #fff;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.keyboard-hint::after {
  content: "";
  position: absolute;
  top: -6px;
  inset-inline-start: 16px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--md-outline-variant);
  border-left: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  transform: rotate(45deg);
}

/* Captcha */
.captcha {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.captcha-image {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  background: #f3edf7;
  cursor: pointer;
}

.captcha-image:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Filled button */
.filled-button {
  position: relative;
  height: 48px;
  margin-top: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 150ms var(--md-easing);
}

/* State layer */
.filled-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--md-easing);
}

.filled-button:hover {
  box-shadow: var(--md-elevation-1);
}

.filled-button:hover::after {
  opacity: 0.08;
}

.filled-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.filled-button:focus-visible::after,
.filled-button:active::after {
  opacity: 0.12;
}

/* Icon button */
.icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color 150ms var(--md-easing);
}

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.icon-button:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.icon-button:active {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.icon-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

/* Navigation drawer */
.drawer-toggle {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 30;
}

/* With the drawer closed the button sits over the page, so it needs a surface of its own. */
html[data-drawer="closed"] .drawer-toggle {
  background: color-mix(in srgb, var(--md-surface-container) 72%, transparent);
  box-shadow: var(--md-elevation-1);
  backdrop-filter: blur(8px);
}

html[data-drawer="closed"] .drawer-toggle:hover {
  background: color-mix(in srgb, var(--md-surface-container) 88%, transparent);
}

.drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 20;
  width: var(--drawer-width);
  max-width: calc(100vw - 56px);
  padding: 8px 12px;
  overflow-y: auto;
  background: var(--md-surface-container);
  border-radius: 16px 0 0 16px;
  transition: transform 250ms var(--md-easing), visibility 250ms;
}

html[data-drawer="closed"] .drawer {
  visibility: hidden;
  transform: translateX(100%);
}

/* Sticky so a long menu scrolls under the header, not under the fixed menu button. */
.drawer-title {
  position: sticky;
  top: -8px;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  height: 64px;
  margin: -8px -12px 12px;
  padding: 0 68px 0 12px;
  background: var(--md-surface-container);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

/* Notifications: a bell in the drawer header that opens a modal side sheet. */
.notifications-button {
  position: relative;
  flex: none;
  margin-inline: auto -8px;
}

.notifications-badge {
  position: absolute;
  top: 6px;
  left: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--md-error);
  color: var(--md-surface);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

.notifications {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, calc(100vw - 56px));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px 0 0 16px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.notifications[open] {
  display: flex;
  flex-direction: column;
  animation: notifications-in 250ms var(--md-easing);
}

.notifications::backdrop {
  background: rgb(0 0 0 / 32%);
}

.notifications[open]::backdrop {
  animation: task-backdrop-in 250ms ease-out;
}

@keyframes notifications-in {
  from {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notifications[open],
  .notifications[open]::backdrop {
    animation: none;
  }
}

.notifications-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 8px 24px 8px 12px;
}

.notifications-title {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
}

.push-control {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--md-surface);
}

.push-control[hidden],
.push-control [hidden] {
  display: none;
}

.push-control-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.push-control-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.push-control-status {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.notifications-list {
  flex: 1;
  margin: 0;
  padding: 0 12px 12px;
  overflow-y: auto;
  list-style: none;
}

.notifications-list li + li {
  margin-top: 4px;
}

.notification {
  display: flex;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms var(--md-easing);
}

.notification:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.notification:active {
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

.notification:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

.notification--unread {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.notification--unread:hover {
  background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container));
}

.notification-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--md-primary) 14%, transparent);
  color: var(--md-primary);
}

.notification--partial .notification-icon {
  background: var(--md-error-container);
  color: var(--md-error);
}

.notification--partial .notification-title {
  color: var(--md-error);
}

.notification--partial.notification--unread {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.notification--partial.notification--unread:hover {
  background: color-mix(in srgb, var(--md-on-error-container) 8%, var(--md-error-container));
}

.notification--partial.notification--unread .notification-icon {
  background: color-mix(in srgb, var(--md-error) 14%, transparent);
}

.notification--partial.notification--unread .notification-text,
.notification--partial.notification--unread .notification-time {
  color: inherit;
}

.notification-icon svg,
.notifications-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.notification-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notification-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.notification-text {
  color: var(--md-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.notification-time {
  margin-top: 2px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.notifications-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.notifications-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.notifications-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.notifications-empty-text {
  margin: 4px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.drawer-user {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-on-surface) 5%, transparent);
}

.drawer-user-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--md-secondary-container);
  box-shadow: 0 0 0 2px var(--md-surface-container), 0 0 0 4px var(--md-primary);
  color: var(--md-on-secondary-container);
  font-size: 18px;
  font-weight: 500;
}

.drawer-user-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-user-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-inline-start: 4px;
}

.drawer-user-name,
.drawer-user-phone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-user-name {
  font-size: 15px;
  font-weight: 500;
}

/* Left-to-right text, kept against the name on this right-to-left card. */
.drawer-user-phone {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  text-align: right;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 28px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing);
  user-select: none;
}

.nav-item:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.nav-item:active {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.nav-item:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

.nav-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 36px;
}

.nav-children .nav-item {
  min-height: 48px;
  font-weight: 400;
}

.nav-icon,
.nav-chevron {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.nav-chevron {
  margin-inline-start: auto;
  transition: transform 200ms var(--md-easing);
}

/* How many things wait behind an item; the group shows the sum while it is shut.
   It turns red while some of them are new to the reader. */
.nav-badge {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-inline-start: auto;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--md-surface-container);
}

.nav-badge--new {
  background: var(--md-error);
  color: var(--md-surface);
  animation: nav-badge-in 240ms var(--md-easing);
}

.nav-badge + .nav-chevron {
  margin-inline-start: 0;
}

/* An open group shows the count on the item itself, not twice. */
.nav-group[open] > summary .nav-badge {
  display: none;
}

.nav-group[open] > summary .nav-chevron {
  margin-inline-start: auto;
}

@keyframes nav-badge-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-badge {
    animation: none;
  }
}

.nav-group summary {
  list-style: none;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.scrim {
  display: none;
}

.drawer {
  display: flex;
  flex-direction: column;
}

.drawer-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.drawer-logout {
  flex: 1;
  min-width: 0;
}

/* The knob stays left-to-right like any switch, even on this right-to-left page. */
.theme-toggle {
  flex: none;
  display: flex;
  align-items: center;
  width: 44px;
  height: 24px;
  margin-inline-end: 8px;
  padding: 2px;
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  direction: ltr;
  cursor: pointer;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.theme-toggle-knob {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  transition: transform 150ms var(--md-easing);
}

.theme-toggle[aria-checked="true"] .theme-toggle-knob {
  transform: translateX(20px);
}

.theme-toggle-knob svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.theme-toggle-moon,
.theme-toggle[aria-checked="true"] .theme-toggle-sun {
  display: none;
}

.theme-toggle[aria-checked="true"] .theme-toggle-moon {
  display: block;
}

.nav-item--button {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: start;
}

.nav-icon--mirrored {
  transform: scaleX(-1);
}

.nav-item--active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/* A section whose page does not exist yet. */
.nav-item--soon {
  opacity: 0.65;
  cursor: default;
}

.nav-item--soon:hover,
.nav-item--soon:active {
  background: transparent;
}

/* Pages */
.page {
  align-self: start;
  justify-self: stretch;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page--narrow {
  max-width: 640px;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

/* The top of a page, heading and its buttons, stands apart from what follows. */
.page > .page-header:first-child,
.page > .page-heading:first-child {
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--md-outline-variant);
}

/* A page's heading: its section's icon, the way down to it, and the title. */
.page-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon trail"
    "icon title";
  align-items: center;
  gap: 2px 14px;
  min-width: 0;
}

.page-heading:not(:has(.page-trail)) {
  grid-template-areas: "icon title";
}

.page-heading:not(:has(.page-heading-icon)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "trail"
    "title";
}

.page-heading:not(:has(.page-heading-icon)):not(:has(.page-trail)) {
  grid-template-areas: "title";
}

.page-heading-icon {
  display: grid;
  grid-area: icon;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-primary) 16%, transparent);
  color: var(--md-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-primary) 22%, transparent);
}

.page-heading-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.page-trail {
  display: flex;
  flex-wrap: wrap;
  grid-area: trail;
  align-items: center;
  gap: 2px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 20px;
}

.page-trail a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms var(--md-easing);
}

.page-trail a:hover {
  color: var(--md-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-trail-separator {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.6;
}

.page-heading .page-title {
  grid-area: title;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .page-heading-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .page-heading-icon svg {
    width: 22px;
    height: 22px;
  }

  .page-heading .page-title {
    font-size: 19px;
    line-height: 28px;
  }
}

.page-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--md-surface-container);
  border-radius: 28px;
}

.inline-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--md-surface-container);
  border-radius: 16px;
}

.inline-form .filled-button {
  height: 56px;
}

.message {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}

.message--success {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.message--error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.filled-button--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0 24px;
  height: 40px;
  border-radius: 20px;
  font-size: 14px;
  text-decoration: none;
}

.filled-button--danger {
  height: 40px;
  margin-top: 0;
  padding: 0 24px;
  border-radius: 20px;
  background: var(--md-error);
  color: var(--md-surface);
  font-size: 14px;
}

.outlined-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border: 1px solid var(--md-outline);
  border-radius: 20px;
  background: transparent;
  color: var(--md-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing);
}

.outlined-button:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.outlined-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.icon-button--danger {
  color: var(--md-error);
}

/* Data table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.data-table th,
.data-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
  text-align: start;
  white-space: nowrap;
}

.data-table th {
  height: 56px;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-weight: 500;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
}

.data-table--centered th,
.data-table--centered td {
  text-align: center;
}

.data-table--centered .chips,
.data-table--centered .row-actions {
  justify-content: center;
}

/* The running number of a row: narrow and quiet, so the data keeps the attention. */
.data-table .row-number {
  width: 1%;
  padding-inline: 12px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-align: center;
}

.data-table .cell-address {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 140px;
}

.chip {
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 12px;
  line-height: 20px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
}

/* Form controls */
.text-field textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  outline: none;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  resize: vertical;
}

.text-field textarea:hover {
  border-color: var(--md-on-surface);
}

.text-field textarea:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.text-field textarea:focus + label,
.text-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-24px);
  font-size: 12px;
  line-height: 16px;
}

.text-field textarea:focus + label {
  color: var(--md-primary);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
}

.checkbox-group legend {
  padding: 0 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14px;
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--md-primary);
}

.access-tree {
  margin: 0;
  padding: 0 28px 0 0;
  list-style: none;
}

.access-tree--root {
  padding: 0;
}

.access-tree--root > li + li {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--md-outline-variant);
}

/* Extended FAB */
.extended-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--md-primary),
    color-mix(in srgb, var(--md-primary) 62%, #7d5260)
  );
  color: var(--md-on-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 4px rgb(0 0 0 / 30%), 0 6px 14px 2px rgb(0 0 0 / 20%);
  transition: transform 150ms var(--md-easing), box-shadow 150ms var(--md-easing);
}

.extended-fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 200ms var(--md-easing);
}

/* State layer */
.extended-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--md-easing);
}

.extended-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgb(0 0 0 / 30%), 0 10px 20px 4px rgb(0 0 0 / 22%);
}

.extended-fab:hover::after {
  opacity: 0.08;
}

.extended-fab:hover svg {
  transform: rotate(90deg);
}

.extended-fab:active {
  transform: translateY(0);
}

.extended-fab:active::after {
  opacity: 0.12;
}

.extended-fab:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Excel drop zone */
.dropzone {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 200px;
  padding: 20px 16px;
  border: 2px dashed var(--md-outline);
  border-radius: 28px;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.dropzone:hover,
.dropzone--active {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container));
}

.dropzone--selected {
  border-style: solid;
  border-color: var(--md-primary);
}

.dropzone--rejected {
  border-color: var(--md-error);
}

.dropzone:focus-within {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dropzone-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  fill: var(--md-primary);
}

.dropzone-title {
  color: var(--md-on-surface);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.dropzone-hint {
  font-size: 14px;
  line-height: 20px;
}

.dropzone-status {
  min-height: 20px;
  margin-top: 8px;
  color: var(--md-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.dropzone--rejected .dropzone-status {
  color: var(--md-error);
}

/* Settings */
.settings-tabs {
  align-self: flex-start;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--md-on-surface) 7%, transparent);
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--md-easing), color 150ms var(--md-easing);
}

.settings-tab:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
}

.settings-tab[aria-current="page"] {
  background: var(--md-primary);
  box-shadow: var(--md-elevation-1);
  color: var(--md-on-primary);
}

.settings-tab svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.settings-heading {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.settings-general {
  gap: 28px;
  width: 100%;
  max-width: 720px;
}

.settings-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.settings-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.settings-option:hover {
  border-color: var(--md-outline);
}

.settings-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-option svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--md-primary);
}

.settings-option:has(input:checked) {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  background: var(--md-secondary-container);
}

.settings-option:has(input:focus-visible) {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Theme editor */
.theme-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: start;
  gap: 20px;
}

.theme-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.theme-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.theme-preset:hover {
  border-color: var(--md-outline);
}

.theme-preset:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.theme-preset[aria-pressed="true"] {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  background: var(--md-secondary-container);
}

.theme-preset-dots {
  flex: none;
  display: flex;
}

.theme-preset-dots span {
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-surface);
  border-radius: 50%;
}

.theme-preset-dots span + span {
  margin-inline-start: -6px;
}

.theme-colors-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.theme-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-mode[hidden] {
  display: none;
}

.color-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.color-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px 96px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  transition: background-color 150ms var(--md-easing);
}

.color-row:hover {
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
}

.color-swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 150ms var(--md-easing);
}

.color-swatch:hover {
  transform: scale(1.06);
}

.color-swatch:focus-visible,
.color-swatch[aria-expanded="true"] {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.color-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
}

.color-row-label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-row-hint {
  overflow: hidden;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keeps its column while hidden, so the hex fields stay in one line. */
.color-reset {
  width: 40px;
  height: 40px;
}

.color-reset[hidden] {
  display: grid;
  visibility: hidden;
}

.color-reset svg {
  width: 20px;
  height: 20px;
}

.color-hex {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  outline: none;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 13px;
  text-align: center;
  transition: border-color 150ms var(--md-easing);
}

.color-hex:hover {
  border-color: var(--md-outline);
}

.color-hex:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.color-hex--bad,
.color-hex--bad:focus {
  border-color: var(--md-error);
  box-shadow: inset 0 0 0 1px var(--md-error);
}

.theme-warning {
  margin: 4px 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-star) 18%, transparent);
  font-size: 13px;
  line-height: 20px;
}

.theme-subheading {
  margin: 12px 8px 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.theme-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-top: 4px;
  padding: 0 8px;
  border-radius: 12px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.theme-more summary::-webkit-details-marker {
  display: none;
}

.theme-more summary:hover {
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
}

.theme-more summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 150ms var(--md-easing);
}

.theme-more[open] summary svg {
  transform: rotate(180deg);
}

.color-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 8px 8px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  box-shadow: var(--md-elevation-1);
  animation: task-sort-open 120ms var(--md-easing);
}

.color-picker[hidden] {
  display: none;
}

.color-picker-area {
  position: relative;
  height: 150px;
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--picker-hue, 0) 100% 50%));
  cursor: crosshair;
  touch-action: none;
}

.color-picker-area:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.color-picker-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--md-elevation-1);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-picker-hue {
  width: 100%;
  height: 14px;
  margin: 0;
  border-radius: 7px;
  outline-offset: 2px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  appearance: none;
}

.color-picker-hue::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--md-on-surface);
  box-shadow: var(--md-elevation-1);
  appearance: none;
}

.color-picker-hue::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--md-on-surface);
}

.color-picker-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-picker-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms var(--md-easing);
}

.color-picker-swatch:hover {
  transform: scale(1.15);
}

.color-picker-swatch:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}

/* Stays in reach however long the list of colours gets. */
.theme-actions {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 28px;
  background: var(--md-surface-container);
  box-shadow: var(--md-elevation-1);
}

.theme-actions .filled-button {
  height: 40px;
  margin-top: 0;
}

.theme-actions .filled-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.theme-dirty {
  margin-inline-start: auto;
  padding-inline-end: 6px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.theme-preview-box {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.theme-preview {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 12px;
  line-height: 18px;
  transition: background-color 150ms var(--md-easing);
}

.theme-preview-drawer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 8px;
  background: var(--md-surface-container);
}

.theme-preview-drawer strong {
  overflow: hidden;
  margin-bottom: 8px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-preview-nav {
  padding: 6px 10px;
  border-radius: 14px;
  color: var(--md-on-surface-variant);
}

.theme-preview-nav--active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.theme-preview-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 12px;
}

.theme-preview-title {
  font-size: 14px;
  font-weight: 500;
}

.theme-preview-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
}

.theme-preview-group--urgent {
  border-color: color-mix(in srgb, var(--md-error) 45%, var(--md-outline-variant));
}

.theme-preview-group-title {
  color: var(--md-error);
  font-weight: 500;
}

.theme-preview-group-title--plain {
  color: var(--md-on-surface);
}

.theme-preview-card {
  --tone: var(--md-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid var(--md-outline-variant);
  border-inline-start: 3px solid var(--tone);
  border-radius: 10px;
  background: var(--md-surface-container);
  white-space: nowrap;
}

.theme-preview-card--urgent {
  background: color-mix(in srgb, var(--md-error) 10%, var(--md-surface-container));
}

.theme-preview-done {
  margin-inline-start: auto;
  color: var(--md-success);
  font-weight: 500;
}

.theme-preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-preview-button {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 500;
}

.theme-preview-button--outlined {
  border-color: var(--md-outline);
  background: transparent;
  color: var(--md-primary);
}

@media (max-width: 1180px) {
  .theme-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-preview-box {
    position: static;
    order: -1;
  }
}

@media (max-width: 600px) {
  .color-row {
    grid-template-columns: 40px minmax(0, 1fr) 32px 82px;
    gap: 8px;
    padding: 8px 2px;
  }

  .color-row-hint {
    display: none;
  }

  .theme-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* On a phone the bar only stays on screen once there is something to save. */
  .theme-actions {
    position: static;
    padding: 8px;
  }

  .theme-actions:has(.theme-dirty:not([hidden])) {
    position: sticky;
  }

  .theme-actions .filled-button,
  .theme-actions .outlined-button {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .theme-dirty {
    order: -1;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .color-reset {
    width: 32px;
    height: 32px;
  }

  .color-picker {
    margin-inline: 0;
  }

  .theme-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-preview-drawer {
    display: none;
  }
}

/* Task list */
/* Stops below the fixed menu button, which would otherwise cover the panel's first option. */
/* The toolbar answers to the panel's own width: the drawer can leave it narrow on a wide screen. */
.task-filters {
  container: task-panel / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 14px;
  background: var(--md-surface-container);
  border-radius: 28px;
  box-shadow: var(--md-elevation-1);
  scroll-margin-top: 64px;
}

.task-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 40px;
}

.task-toolbar-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.task-toolbar-label {
  padding-inline-start: 6px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.task-sort {
  position: relative;
}

.task-sort-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-on-surface) 7%, transparent);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing);
}

.task-sort-button:hover,
.task-sort-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

.task-sort-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}

.task-sort-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.task-sort-button svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--md-on-surface-variant);
}

.task-sort-label {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.task-sort-chevron {
  transition: transform 150ms var(--md-easing);
}

.task-sort-button[aria-expanded="true"] .task-sort-chevron {
  transform: rotate(180deg);
}

.task-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100%;
  width: 200px;
  padding: 6px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  box-shadow: 0 4px 16px rgb(0 0 0 / 22%), var(--md-elevation-1);
  animation: task-sort-open 120ms var(--md-easing);
}

.task-sort-menu[hidden] {
  display: none;
}

@keyframes task-sort-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.task-sort-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--md-easing);
}

.task-sort-option:hover,
.task-sort-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.task-sort-option svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
  visibility: hidden;
}

.task-sort-option[aria-checked="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 500;
}

.task-sort-option[aria-checked="true"] svg {
  visibility: visible;
}

.task-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--md-outline-variant);
}

.task-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.task-filters .task-toolbar-action {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  transition: background-color 150ms var(--md-easing), color 150ms var(--md-easing);
}

.task-filters .task-toolbar-action:hover {
  background: color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.task-toolbar-action svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.task-filters .task-toolbar-action[aria-expanded="true"],
.task-filters .task-toolbar-action[aria-pressed="true"] {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

/* Without room for one row: the grouping fills the top row and the rest sits centred under it. */
@container task-panel (max-width: 900px) {
  /* No wrapping: a wrapping column sizes its rows to their content, not to the panel. */
  .task-toolbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .task-toolbar-label {
    display: none;
  }

  /* Nothing may push the panel wider than the screen; the grouping scrolls instead. */
  .task-toolbar,
  .task-toolbar-group,
  .task-toolbar-actions {
    min-width: 0;
  }

  .task-toolbar-group .view-switch {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .task-toolbar-group .view-switch-button {
    flex: 1 0 auto;
    justify-content: center;
  }

  .task-toolbar-actions {
    flex-wrap: wrap;
    justify-content: center;
    margin-inline-start: 0;
  }
}

/* On a phone the order also takes a whole row, above the buttons. */
@media (max-width: 480px) {
  .task-toolbar-divider {
    display: none;
  }

  .task-sort {
    flex: 1 0 100%;
    min-width: 0;
  }

  /* Tighter, so all three groupings fit across a phone without scrolling. */
  .task-toolbar-group .view-switch-button {
    gap: 4px;
    padding: 0 8px;
  }

  .task-sort-menu {
    left: 0;
    width: auto;
  }
}

.task-search {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.task-search[hidden] {
  display: none;
}

.task-search .filled-button {
  height: 56px;
}

.task-search--plain {
  margin: 0 0 16px;
}

.task-search .text-field {
  flex: 1;
}

.stock-operations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stock-legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.stock-operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stock-operation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.stock-operation:hover {
  border-color: var(--md-outline);
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface));
}

.stock-operation input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.stock-operation svg {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  fill: var(--md-primary);
}

.stock-operation-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.stock-operation-text {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

.stock-operation:has(input:checked) {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
  background: var(--md-secondary-container);
}

.stock-operation:has(input:focus-visible) {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.stock-fields {
  padding-top: 20px;
  border-top: 1px solid var(--md-outline-variant);
}

.stock-route {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stock-route > .section-fields {
  flex: 1;
  min-width: 0;
}

.stock-route-arrow {
  flex: none;
  width: 24px;
  height: 24px;
  fill: var(--md-primary);
}

.stock-route-arrow[hidden] {
  display: none;
}

.stock-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stock-item-facts[hidden],
.stock-details > [hidden],
.stock-orders[hidden],
.stock-order[hidden],
.stock-notice[hidden],
.stock-actions[hidden],
.order-line[hidden] {
  display: none;
}

.stock-orders {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stock-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.stock-order {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}

.stock-order:hover {
  border-color: var(--md-outline);
}

.stock-order:has(input:checked) {
  border-color: var(--md-primary);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.stock-order input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--md-primary);
}

.stock-order-main,
.stock-order-amount {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.stock-order-main {
  flex: 1;
}

.stock-order-amount {
  flex: none;
  align-items: flex-end;
}

.stock-order-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.stock-order-text {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.75;
}

.stock-order progress {
  width: 96px;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  appearance: none;
  background: var(--md-outline-variant);
}

.stock-order progress::-webkit-progress-bar {
  background: var(--md-outline-variant);
}

.stock-order progress::-webkit-progress-value {
  background: var(--md-primary);
}

.stock-order progress::-moz-progress-bar {
  background: var(--md-primary);
}

.stock-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.stock-notice svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.stock-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 20px;
}

.stock-notice-text strong {
  font-size: 14px;
  font-weight: 500;
}

.stock-details {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 12px;
}

.stock-details > * {
  flex: 1 1 200px;
  min-width: 0;
}

.stock-details > .stock-route:has(> [data-operations="transfer"]:not([hidden])) {
  flex-basis: 100%;
}

.text-field--locked svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  fill: var(--md-on-surface-variant);
  transform: translateY(-50%);
}

.stock-actions {
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--md-outline-variant);
}

.page--form {
  max-width: 960px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section + .form-section {
  padding-top: 20px;
  border-top: 1px solid var(--md-outline-variant);
}

.form-section-title {
  margin: 0;
  color: var(--md-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.form-section .form-hint[hidden],
.form-grid > [hidden] {
  display: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px 12px;
}

.form-grid-wide {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 16px;
}

.order-side {
  position: sticky;
  top: 16px;
}

.order-side .filled-button,
.order-cancel {
  justify-content: center;
  width: 100%;
  text-align: center;
}

.order-count {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}

.order-count span {
  color: var(--md-on-surface);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
}

/* The lines answer to their own width: with the drawer open the form is far narrower
   than the screen. */
.order-lines {
  container: order-lines / inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
}

.order-lines[hidden] {
  display: none;
}

.order-lines-head,
.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 170px 96px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}

.order-lines-head {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
}

.order-line {
  border-top: 1px solid var(--md-outline-variant);
}

.order-line-item,
.order-line-amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-line-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-line-sku {
  align-self: flex-start;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.order-line-stock {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.order-line-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.order-line-qty:focus-within {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.order-line-qty--error {
  border-color: var(--md-error);
}

.order-line-qty input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 15px;
}

.order-line-error {
  color: var(--md-error);
  font-size: 12px;
  line-height: 16px;
}

.order-line .icon-button,
.order-line-received {
  justify-self: end;
}

.order-lines-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 16px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  text-align: center;
}

.order-lines-empty[hidden],
.form-section .chips[hidden] {
  display: none;
}

.order-lines-empty svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  opacity: 0.6;
}

.person-select-option:empty {
  display: none;
}

/* The summary moves under the form once the two cannot sit side by side: on a narrow
   screen, or on a mid-sized one with the drawer open. */
@media (max-width: 900px) {
  .order-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-side {
    position: static;
  }
}

@media (max-width: 1240px) {
  html[data-drawer="open"] .order-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-drawer="open"] .order-side {
    position: static;
  }
}

/* Too narrow for columns, each line becomes a small card: the part, then its numbers. */
@container order-lines (max-width: 560px) {
  .order-lines-head {
    display: none;
  }

  .order-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .order-line-stock {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .order-line-amount {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.order-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.order-facts p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}

/* Two small cards a row, so the fields stay close to the choice on a phone. */
@media (max-width: 600px) {
  .stock-operation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stock-operation {
    min-height: 0;
    padding: 12px;
  }

  .stock-operation svg {
    margin-bottom: 4px;
  }

  .stock-operation-text {
    display: none;
  }

  .stock-route {
    flex-direction: column;
    align-items: stretch;
  }

  .stock-route-arrow {
    align-self: center;
    transform: rotate(-90deg);
  }
}

.stock-heading {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.stock-section-header {
  margin-top: 32px;
}

/* With the panel's gap and the rows' height, every space around the boxes comes out equal. */
.attribute-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stock-section-header .stock-heading {
  margin: 0;
}

/* The toolbar's filter button opens it, so its own summary is never shown. */
.filter-details summary {
  display: none;
}

.filter-details:not([open]) {
  margin-top: -12px;
}


.filter-details[open] {
  margin-top: 8px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 12px;
  margin-bottom: 16px;
}

.task-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-group {
  min-width: 0;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
}

/* The title sits on the frame's top line, which its background interrupts. */
.task-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 40px;
  margin-top: -33px;
  margin-bottom: 8px;
  margin-inline-start: 8px;
  padding-inline: 8px;
  background: var(--md-surface);
}

.task-group-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.task-group-count {
  min-width: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

.task-group--urgent .task-group-title,
.task-group--partial .task-group-title {
  color: var(--md-error);
}

.task-group--urgent .task-group-count,
.task-group--partial .task-group-count {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.task-group-handle {
  width: 40px;
  height: 40px;
  cursor: grab;
  touch-action: none;
}

.task-group--dragging {
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  background: var(--md-surface-container);
}

.task-group--dragging .task-group-header {
  background: var(--md-surface-container);
}

.task-group--dragging .task-group-handle {
  cursor: grabbing;
}

.task-group .task-more {
  margin-top: 10px;
}

.task-more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  color: var(--md-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms var(--md-easing);
}

.task-more-button:hover {
  background: color-mix(in srgb, var(--md-primary) 18%, transparent);
}

.task-more-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.task-more-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.task-more-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.task-more-button[aria-busy="true"] svg {
  animation: task-more-wait 700ms var(--md-easing) infinite alternate;
}

@keyframes task-more-wait {
  to {
    transform: translateY(3px);
  }
}

.task-card--added {
  animation: task-card-arrive 200ms var(--md-easing);
}

@keyframes task-card-arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Choosing between the list and the columns. */
.view-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-on-surface) 7%, transparent);
}

.view-switch-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), color 150ms var(--md-easing);
}

.view-switch-button:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
}

.view-switch-button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}

.view-switch-button[aria-pressed="true"] {
  background: var(--md-primary);
  box-shadow: var(--md-elevation-1);
  color: var(--md-on-primary);
}

.view-switch-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* The same groups side by side. Each column scrolls by itself, so the row of columns
   and its scrollbar stay on screen however long a column gets. */
/* The columns take whatever the screen has left under the page's other content. */
.app-main:has(.page--board) {
  padding-bottom: 16px;
}

.page--board {
  height: calc(100dvh - 88px);
  min-height: min-content;
  max-width: none;
}

/* Windows of tasks shown later sit here without taking a row, or a gap, of the page. */
.task-windows {
  display: contents;
}

.task-groups--board {
  flex: 1 1 0;
  flex-direction: row;
  gap: 12px;
  min-height: 480px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.task-groups--board .task-groups {
  display: contents;
}

.task-groups--board .task-group {
  flex: none;
  display: flex;
  flex-direction: column;
  width: min(320px, 85vw);
  margin-top: 0;
  padding: 8px;
  background: var(--md-surface-container);
}

.task-groups--board .task-group-header {
  flex: none;
  margin: 0 0 4px;
  padding: 0 4px 0 0;
  background: transparent;
}

/* Only each task's section tag and title; the window still holds everything else. */
.task-groups--compact .task-cards {
  gap: 6px;
}

.task-groups--compact .task-tick-form,
.task-groups--compact .task-final,
.task-groups--compact .task-description,
.task-groups--compact .task-card-bottom {
  display: none;
}

.task-groups--compact .task-card {
  border-radius: 14px;
}

.task-groups--compact .task-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}

.task-groups--compact .task-card-top {
  flex: none;
  min-height: 0;
  margin-bottom: 0;
}

.task-groups--compact .task-title {
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
}

/* Rows keep their full height: a long column scrolls instead of squeezing its cards. */
.task-groups--board .task-cards {
  flex: 1;
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
}

.task-groups--board .task-card {
  flex: none;
  background: var(--md-surface);
}

.task-groups--board .task-more {
  flex: none;
  margin-top: 8px;
}

/* After the column rules, because both set a card's background. */
.task-group--urgent {
  border-color: color-mix(in srgb, var(--md-error) 45%, var(--md-outline-variant));
}

.task-group--urgent .task-card {
  border-color: color-mix(in srgb, var(--md-error) 35%, var(--md-outline-variant));
  background: color-mix(in srgb, var(--md-error) 10%, var(--md-surface-container));
}

.task-cards {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.task-card {
  --tone: var(--md-primary);
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: var(--md-surface-container);
  scroll-margin-top: 16px;
  transition: transform 180ms var(--md-easing), box-shadow 180ms var(--md-easing),
    border-color 180ms var(--md-easing);
}

/* The coloured edge that tells sections apart at a glance. */
.task-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 4px;
  background: var(--tone);
}

.task-card:hover {
  transform: translateY(-3px);
  border-color: var(--tone);
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.task-card:active {
  transform: translateY(-1px);
}

.task-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 14px 14px 20px;
  border: 0;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  text-align: right;
  cursor: pointer;
}

.task-card-body:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: -3px;
  border-radius: 20px;
}

.task-card--done .task-title,
.task-card--deleted .task-title {
  color: var(--md-on-surface-variant);
  text-decoration: line-through;
}

/* The tick: empty when not done, an hourglass while waiting, a check when done. */
.task-tick-form {
  flex: none;
  display: grid;
  place-items: center;
  padding-right: 18px;
}

.task-tick {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--md-outline);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: border-color 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.task-tick svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

button.task-tick:hover {
  border-color: var(--md-success);
  background: color-mix(in srgb, var(--md-success) 14%, transparent);
}

button.task-tick:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.task-tick--awaiting {
  border-color: var(--md-star);
  background: color-mix(in srgb, var(--md-star) 16%, transparent);
  color: var(--md-star);
}

.task-tick--partial {
  border-color: var(--md-tone-3);
  background: color-mix(in srgb, var(--md-tone-3) 16%, transparent);
  color: var(--md-tone-3);
}

.task-tick--warehouse {
  border-color: var(--md-tone-4);
  background: color-mix(in srgb, var(--md-tone-4) 16%, transparent);
  color: var(--md-tone-4);
}

.task-tick--done {
  border-color: var(--md-success);
  background: var(--md-success);
  color: var(--md-surface);
}

button.task-tick--done:hover {
  background: var(--md-success);
}

.task-tick--locked {
  border-style: dashed;
  cursor: default;
}

.task-tick--done.task-tick--locked,
.task-tick--partial.task-tick--locked,
.task-tick--warehouse.task-tick--locked,
.task-tick--awaiting.task-tick--locked {
  border-style: solid;
  opacity: 0.7;
}

.task-status {
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.task-status--pending {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface-variant);
}

.task-status--awaiting {
  background: color-mix(in srgb, var(--md-star) 16%, transparent);
  color: var(--md-star);
}

.task-status--partial {
  background: color-mix(in srgb, var(--md-tone-3) 16%, transparent);
  color: var(--md-tone-3);
}

.task-status--warehouse {
  background: color-mix(in srgb, var(--md-tone-4) 16%, transparent);
  color: var(--md-tone-4);
}

.task-status--done {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
  color: var(--md-success);
}

.task-status--deleted {
  background: color-mix(in srgb, var(--md-error) 16%, transparent);
  color: var(--md-error);
}

.tone-0 {
  --tone: var(--md-tone-0);
}

.tone-1 {
  --tone: var(--md-tone-1);
}

.tone-2 {
  --tone: var(--md-tone-2);
}

.tone-3 {
  --tone: var(--md-tone-3);
}

.tone-4 {
  --tone: var(--md-tone-4);
}

.task-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 4px;
}

.task-section {
  padding: 2px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.task-final {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 20px;
}

.task-final svg {
  width: 16px;
  height: 16px;
  fill: var(--md-star);
}

.task-title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-description {
  overflow: hidden;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--md-outline-variant);
}

.task-due {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 20px;
}

.task-due svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.task-due--overdue {
  color: var(--md-error);
}

.task-people {
  display: flex;
  direction: ltr;
}

.task-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border: 2px solid var(--md-surface-container);
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 12px;
  font-weight: 500;
}

.task-avatar:first-child {
  margin-left: 0;
}

.task-avatar--more {
  background: var(--md-outline-variant);
  color: var(--md-on-surface);
  font-size: 11px;
}

/* One line per task when there is room; narrow screens keep the stacked card. */
@container (min-width: 640px) {
  .task-card-body {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    grid-template-areas:
      "top title bottom"
      "top description bottom";
    align-items: center;
    gap: 0 20px;
    padding: 12px 14px 12px 20px;
  }

  .task-card:hover {
    transform: translateY(-2px);
  }

  .task-card-top {
    grid-area: top;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .task-title {
    grid-area: title;
  }

  .task-description {
    grid-area: description;
  }

  .task-card-bottom {
    grid-area: bottom;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .task-due {
    min-width: 110px;
  }

  .task-people {
    justify-content: flex-end;
    min-width: 84px;
  }
}

/* Task window */
.dialog.dialog--task {
  --tone: var(--md-primary);
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow-y: auto;
}

.dialog--task[open] {
  animation: task-sheet-in 220ms var(--md-easing);
}

.dialog--task[open]::backdrop {
  animation: task-backdrop-in 220ms ease-out;
}

@keyframes task-sheet-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes task-backdrop-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog--task[open],
  .dialog--task[open]::backdrop {
    animation: none;
  }
}

.task-sheet-header {
  padding: 16px 24px 20px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tone) 20%, transparent),
    transparent
  );
}

.task-sheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 8px;
}

.task-sheet-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.task-sheet-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: -8px;
}

.task-sheet-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  color: var(--tone);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms var(--md-easing);
}

.task-sheet-edit svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.task-sheet-edit:hover {
  background: color-mix(in srgb, var(--tone) 28%, transparent);
}

.task-sheet-edit:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.task-sheet-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  overflow-wrap: anywhere;
}

.task-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 20px;
}

/* Editing in the window: the form takes the body's place under the same header. */
.dialog--editing .task-sheet-body,
.dialog--editing [data-task-edit] {
  display: none;
}

.task-sheet-edit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.task-sheet-saved {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 6px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-success) 18%, transparent);
  color: var(--md-on-surface);
  font-size: 13px;
  font-weight: 500;
  animation: task-saved 2600ms var(--md-easing) forwards;
}

@keyframes task-saved {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  10%,
  80% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

.task-editor {
  padding: 4px 24px 0;
  animation: task-editor-in 220ms var(--md-easing);
}

@keyframes task-editor-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-editor,
  .task-sheet-saved {
    animation: none;
  }
}

.task-editor-form,
.task-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-editor-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}

.task-editor-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  color: var(--tone);
}

.task-editor-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.task-editor-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.task-editor-hint {
  display: block;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

/* Save stays in reach however long the form gets. */
.task-editor-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px -24px 0;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
}

.task-editor-delete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: auto;
}

.task-editor-delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.task-editor-delete-confirm[hidden],
.task-editor-delete [hidden] {
  display: none;
}

.task-editor-bar [aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.task-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 24px 24px;
}

.task-sheet-label {
  display: block;
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.task-sheet-decisions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.task-tick-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* As tall as the buttons beside it, so the whole row lines up. */
.task-tick-decision .text-field {
  flex: none;
  width: 150px;
}

.task-tick-decision .text-field input {
  height: 40px;
  padding: 0 12px;
}

.task-tick-decision .text-field label {
  top: 8px;
  right: 8px;
  font-size: 14px;
}

.task-tick-decision .text-field input:focus + label,
.task-tick-decision .text-field input:not(:placeholder-shown) + label {
  transform: translateY(-16px);
  font-size: 12px;
  line-height: 16px;
}

.task-production-form {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 12px;
}

.task-production-form[hidden],
.task-batch-actions[hidden],
.task-batch-due[hidden],
.task-batch-defect-form[hidden] {
  display: none;
}

/* A row of its own below the buttons. */
.task-batch-defect-form {
  order: 2;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
}

.task-batch-defect {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-error) 8%, transparent);
}

.task-batch-actions .task-tick-decision .text-field {
  width: 80px;
}

/* Room above each row for the floating labels of the warehouse's fields. */
.task-tick-decision.task-batch-receipt {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 16px 8px;
  width: 100%;
  margin-top: 8px;
}

.task-batch-actions .task-batch-receipt .text-field--select {
  width: auto;
}

.task-batch-receipt .text-field--select:nth-of-type(3),
.task-batch-receipt .filled-button {
  grid-column: 1 / -1;
}

.task-batch-receipt .filled-button {
  justify-self: end;
}

.task-batch-receipt .person-select-arrow {
  top: 18px;
}

/* First in the row, so on this right-to-left page it opens to the right of the count. */
.task-batch-due {
  order: -1;
  flex: none;
}

.task-batch-actions .task-tick-decision.task-batch-due .text-field {
  width: 140px;
}

.task-production-form .task-tick-decision {
  justify-content: flex-end;
}

.task-production-form .task-tick-decision .text-field {
  width: 110px;
}

/* Pushed to the end of the row, which is the left on this right-to-left page. */
.task-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-photo-thumbs:empty {
  display: none;
}

.task-photo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-photo-row:not(:has(.task-photo-thumb:not([hidden]))) {
  display: none;
}

.task-photo-thumb[hidden] {
  display: none;
}

.task-photo-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--md-surface-container);
  cursor: pointer;
}

.task-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Shown on every thumbnail, because a click anywhere on it removes the photo. */
.task-photo-thumb::after {
  content: "×";
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--md-error);
  color: var(--md-on-primary);
  font-size: 13px;
  line-height: 1;
}

.task-photo-thumb:hover img {
  opacity: 0.8;
}

.task-photo-thumb:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.task-batches {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}

.task-batches-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-batches-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.task-batch--new,
.task-batch--waiting {
  box-shadow: 0 0 0 2px var(--md-primary);
}

.task-batch-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A Material divider with its title: the line runs on from the title and count. */
.task-batch-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-batch-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-outline-variant);
}

.task-batch-group-header .task-status {
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
}

.task-batch-group-count {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.task-batch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--md-surface);
}

.task-batch-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

/* Stretched by the row, so it always matches the height of the cells beside it. */
.task-batch-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  font-size: 22px;
  font-weight: 600;
}

.task-batch-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Flex, so the cells fill the row with or without the photo cell. */
.task-batch .task-quantity-cells {
  display: flex;
  flex-wrap: wrap;
}

.task-batch .task-quantity-cell {
  flex: 1 1 92px;
  justify-content: center;
}

.task-quantity-cell--photos {
  overflow: hidden;
}

.task-quantity-cell--photos .task-report-photos {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 44px;
}

.task-quantity-cell--photos [data-photo-view] {
  position: relative;
  flex: none;
}

.task-quantity-cell--photos [data-photo-view] + [data-photo-view] {
  margin-inline-start: -22px;
}

/* Hidden, not left out: the viewer still walks through every photo of the batch. */
.task-quantity-cell--photos [data-photo-view]:nth-of-type(n + 3) {
  display: none;
}

.task-quantity-cell--photos [data-photo-view]:hover,
.task-quantity-cell--photos [data-photo-view]:focus-visible {
  z-index: 1;
}

/* Comes first in the row, on the right, and half of it sits over the first photo. */
.task-photo-more {
  position: relative;
  z-index: 2;
  order: -1;
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-inline-end: -12px;
  padding: 0;
  border: 2px solid var(--md-surface);
  border-radius: 50%;
  background: var(--tone);
  color: var(--md-surface);
  cursor: pointer;
}

.task-photo-more svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.task-photo-more:hover {
  transform: scale(1.1);
}

.task-photo-more:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.task-quantity-cell--photos .task-report-image {
  width: 44px;
  height: 44px;
  border: 2px solid var(--md-surface);
  border-radius: 10px;
}

.task-batch-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.task-batch-date {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.task-batch-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.task-report-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-photo-button {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}

.task-photo-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.task-photo-button--filled,
.task-photo-button--filled:hover {
  border-color: var(--md-primary);
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.task-reject-toggle,
.outlined-button--danger {
  border-color: var(--md-error);
  color: var(--md-error);
  cursor: pointer;
}

/* Fills its own row, so the buttons above it stay where they are. */
.task-reject-form {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--md-error) 45%, transparent);
  border-radius: 16px;
}

.task-reject-form[hidden] {
  display: none;
}

/* The form replaces the row of decisions while it is open. */
.task-sheet-decisions--rejecting > :not(.task-reject-form) {
  display: none;
}

.task-reject-form .form-actions {
  align-items: center;
  justify-content: flex-end;
}

.task-reports {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

.task-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-on-surface) 5%, transparent);
}

.task-report-text {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.task-report-quote {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-inline-start: 3px solid var(--tone);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tone) 10%, transparent);
}

.task-report-quote[hidden] {
  display: none;
}

.task-report-quote--draft .icon-button {
  flex: none;
  width: 36px;
  height: 36px;
}

.task-report-quote-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
}

.task-report-quote-author {
  color: var(--tone);
  font-weight: 500;
}

.task-report-quote-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-report-reply {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tone);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.task-report-reply svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.task-report-reply:hover {
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}

.task-report-reply:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.task-report-image {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}

[data-photo-view] {
  border-radius: 10px;
  cursor: zoom-in;
}

[data-photo-view]:hover .task-report-image {
  opacity: 0.85;
}

[data-photo-view]:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.photo-viewer {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.photo-viewer::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.photo-viewer [data-photo-image] {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 136px);
  min-width: 240px;
  min-height: 160px;
  object-fit: contain;
  border-radius: 12px;
}

.photo-viewer-step {
  position: absolute;
  top: calc(50% - 48px);
  background: color-mix(in srgb, var(--md-surface) 80%, transparent);
}

.photo-viewer-step[hidden] {
  display: none;
}

.photo-viewer-step:hover {
  background: var(--md-surface);
}

.photo-viewer-step--previous {
  right: 8px;
}

.photo-viewer-step--next {
  left: 8px;
}

.photo-viewer-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.photo-viewer-footer[hidden] {
  display: none;
}

.photo-viewer-count {
  color: #fff;
  font-size: 13px;
}

.photo-viewer-strip {
  display: flex;
  gap: 6px;
  max-width: calc(100vw - 32px);
  padding: 2px;
  overflow-x: auto;
}

.photo-viewer-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: none;
  opacity: 0.55;
  cursor: pointer;
}

.photo-viewer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-viewer-thumb:hover,
.photo-viewer-thumb--current {
  opacity: 1;
}

.photo-viewer-thumb--current {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.photo-viewer-close {
  position: absolute;
  top: 8px;
  left: 8px;
  background: color-mix(in srgb, var(--md-surface) 80%, transparent);
}

.photo-viewer-close:hover {
  background: var(--md-surface);
}

.task-report-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  color: var(--tone);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.task-report-file svg,
.task-report-attach svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.task-report-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.task-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.task-report-box {
  position: relative;
}

/* Fixed size, because a resize handle would sit under the attach button. */
.task-report-box textarea {
  padding-bottom: 48px;
  resize: none;
}

.task-report-attach {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.task-report-mention {
  bottom: 52px;
  padding: 0;
  border: 0;
}

.task-report-attach:hover {
  background: color-mix(in srgb, var(--tone) 26%, transparent);
  transform: scale(1.08);
}

.task-report-attach:focus-within {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.task-report-attach--filled,
.task-report-attach--filled:hover {
  background: var(--tone);
  color: var(--md-surface);
}

/* Hidden by opacity, not display, so the browser can still point its bubble at it. */
.task-report-input {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.task-report-file-name {
  flex: 1;
  min-width: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.task-report-actions .filled-button {
  margin-inline-start: auto;
}

.task-sheet-note {
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-on-surface) 5%, transparent);
}

.task-sheet-text {
  max-height: 180px;
  margin: 6px 0 0;
  overflow-y: auto;
  font-size: 14px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.task-sheet-text--empty {
  color: var(--md-on-surface-variant);
}

.task-sheet-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.task-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
}

.task-tile-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
}

.task-tile-icon,
.task-avatar,
.task-person-avatar {
  overflow: hidden;
}

.task-tile-icon img,
.task-avatar img,
.task-person-avatar img,
.person-avatar img,
.photo-field-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

.chip .person-avatar {
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  font-size: 10px;
}

.task-sheet-meta {
  align-items: center;
}

.task-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.task-report-mentions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.task-report-mentions svg {
  width: 18px;
  height: 18px;
  fill: var(--md-on-surface-variant);
}

.task-report-mentions .person-avatar {
  width: 28px;
  height: 28px;
}

.photo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}

.photo-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.photo-field input {
  min-width: 0;
  color: var(--md-on-surface);
  font: inherit;
}

.photo-field-preview {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
}

.task-tile-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.task-tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.task-tile-value {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-tile--overdue {
  border-color: var(--md-error);
}

.task-tile--overdue .task-tile-icon {
  background: color-mix(in srgb, var(--md-error) 16%, transparent);
  color: var(--md-error);
}

.task-tile--overdue .task-tile-value {
  color: var(--md-error);
}

/* The counts lead the window across both columns; the deadline then closes the group. */
.task-tile--quantity {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  grid-column: 1 / -1;
  order: -1;
  padding: 8px;
}

.task-quantity-cell--detail .task-tile-value {
  overflow-wrap: anywhere;
}

.task-quantity-unit {
  font-size: 10px;
}

.task-sheet-tiles:has(.task-tile--quantity) .task-tile--due {
  grid-column: 1 / -1;
}

.task-quantity-cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  min-width: 0;
}

.task-quantity-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--md-on-surface) 5%, transparent);
}

.task-quantity-cell--target {
  background: color-mix(in srgb, var(--tone) 16%, transparent);
}

.task-quantity-cell.task-quantity-cell--missed,
.task-quantity-cell.task-quantity-cell--short {
  background: color-mix(in srgb, var(--md-error) 12%, transparent);
}

.task-quantity-cell.task-quantity-cell--reached {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
}

.task-quantity-cell--short .task-sheet-label,
.task-quantity-cell--short .task-tile-value {
  color: var(--md-error);
}

.task-quantity-cell--reached .task-sheet-label,
.task-quantity-cell--reached .task-tile-value {
  color: var(--md-success);
}

/* An empty count keeps its row, so the four labels stay level. */
.task-quantity-cell .task-tile-value {
  min-height: 1lh;
  font-size: 22px;
  font-weight: 600;
}

.task-quantity-cell .task-sheet-label {
  white-space: nowrap;
}

.task-quantity-cell--missed .task-sheet-label,
/* A name, not a count, so it takes a whole row and needs less weight. */
.task-batch .task-quantity-cell--place {
  flex-basis: 100%;
}

.task-quantity-cell--place .task-tile-value {
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
}

.task-quantity-cell--missed .task-tile-value {
  color: var(--md-error);
  text-decoration: line-through;
}

.task-people-stack {
  display: flex;
  flex: none;
  align-items: center;
}

.task-people-photo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--md-surface);
  border-radius: 50%;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms var(--md-easing);
}

/* Not an inline margin: the plus is left to right, so it would pull the other way. */
.task-people-photo + .task-people-photo {
  margin-right: -10px;
}

.task-people-photo:hover,
.task-people-photo:focus-visible {
  z-index: 1;
  transform: translateY(-2px);
}

.task-people-photo:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}

.task-people-photo .task-person-avatar {
  width: 100%;
  height: 100%;
}

.task-people-photo--more {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.task-people-dialog {
  max-height: min(520px, calc(100dvh - 48px));
  padding: 16px 20px 20px;
}

.task-people-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-people-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-people-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.task-people-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.task-people-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}

.task-people-row:hover {
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
}

.task-person-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  color: var(--tone);
  font-size: 12px;
  font-weight: 600;
}

/* Latin values use dir="auto" but must still line up with the Persian column. */
.data-table td[dir="auto"] {
  text-align: right;
}

.task-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 16px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 20px;
  color: var(--md-on-surface-variant);
  text-align: center;
}

.task-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Dialog */
.dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: 28px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.dialog::backdrop {
  background: rgb(0 0 0 / 62%);
}

.dialog--form {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text-field--select select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  outline: none;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 16px;
}

.text-field--select select:hover {
  border-color: var(--md-on-surface);
}

.text-field--select select:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.text-field--select label {
  transform: translateY(-24px);
  font-size: 12px;
  line-height: 16px;
}

.text-field--error select,
.text-field--error select:hover,
.text-field--error select:focus {
  border-color: var(--md-error);
}

/* A list of people that narrows as you type. */
.text-field--select:has(.person-select-list) {
  position: relative;
}

.text-field--select:has(.person-select-list) input {
  padding-left: 32px;
}

.person-select-arrow {
  position: absolute;
  top: 26px;
  left: 12px;
  border-inline: 5px solid transparent;
  border-top: 5px solid var(--md-on-surface-variant);
  pointer-events: none;
}

.person-select-list {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 10;
  max-height: 280px;
  overflow-y: auto;
  margin: 4px 0 0;
  padding: 8px 0;
  border-radius: 4px;
  background: var(--md-surface-container);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  list-style: none;
}

.person-select-list[hidden],
.person-select-option[hidden],
.person-select-empty[hidden] {
  display: none;
}

.person-select-option,
.person-select-empty {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
}

.person-select-option {
  cursor: pointer;
}

.person-select-option:hover,
.person-select-option--active {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.person-select-empty {
  color: var(--md-on-surface-variant);
}

.section-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-fields[hidden] {
  display: none;
}

.task-number-fields {
  display: flex;
  gap: 12px;
}

.task-number-fields > * {
  flex: 1;
  min-width: 0;
}

/* A worked-out value reads as filled in, not as a field to type into. */
.task-number-fields input[readonly] {
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
  color: var(--md-on-surface-variant);
  cursor: default;
}

.assignee-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 8px 16px 12px;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
}

.assignee-picker legend {
  padding: 0 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.assignee-picker--error {
  border-color: var(--md-error);
}

.assignee-picker .supporting-text {
  margin: 0;
}

.assignee-search {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  outline: none;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
}

.assignee-search:placeholder-shown {
  direction: rtl;
}

.assignee-search:focus {
  border-color: var(--md-primary);
}

.assignee-list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}

.assignee-list .checkbox {
  flex: none;
}

.assignee-list .checkbox[hidden] {
  display: none;
}

.assignee-empty {
  margin: 0;
  padding: 8px 0;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}

.chip--removable {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Solar Hijri date picker: placed by JS so the dialog never changes size. */
.date-picker {
  position: fixed;
  z-index: 10;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface-container);
  box-shadow: var(--md-elevation-1);
}

.date-picker[hidden] {
  display: none;
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.date-picker-title {
  font-size: 14px;
  font-weight: 500;
}

.date-picker-nav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.date-picker-nav:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  justify-items: center;
}

.date-picker-weekday {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 32px;
}

.date-picker-day {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.date-picker-day:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.date-picker-day:disabled {
  color: var(--md-outline);
  opacity: 0.5;
  cursor: default;
}

.date-picker-day--today {
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.date-picker-day--selected,
.date-picker-day--selected:hover:not(:disabled) {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

/* Short laptop screens: the popup must fit above or below its field. */
@media (max-height: 700px) {
  .date-picker {
    padding: 8px;
  }

  .date-picker-header {
    margin-bottom: 0;
  }

  .date-picker-nav,
  .date-picker-day {
    width: 28px;
    height: 28px;
  }

  .date-picker-weekday {
    line-height: 24px;
  }
}

.dialog-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.dialog-text {
  margin: 0 0 24px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

/* App content */
.app-main {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 16px;
  margin-right: var(--drawer-width);
  transition: margin-right 250ms var(--md-easing);
}

html[data-drawer="closed"] .app-main {
  margin-right: 0;
}

/* The menu button sits in the open drawer, so the page needs no room above it for it. */
@media (min-width: 840px) {
  html[data-drawer="open"] .app-main {
    padding-top: 28px;
  }

  /* The board fills the screen under that smaller top: 28px above, 16px below. */
  html[data-drawer="open"] .page--board {
    height: calc(100dvh - 44px);
  }
}

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.welcome-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.welcome-date {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

@media (max-width: 839px) {
  .app-main,
  html[data-drawer="closed"] .app-main {
    margin-right: 0;
  }

  html[data-drawer="open"] .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgb(0 0 0 / 32%);
  }
}

.table-link {
  color: var(--md-primary);
  font-weight: 500;
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.table-note {
  display: block;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

/* A description can be long; it wraps instead of stretching the table. */
.data-table .cell-note {
  min-width: 140px;
  max-width: 260px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.confirm-reason {
  margin-bottom: 20px;
}

.report-filters {
  gap: 16px;
}

.report-filters .filter-grid {
  margin-bottom: 0;
}

.report-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  color: var(--md-on-surface);
  font-size: 13px;
  text-decoration: none;
}

.report-chip:hover {
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
}

.report-chip[aria-current] {
  border-color: var(--md-primary);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.report-chip b {
  font-weight: 600;
}

.chip--enough {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
  color: var(--md-on-surface);
}

.chip--low,
.chip--out,
.chip--negative {
  background: color-mix(in srgb, var(--md-star) 24%, transparent);
  color: var(--md-on-surface);
}

.chip--open {
  background: color-mix(in srgb, var(--md-star) 24%, transparent);
  color: var(--md-on-surface);
}

.chip--settled {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
  color: var(--md-on-surface);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pagination-text {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.return-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.return-log li {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--md-surface);
  font-size: 14px;
  line-height: 22px;
}

.return-note-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.return-note-form .text-field {
  flex: 1;
}

.return-settle-fields > [hidden] {
  display: none;
}

@media print {
  body > *:not(.app-main) {
    display: none !important;
  }

  body {
    display: block;
    background: #fff;
  }

  .app-main {
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-actions {
    display: none;
  }
}

/* Finance */
.invoice-adders {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.invoice-adders .text-field {
  flex: 1 1 320px;
}

.invoice-lines-head,
.invoice-line {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 110px 140px 120px 90px 150px 40px;
  align-items: start;
  gap: 8px;
  padding: 8px 12px;
}

.voucher-lines-head,
.voucher-line {
  display: grid;
  grid-template-columns: minmax(210px, 1.6fr) minmax(170px, 1.1fr) minmax(110px, 0.8fr) 130px 130px 40px;
  align-items: start;
  gap: 8px;
  padding: 8px 12px;
}

.invoice-lines-head,
.voucher-lines-head {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
}

.invoice-line,
.voucher-line {
  border-top: 1px solid var(--md-outline-variant);
}

.invoice-line[hidden],
.voucher-line[hidden],
.invoice-line [hidden] {
  display: none;
}

.invoice-line-what,
.invoice-line-cell,
.invoice-line-expense {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.invoice-line .order-line-item {
  padding-top: 6px;
}

.invoice-line-text {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
}

.invoice-line-text:focus {
  border-color: var(--md-primary);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.invoice-line-total {
  padding-top: 10px;
  font-weight: 500;
  text-align: end;
}

.voucher-line .text-field--select label {
  display: none;
}

.voucher-line-error {
  margin: 0;
  padding: 0 12px 8px;
}

.money-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.money-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.money-summary dt {
  color: var(--md-on-surface-variant);
}

.money-summary dd {
  margin: 0;
  font-weight: 500;
}

.money-summary-total {
  padding-top: 10px;
  border-top: 1px solid var(--md-outline-variant);
}

.money-summary-total dd {
  font-size: 18px;
}

.money-summary--wide {
  max-width: 420px;
  margin-inline-start: auto;
}

.voucher-balance {
  align-self: flex-start;
}

.account-row--1 td {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
  font-weight: 600;
}

.account-row--2 td {
  font-weight: 500;
}

.account-row--2 .account-name {
  padding-inline-start: 16px;
}

.account-row--3 .account-name {
  padding-inline-start: 36px;
}

.account-row .chip {
  margin-inline-start: 6px;
}

.data-table .cell-wrap {
  min-width: 200px;
  max-width: 360px;
  white-space: normal;
}

.chip--draft,
.chip--issued {
  background: color-mix(in srgb, var(--md-star) 24%, transparent);
  color: var(--md-on-surface);
}

.chip--posted,
.chip--cleared {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
  color: var(--md-on-surface);
}

.chip--cancelled,
.chip--voided {
  background: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
  color: var(--md-on-surface-variant);
}

/* A number field's name, needed only once the column heads are hidden. */
.line-cell-label {
  display: none;
  flex: none;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
}

/* Invoice and voucher lines hold more columns, so they turn into cards sooner. */
@container order-lines (max-width: 760px) {
  .line-cell-label {
    display: inline;
  }

  .invoice-line-total::before {
    content: "مبلغ: ";
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 400;
  }

  .invoice-lines-head,
  .voucher-lines-head {
    display: none;
  }

  .invoice-line,
  .voucher-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-line-what,
  .voucher-line > .text-field--select {
    grid-column: 1 / -1;
  }
}

.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  border: 1px dashed var(--md-outline);
  border-radius: 16px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.file-drop:hover,
.file-drop--over {
  border-color: var(--md-primary);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.file-drop svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.file-drop-names {
  font-size: 13px;
  font-weight: 500;
}

.invoice-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.invoice-file {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
}

.invoice-file a {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  background: var(--md-surface);
}

.invoice-file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invoice-file-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
  color: var(--md-primary);
  font-weight: 600;
}

.invoice-file-icon svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.invoice-file figcaption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-file .icon-button {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--md-surface);
}

/* Parts made in stages: a timeline of the chain, and the builder of a new part. */
.chip.chip--stage {
  background: color-mix(in srgb, var(--md-primary) 16%, transparent);
  color: var(--md-on-surface);
  white-space: normal;
}

.stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  font-size: 11px;
  font-weight: 500;
}

.stage-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-step {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 12px;
}

/* The line joining one stage to the next, drawn under the numbers. */
.stage-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  inset-inline-start: 17px;
  width: 2px;
  border-radius: 1px;
  background: var(--md-outline-variant);
}

.stage-step-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 14px;
  font-weight: 600;
}

.stage-step--current .stage-step-number {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.stage-step-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  color: var(--md-on-surface);
  text-decoration: none;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.stage-step-card:hover {
  background: color-mix(in srgb, var(--md-on-surface) 5%, transparent);
}

.stage-step--current .stage-step-card {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

.stage-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stage-step-title {
  font-size: 15px;
  font-weight: 600;
}

.stage-step-sku {
  padding: 2px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
}

.stage-step-name {
  overflow: hidden;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-step-stock {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.stage-step-stock b {
  color: var(--md-on-surface);
}

/* How a new part is made: one of the build cards, then the builder that goes with it. */
.build-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.build-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
  animation: build-panel-in 180ms var(--md-easing);
}

.build-panel[hidden] {
  display: none;
}

.build-panel .form-hint {
  margin: 0;
}

@keyframes build-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.component-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: 12px;
  animation: stage-row-in 180ms var(--md-easing);
}

.component-row-qty {
  position: relative;
}

.component-row-qty input {
  /* The field reads left to right, so its unit sits on the left. */
  padding-left: 64px;
}

/* The unit of the picked part, written inside the amount field. */
.component-row-unit {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .component-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .component-row-qty {
    grid-column: 2;
  }
}
.stage-builder-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-builder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: stage-row-in 180ms var(--md-easing);
}

.stage-builder-row {
  align-items: flex-start;
}

.stage-builder-row > .stage-step-number,
.stage-builder-row > .icon-button {
  margin-top: 44px;
}

.stage-builder-fields {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.stage-builder-row [hidden] {
  display: none;
}

/* New stage or a part already in the warehouse, chosen per row. */
.stage-source-switch {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-on-surface) 7%, transparent);
}

.stage-source-switch button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), color 150ms var(--md-easing);
}

.stage-source-switch button[aria-pressed="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.stage-source-switch button:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}

/* The last row is the part being made: it has no switch, so its number sits level. */
.stage-builder-row:has([data-stage-switch][hidden]) > .stage-step-number,
.stage-builder-row:has([data-stage-switch][hidden]) > .icon-button {
  margin-top: 10px;
}

@keyframes stage-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.stage-builder-add {
  align-self: flex-start;
  gap: 6px;
}

.stage-builder-add svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}


@media (prefers-reduced-motion: reduce) {
  .stage-builder-row {
    animation: none;
  }
}
/* Item page: a header card, tabs, and the parts a part is made of. */
.item-page {
  max-width: 1240px;
}

.item-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 20px 24px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-primary) 16%, transparent), transparent 70%),
    var(--md-surface-container);
}

.item-hero-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.item-hero-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.item-hero-text {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.item-hero .page-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.item-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.item-tag--code {
  font-variant-numeric: tabular-nums;
}

.item-tag--accent {
  background: color-mix(in srgb, var(--md-primary) 18%, transparent);
  color: var(--md-primary);
}

.item-tag--muted {
  color: var(--md-on-surface-variant);
}

.item-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-surface) 60%, transparent);
}

.item-hero-stat-label {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.item-hero-stat-value {
  font-size: 13px;
}

.item-hero-stat-value b {
  font-size: 22px;
  font-weight: 600;
}

/* Tabs that are buttons, styled as the site's page tabs. */
.item-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.item-tabs .settings-tab {
  flex: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.item-tabs .settings-tab[aria-selected="true"] {
  background: var(--md-primary);
  box-shadow: var(--md-elevation-1);
  color: var(--md-on-primary);
}

.item-tabs .settings-tab:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.item-panel {
  animation: item-panel-in 180ms var(--md-easing);
}

.item-panel[hidden] {
  display: none;
}

@keyframes item-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.item-direct-purchase {
  align-self: center;
}

/* Structure tab: the components on one side, stages and uses on the other. */
.structure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: start;
  gap: 16px;
}

.structure-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.structure-card {
  gap: 16px;
  min-width: 0;
}

.structure-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.structure-card-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}

.structure-card-text {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 22px;
}

.structure-empty {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.structure-more {
  border-top: 1px solid var(--md-outline-variant);
}

.structure-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 4px;
  color: var(--md-primary);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.structure-more summary::-webkit-details-marker {
  display: none;
}

.structure-more summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms var(--md-easing);
}

.structure-more[open] summary::after {
  transform: rotate(135deg);
}

.structure-more-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 8px;
}

.structure-more-body .filled-button {
  align-self: flex-start;
}

.component-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
}

.component-add .form-error {
  grid-column: 1 / -1;
  margin: 0;
}

.component-add-button {
  gap: 6px;
  height: 56px;
}

.component-add-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* The structure tree. */
.bom-tree-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.bom-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bom-tree-tools .text-button:first-of-type {
  margin-inline-start: auto;
}

.text-button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--md-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.text-button:hover {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

.bom-tree,
.bom-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bom-children {
  position: relative;
  margin-top: 6px;
  padding-inline-start: 28px;
}

/* The line that ties children to their part. */
.bom-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 18px;
  inset-inline-start: 13px;
  width: 2px;
  border-radius: 1px;
  background: var(--md-outline-variant);
}

.bom-children[hidden] {
  display: none;
}

.bom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  transition: border-color 150ms var(--md-easing);
}

.bom-row:hover {
  border-color: var(--md-outline);
}

.bom-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.bom-toggle:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.bom-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 150ms var(--md-easing);
}

.bom-toggle[aria-expanded="false"] svg {
  transform: rotate(90deg);
}

.bom-toggle--leaf {
  cursor: default;
}

.bom-kind {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.bom-kind--component {
  background: var(--md-primary);
}

.bom-kind--stage {
  border-radius: 50%;
  background: var(--md-tone-0);
}

.bom-item {
  display: flex;
  flex: 1 1 180px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--md-on-surface);
  text-decoration: none;
}

.bom-item:hover .bom-name {
  color: var(--md-primary);
}

.bom-sku {
  flex: none;
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
}

.bom-name {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bom-note {
  flex: none;
  padding: 1px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-tone-0) 16%, transparent);
  font-size: 11px;
}

.bom-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.bom-qty,
.bom-stock {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
}

.bom-qty b,
.bom-stock b {
  color: var(--md-on-surface);
}

.bom-stock {
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-success) 12%, transparent);
}

.bom-stock--empty {
  background: color-mix(in srgb, var(--md-star) 20%, transparent);
}

.bom-amount {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bom-times,
.bom-unit {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.bom-amount-input {
  width: 64px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.bom-amount-input:focus {
  border-color: var(--md-primary);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.bom-amount .icon-button {
  width: 32px;
  height: 32px;
}

.bom-save {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.bom-save[hidden] {
  display: none;
}

.used-in-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.used-in-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  color: var(--md-on-surface);
  font-size: 13px;
  text-decoration: none;
}

.used-in-link:hover {
  border-color: var(--md-primary);
}

.used-in-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.used-in-qty {
  color: var(--md-on-surface-variant);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 20px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-align: center;
}

.empty-state svg {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  fill: color-mix(in srgb, var(--md-primary) 60%, transparent);
}

.empty-state b {
  color: var(--md-on-surface);
  font-size: 15px;
}

/* Needs tab. */
.needs-card {
  gap: 20px;
}

.needs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.needs-form-text {
  flex: 1 1 320px;
}

.needs-form-row {
  display: flex;
  flex: 0 1 380px;
  align-items: flex-start;
  gap: 12px;
}

.needs-form-row .text-field {
  flex: 1;
}

.needs-form-row .filled-button {
  height: 56px;
}

.needs-form-row .filled-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

.needs-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.needs-result:empty {
  display: none;
}

.needs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.needs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
}

.needs-stat span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.needs-stat b {
  font-size: 24px;
  font-weight: 600;
}

.needs-stat--enough {
  background: color-mix(in srgb, var(--md-success) 12%, transparent);
}

.needs-stat--make {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

.needs-stat--buy {
  background: color-mix(in srgb, var(--md-star) 18%, transparent);
}

.chip--make {
  background: color-mix(in srgb, var(--md-primary) 16%, transparent);
  color: var(--md-on-surface);
}

@media (max-width: 1000px) {
  .structure-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .component-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .needs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-hero-stat {
    flex: 1 1 100%;
  }

  /* Deep parts keep their width on a phone: a smaller step for each level. */
  .bom-children {
    padding-inline-start: 12px;
  }

  .bom-children::before {
    inset-inline-start: 4px;
  }

  .bom-row {
    padding: 6px 8px;
  }

  .bom-item {
    flex-basis: calc(100% - 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-panel {
    animation: none;
  }
}
/* A refused count, shown on the batch's own card above its form. */
.task-batch-error {
  flex-basis: 100%;
  margin: 0;
}
/* A card leaving the list once its task no longer belongs there. */
.task-card--leaving {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 200ms var(--md-easing), transform 200ms var(--md-easing);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .task-card--leaving {
    transition: none;
  }
}

/* Sales: summary cards, the invoice picker, settlement bars and the reports chart. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 20px;
  border-radius: 24px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  text-decoration: none;
  transition: box-shadow 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.kpi-card--accent {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-primary) 18%, transparent), transparent 75%),
    var(--md-surface-container);
}

.kpi-card--warn {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-star) 22%, transparent), transparent 75%),
    var(--md-surface-container);
}

.kpi-card--link:hover {
  box-shadow: var(--md-elevation-1);
}

.kpi-card--link:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.kpi-label {
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
}

.kpi-value {
  overflow: hidden;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir="ltr"].kpi-value {
  text-align: right;
}

.kpi-note {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.kpi-meter {
  width: 100%;
  height: 6px;
  margin: 4px 0 2px;
}

.kpi-meter-track,
.settle-track {
  fill: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
}

.kpi-meter-fill,
.share-fill {
  fill: var(--md-primary);
}

.kpi-card--warn .kpi-meter-fill {
  fill: var(--md-star);
}

.notice {
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface-container));
  color: var(--md-on-surface);
  font-size: 14px;
}

.notice--warn {
  background: color-mix(in srgb, var(--md-star) 20%, var(--md-surface-container));
}

.table-note--warn {
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-weight: 500;
}

.data-table-muted td {
  color: var(--md-on-surface-variant);
}

.button-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.settle,
.share {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 96px;
}

.settle-bar,
.share-bar {
  width: 100%;
  height: 6px;
}

.settle-fill--settled {
  fill: var(--md-success);
}

.settle-fill--partial,
.settle-fill--open {
  fill: var(--md-star);
}

/* The invoice editor: picker and summary side by side, the summary staying in view. */
.sale-page {
  max-width: 1400px;
}

.sale-page > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sale-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 16px;
}

.sale-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sale-summary {
  position: sticky;
  top: 16px;
}

.sale-step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

.sale-picker-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sale-picker-head .form-section-title,
.sale-head .form-section-title,
.sale-summary-card .form-section-title {
  margin: 0;
}

.sale-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sale-tabs {
  flex: none;
}

.sale-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 12px;
}

.sale-tab--picked::after {
  content: attr(data-picked) " انتخاب";
  padding: 0 8px;
  border-radius: 11px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
  line-height: 20px;
}

.sale-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
  color: var(--md-on-surface-variant);
}

.sale-search:focus-within {
  box-shadow: inset 0 0 0 2px var(--md-primary);
}

.sale-search svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.sale-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
}

.sale-search input::-webkit-search-cancel-button {
  display: none;
}

.sale-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.sale-filter svg {
  display: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.sale-filter[aria-pressed="true"] {
  border-color: transparent;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.sale-filter[aria-pressed="true"] svg {
  display: block;
}

.sale-panel {
  container: sale-panel / inline-size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 68vh;
  margin: 0 -8px;
  padding: 2px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sale-panel[hidden] {
  display: none;
}

.sale-no-match {
  margin: 0;
  padding: 24px;
  color: var(--md-on-surface-variant);
  text-align: center;
}

.sale-no-match[hidden] {
  display: none;
}

/* One row of goods that can go on the invoice. */
.pick {
  --pick-bg: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  background: var(--pick-bg);
  transition: border-color 150ms var(--md-easing), box-shadow 150ms var(--md-easing);
}

.pick[hidden] {
  display: none;
}

.pick:hover {
  border-color: var(--md-outline);
}

.pick--on {
  --pick-bg: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface));
  border-color: var(--md-primary);
  box-shadow: var(--md-elevation-1);
}

.pick--error {
  border-color: var(--md-star);
}

.pick--missing {
  border-style: dashed;
}

.pick-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
}

.pick-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pick-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--md-on-surface-variant);
  border-radius: 6px;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.pick-box svg {
  width: 16px;
  height: 16px;
  fill: var(--md-on-primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 150ms var(--md-easing), transform 150ms var(--md-easing);
}

.pick-check:checked + .pick-box {
  border-color: var(--md-primary);
  background: var(--md-primary);
}

.pick-check:checked + .pick-box svg {
  opacity: 1;
  transform: none;
}

.pick-check:focus-visible + .pick-box {
  outline: 2px solid var(--md-primary);
  outline-offset: 3px;
}

.pick-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pick-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.pick-meta-strong {
  color: var(--md-primary);
  font-weight: 500;
}

.pick-flag {
  align-self: flex-start;
  padding: 0 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-star) 22%, transparent);
  color: var(--md-on-surface);
  font-size: 11px;
  line-height: 20px;
}

.pick-stock {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  color: var(--md-on-surface-variant);
  font-size: 11px;
  text-align: center;
}

.pick-stock b {
  color: var(--md-on-surface);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.pick-sub {
  color: var(--md-on-surface-variant);
}

.pick-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(120px, auto);
  align-items: center;
  gap: 12px;
  padding: 4px 16px 16px;
  animation: item-panel-in 180ms var(--md-easing);
}

.pick-fields[hidden] {
  display: none;
}

.pick .text-field input {
  height: 48px;
  font-size: 15px;
}

.pick .text-field label {
  top: 12px;
  background: var(--pick-bg);
  font-size: 14px;
}

.pick .text-field input:focus + label,
.pick .text-field input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
}

.pick-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.pick-total b {
  color: var(--md-on-surface);
  font-size: 17px;
  font-weight: 600;
}

.pick-error,
.pick-live-problem,
.pick-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

.pick-live-problem {
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-weight: 500;
}

.pick-hint {
  color: var(--md-on-surface-variant);
}

@container sale-panel (max-width: 640px) {
  .pick-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pick-total {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }
}

@container sale-panel (max-width: 420px) {
  .pick-head {
    flex-wrap: wrap;
  }

  .pick-stock {
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
    width: 100%;
    padding-inline-start: 36px;
  }
}

/* The summary: who, what, how much. */
.sale-summary-card {
  gap: 16px;
}

.sale-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-surface) 70%, transparent);
}

.sale-customer[hidden],
.sale-customer-facts[hidden],
.sale-summary-empty[hidden],
.sale-words[hidden] {
  display: none;
}

.sale-customer-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.sale-customer-avatar svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.sale-customer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sale-customer-meta {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.sale-customer-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.sale-customer-facts div {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--md-surface) 70%, transparent);
}

.sale-customer-facts dt {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.sale-customer-facts dd {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  text-align: start;
}

.sale-summary-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 16px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-align: center;
}

.sale-lines {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.sale-line-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.sale-line-button:hover {
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
}

.sale-line-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-line-meta {
  grid-row: 2;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.sale-line-amount {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-size: 13px;
}

.sale-line--problem .sale-line-meta::after {
  content: " · نیاز به اصلاح";
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-weight: 500;
}

.sale-words {
  margin: -6px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 20px;
}

.sale-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale-summary-actions .filled-button,
.sale-summary-actions .outlined-button,
.sale-summary-actions .text-button {
  justify-content: center;
  width: 100%;
  text-align: center;
}

@media (max-width: 1240px) {
  .sale-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-summary {
    position: static;
  }

  .sale-panel {
    max-height: none;
  }
}

/* Invoice page. */
.sale-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.sale-detail-grid .money-summary--wide {
  max-width: none;
}

.sale-settlement .settle {
  width: 100%;
}

.text-field--compact input {
  height: 40px;
  min-width: 96px;
  font-size: 14px;
}

.text-field--compact label {
  top: 8px;
  font-size: 14px;
}

/* Reports chart, drawn with SVG attributes so it needs no inline styles. */
.sale-chart-scroll {
  overflow-x: auto;
}

.sale-chart-svg {
  display: block;
  min-width: 100%;
}

.sale-chart-axis {
  stroke: var(--md-outline-variant);
  stroke-width: 1;
}

.sale-chart-bar rect {
  fill: var(--md-primary);
  transition: opacity 150ms var(--md-easing);
}

.sale-chart-bar:hover rect {
  opacity: 0.75;
}

.sale-chart-label {
  fill: var(--md-on-surface-variant);
  font-family: inherit;
  font-size: 11px;
}

@media print {
  .kpi-grid,
  .settings-tabs,
  .report-filters,
  .item-hero .page-actions {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .sale-tabs {
    width: 100%;
  }

  .sale-tabs .settings-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
    font-size: 13px;
  }

  .sale-tab--picked::after {
    content: attr(data-picked);
    min-width: 20px;
    padding: 0 4px;
    text-align: center;
  }

  .sale-filter {
    flex: 1;
    justify-content: center;
  }
}

/* A batch card is sold whole: no fields, just a note that it is on the invoice. */
.pick-whole {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  color: var(--md-on-surface);
  font-size: 13px;
}

.pick-whole[hidden] {
  display: none;
}

.pick-whole svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--md-primary);
}

.pick-note {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.pick-fields--qty {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

.pick > .pick-error {
  margin: 0 16px 12px;
}

/* One invoice row per item, whatever cards and shelves its goods came from. */
.sale-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sale-row {
  --pick-bg: var(--md-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  background: var(--pick-bg);
}

.sale-row--error {
  border-color: var(--md-star);
}

.sale-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sale-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.sale-row-qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.sale-row-qty b {
  color: var(--md-on-surface);
  font-size: 20px;
  font-weight: 600;
}

.sale-row-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sale-source {
  padding: 0 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
  font-size: 12px;
  line-height: 24px;
}

.sale-source--card {
  background: color-mix(in srgb, var(--md-primary) 16%, transparent);
}

.sale-row-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(120px, auto);
  align-items: center;
  gap: 12px;
}

.sale-row .text-field input {
  height: 48px;
  font-size: 15px;
}

.sale-row .text-field label {
  top: 12px;
  background: var(--pick-bg);
  font-size: 14px;
}

.sale-row .text-field input:focus + label,
.sale-row .text-field input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
}

.sale-row .pick-hint,
.sale-row .pick-error,
.sale-row .pick-live-problem {
  margin: 0;
}

.sale-row [hidden] {
  display: none;
}

.sale-summary-empty[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .sale-row-fields,
  .pick-fields--qty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sale-row-fields .pick-total {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* The picker: picked rows stay on top, the searched stock pages in below them. */
.sale-picked,
.sale-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale-picked:empty {
  display: none;
}

.sale-picked:not(:empty) {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--md-outline-variant);
}

.sale-results[hidden],
.sale-more[hidden] {
  display: none;
}

.sale-more {
  align-self: center;
}

.sale-count {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

/* Work time per unit: shown on stages and the structure tree; missing ones stand out. */
.bom-time {
  padding: 0 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-on-surface);
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}

.bom-time--missing,
.stage-step-stock--missing {
  background: color-mix(in srgb, var(--md-star) 20%, transparent);
  color: var(--md-on-surface);
}

.stage-step-stock--missing {
  align-self: flex-start;
  padding: 0 8px;
  border-radius: 8px;
}

.item-minutes .form-hint {
  margin: 4px 0 0;
}

.stage-minutes[hidden] {
  display: none;
}

/* The add-component row wraps: in a narrow card the part keeps a usable width. */
.component-add {
  display: flex;
  flex-wrap: wrap;
}

.component-add-item {
  flex: 1 1 240px;
  min-width: 0;
}

.component-add-qty {
  flex: 1 1 130px;
  max-width: 200px;
}

.component-add-button {
  flex: none;
}

.component-add .form-error {
  flex-basis: 100%;
}

/* Build panels on the add page: a header with the panel's figure, then the steps. */
.build-flow {
  gap: 16px;
}

.build-flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.build-flow-head > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.build-flow-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.build-flow-text {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 22px;
}

.build-flow-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface));
  color: var(--md-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
}

.build-flow-total b {
  color: var(--md-primary);
  font-size: 22px;
  font-weight: 600;
}

.build-flow-minutes {
  flex: 0 1 240px;
}

/* The steps: numbered cards on one line that runs down through them. */
.stage-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}

.stage-card:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: -12px;
  inset-inline-start: 19px;
  width: 2px;
  background: color-mix(in srgb, var(--md-primary) 30%, transparent);
}

.stage-card-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 12px;
  border: 2px solid var(--md-primary);
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-primary);
  font-weight: 600;
}

.stage-card--final .stage-card-number {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.stage-card-body {
  --pick-bg: var(--md-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: var(--pick-bg);
  transition: border-color 150ms var(--md-easing), box-shadow 150ms var(--md-easing);
}

.stage-card-body:focus-within {
  border-color: var(--md-primary);
  box-shadow: var(--md-elevation-1);
}

.stage-card--final .stage-card-body {
  --pick-bg: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface));
  border-color: color-mix(in srgb, var(--md-primary) 45%, var(--md-outline-variant));
}

.stage-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 36px;
}

.stage-card-kicker {
  font-size: 14px;
  font-weight: 600;
}

.stage-card-final {
  padding: 0 10px;
  border-radius: 10px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 12px;
  line-height: 22px;
}

.stage-card-final[hidden],
.stage-card [hidden] {
  display: none;
}

.stage-card .stage-source-switch {
  margin-inline-start: auto;
}

.stage-card-remove:disabled {
  visibility: hidden;
}

.stage-card-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr);
  gap: 12px;
}

.stage-card--picked .stage-card-fields {
  grid-template-columns: minmax(0, 1fr);
}

.stage-card .text-field label {
  background: var(--pick-bg);
}

.stage-card-minutes {
  position: relative;
}



.stage-card-suffix {
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
}

.stage-card-preview {
  margin: -4px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.stage-flow-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 52px);
  margin-inline-start: 52px;
  padding: 14px;
  border: 1px dashed var(--md-outline);
  border-radius: 20px;
  background: transparent;
  color: var(--md-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), border-color 150ms var(--md-easing);
}

.stage-flow-add:hover:not(:disabled) {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
}

.stage-flow-add:disabled {
  color: var(--md-on-surface-variant);
  cursor: default;
  opacity: 0.6;
}

.stage-flow-add-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--md-secondary-container);
}

.stage-flow-add-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 600px) {
  .stage-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }

  .stage-card-number {
    width: 32px;
    height: 32px;
  }

  .stage-card:not(:last-child)::before {
    top: 44px;
    inset-inline-start: 15px;
  }

  .stage-card-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-card .stage-source-switch {
    width: 100%;
    margin-inline-start: 0;
  }

  .stage-flow-add {
    width: calc(100% - 40px);
    margin-inline-start: 40px;
  }
}

/* A disabled delete leaves no hole, and the source switch keeps its two words on a line. */
.stage-card-remove:disabled {
  display: none;
}

.stage-card .stage-source-switch button {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .stage-card .stage-source-switch {
    display: flex;
  }

  .stage-card .stage-source-switch button {
    flex: 1;
    padding: 0 8px;
    font-size: 12px;
  }
}

.stage-card .stage-source-switch[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .stage-card-remove {
    order: 2;
    margin-inline-start: auto;
  }

  .stage-card .stage-source-switch {
    order: 3;
  }
}

/* Import from Excel: the two templates, the guide, and the preview. */
.import-kinds {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.import-template {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface));
}

.import-template[hidden],
.import-page [data-import-module][hidden] {
  display: none;
}

.import-template-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.import-template-text span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 22px;
}

.import-template code,
.import-guide dt {
  padding: 0 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}

.import-guide {
  margin: 12px 0;
  font-size: 13px;
}

.import-guide summary {
  color: var(--md-primary);
  font-weight: 500;
  cursor: pointer;
}

.import-guide dl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}

.import-guide dl div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.import-guide dt {
  justify-self: start;
}

.import-guide dd {
  margin: 0;
  color: var(--md-on-surface-variant);
  text-align: left;
}

.file-drop--error {
  border-color: var(--md-star);
}

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-stat {
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.import-stat b {
  color: var(--md-on-surface);
  font-size: 16px;
}

.import-stat--new b,
.import-chip--new {
  color: var(--md-primary);
}

.import-stat--existing b {
  color: var(--md-success);
}

.import-stat--error {
  background: color-mix(in srgb, var(--md-star) 20%, var(--md-surface));
}

.import-chip--new {
  background: color-mix(in srgb, var(--md-primary) 14%, transparent);
}

.import-chip--existing {
  background: color-mix(in srgb, var(--md-success) 16%, transparent);
}

.import-chip--error {
  background: color-mix(in srgb, var(--md-star) 24%, transparent);
}

.import-row--error td {
  background: color-mix(in srgb, var(--md-star) 8%, transparent);
}

@media (max-width: 600px) {
  .import-guide dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* What a stage uses up: a fold-out list inside its card. */
.stage-materials {
  border-top: 1px dashed var(--md-outline-variant);
  padding-top: 10px;
}

.stage-materials summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.stage-materials summary::-webkit-details-marker {
  display: none;
}

.stage-materials summary svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.stage-materials-count:not(:empty) {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.stage-materials-hint {
  margin: 8px 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 20px;
}

.stage-materials-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.stage-material {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.stage-material-qty {
  position: relative;
}

.stage-material-qty input {
  padding-inline-start: 16px;
}

.stage-material-unit {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.stage-material-unit:empty {
  display: none;
}

.stage-material-unit:not(:empty) + input,
.stage-material-qty:has(.stage-material-unit:not(:empty)) input {
  padding-inline-start: 64px;
}

.stage-materials-add {
  align-self: flex-start;
}

@media (max-width: 600px) {
  .stage-material {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .stage-material-item {
    grid-column: 1 / -1;
  }
}

/* The unit sits on the left, away from the field's label on the right; the typed number
   starts after it. Physical sides on purpose: the number is left to right in any page. */
.stage-material-unit {
  inset-inline-start: auto;
  left: 14px;
}

.stage-material-qty input,
.stage-material-qty:has(.stage-material-unit:not(:empty)) input {
  padding-inline-start: 16px;
  padding-left: 16px;
}

.stage-material-qty:has(.stage-material-unit:not(:empty)) input {
  padding-left: 64px;
}

/* Production planning: orders, the board of periods and the workshop's capacity. */
.plan-urgent {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.plan-status--draft,
.plan-status--planned {
  background: color-mix(in srgb, var(--md-primary) 14%, transparent);
  color: var(--md-on-surface);
}

.plan-status--released {
  background: color-mix(in srgb, var(--md-star) 24%, transparent);
  color: var(--md-on-surface);
}

.plan-status--done {
  background: color-mix(in srgb, var(--md-success) 18%, transparent);
  color: var(--md-on-surface);
}

.plan-status--cancelled {
  background: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
  color: var(--md-on-surface-variant);
}

.item-tag--late {
  background: color-mix(in srgb, var(--md-star) 26%, transparent);
}

.plan-product {
  display: block;
  font-size: 13px;
}

.plan-stage {
  padding: 0 8px;
  border-radius: 8px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* The order form. */
.plan-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.plan-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(130px, 200px) auto;
  align-items: center;
  gap: 12px;
}

.plan-line-number {
  margin-top: 0;
}

.plan-line-qty {
  position: relative;
}

.plan-line-qty:has(.stage-material-unit:not(:empty)) input {
  padding-left: 64px;
}

.plan-lines-add {
  width: 100%;
  margin: 0;
}

.plan-urgent-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  cursor: pointer;
}

.plan-urgent-toggle:has(input:checked) {
  border-color: var(--md-error);
  background: color-mix(in srgb, var(--md-error) 6%, transparent);
}

.plan-urgent-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--md-error);
}

.plan-urgent-toggle-text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.plan-urgent-toggle-text span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

/* The order page. */
.plan-attention {
  border: 1px solid color-mix(in srgb, var(--md-star) 55%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-star) 14%, transparent), transparent 70%),
    var(--md-surface-container);
}

.plan-attention-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.plan-attention-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--md-star) 22%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
}

.plan-attention-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.plan-attention-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
}

.plan-attention-text {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  line-height: 22px;
}

.plan-times {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.plan-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 150px;
  align-items: center;
  gap: 6px 20px;
  padding: 12px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  transition: border-color 150ms var(--md-easing), box-shadow 150ms var(--md-easing);
}

.plan-time:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

.plan-time--error {
  border-color: var(--md-error);
}

.plan-time-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.plan-time-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-time-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-time-meta b {
  color: var(--md-on-surface);
}

.plan-time-field {
  display: flex;
  align-items: center;
  height: 52px;
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  background: var(--md-surface-container);
  cursor: text;
  overflow: hidden;
}

.plan-time-field:focus-within {
  border-color: var(--md-primary);
}

.plan-time-field input {
  width: 84px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.plan-time-field input::placeholder {
  color: var(--md-outline);
  font-weight: 400;
}

.plan-time-unit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: 0 12px;
  border-inline-start: 1px solid var(--md-outline-variant);
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.plan-time-unit small {
  font-size: 11px;
  font-weight: 400;
}

.plan-time-total {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  text-align: left;
}

.plan-time-total--ready {
  color: var(--md-primary);
  font-size: 15px;
  font-weight: 600;
}

.plan-time-total--bad,
.plan-time-error {
  color: var(--md-error);
}

.plan-time-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

.plan-times-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
}

.plan-times-note {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-times-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 600px) {
  .plan-time {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px;
  }

  .plan-time-part {
    grid-column: 1 / -1;
  }

  .plan-times-foot .filled-button {
    width: 100%;
    justify-content: center;
  }
}

.plan-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 16px;
}

.plan-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.plan-products li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--md-surface);
}

.plan-product-name {
  color: var(--md-on-surface);
  font-weight: 500;
  text-decoration: none;
}

.plan-product-qty b {
  font-size: 18px;
}

.plan-jobs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.plan-job {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--md-surface);
}

.plan-job--level-1 { margin-inline-start: 24px; }
.plan-job--level-2 { margin-inline-start: 48px; }
.plan-job--level-3 { margin-inline-start: 72px; }
.plan-job--level-4,
.plan-job--level-5,
.plan-job--level-6 { margin-inline-start: 96px; }

.plan-job-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--md-primary);
  border-radius: 50%;
}

.plan-job--released .plan-job-dot {
  background: var(--md-star);
  border-color: var(--md-star);
}

.plan-job--done .plan-job-dot {
  background: var(--md-success);
  border-color: var(--md-success);
}

.plan-job-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plan-job-title {
  font-weight: 500;
  text-align: start;
}

.plan-job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-job-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* The board. */
.plan-board-page {
  max-width: none;
}

.plan-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-filter-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.plan-filter-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.plan-board {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 60vh;
  padding: 4px 2px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.plan-column {
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--md-surface-container);
  scroll-snap-align: start;
  transition: border-color 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.plan-column--now {
  border-color: color-mix(in srgb, var(--md-primary) 40%, transparent);
}

.plan-column--waiting {
  background: color-mix(in srgb, var(--md-star) 10%, var(--md-surface-container));
}

.plan-column--beyond {
  opacity: 0.85;
}

.plan-board--dragging .plan-column[data-period] {
  border-style: dashed;
  border-color: var(--md-outline-variant);
}

.plan-column--over {
  border-style: solid !important;
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container));
}

.plan-column-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.plan-column-title {
  display: flex;
  flex-direction: column;
}

.plan-column-title b {
  font-size: 15px;
}

.plan-column-title span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-capacity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-capacity-bar {
  width: 100%;
  height: 8px;
}

.plan-capacity-fill {
  fill: var(--md-primary);
}

.plan-capacity-fill--high {
  fill: color-mix(in srgb, var(--md-star) 80%, var(--md-primary));
}

.plan-capacity-fill--full {
  fill: var(--md-star);
}

.plan-release-period {
  align-self: flex-start;
  min-height: 28px;
  padding: 0 4px;
  font-size: 12px;
}

.plan-cards {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

.plan-empty {
  margin: 16px 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  text-align: center;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
  transition: box-shadow 150ms var(--md-easing), opacity 150ms var(--md-easing), transform 150ms var(--md-easing);
}

.plan-card[draggable="true"] {
  cursor: grab;
}

.plan-card[draggable="true"]:hover {
  box-shadow: var(--md-elevation-1);
}

.plan-card--dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

.plan-card--released {
  border-color: color-mix(in srgb, var(--md-star) 55%, var(--md-outline-variant));
  background: color-mix(in srgb, var(--md-star) 6%, var(--md-surface));
}

.plan-card--urgent {
  border-inline-start: 4px solid var(--md-error);
}

.plan-card--dim {
  opacity: 0.25;
}

.plan-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-card-menu,
.plan-pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.plan-card-menu {
  margin-inline-start: auto;
}

.plan-pin {
  color: var(--md-primary);
}

.plan-card-menu:hover,
.plan-pin:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.plan-card-menu svg,
.plan-pin svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.plan-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
}

.plan-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-card-meta b {
  color: var(--md-on-surface);
}

.plan-card-order {
  color: var(--md-primary);
  font-size: 12px;
  text-decoration: none;
}

.plan-card-order:hover {
  text-decoration: underline;
}

.plan-card-progress .settle {
  width: 100%;
}

.plan-card-note {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-card-warnings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card-warnings li {
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-star) 20%, transparent);
  color: var(--md-on-surface);
  font-size: 11px;
  line-height: 18px;
}

.plan-card-release {
  align-self: flex-start;
  min-height: 28px;
  font-size: 12px;
}

.plan-continue {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 12px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-continue svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.plan-board-empty {
  flex: 1;
}

.plan-move-menu {
  position: absolute;
  top: var(--menu-top, 0);
  left: var(--menu-left, 0);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-height: 60vh;
  padding: 8px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--md-surface);
  box-shadow: var(--md-elevation-1), 0 8px 24px rgb(0 0 0 / 18%);
}

.plan-move-menu[hidden] {
  display: none;
}

.plan-move-title {
  margin: 4px 8px 8px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-move-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}

.plan-move-menu button span {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-move-menu button:hover,
.plan-move-menu button:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  outline: none;
}

.plan-release-dialog {
  width: min(640px, calc(100vw - 32px));
}

.plan-release-jobs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  margin-bottom: 12px;
  overflow-y: auto;
}

.plan-release-people {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
}

/* The capacity page. */
.plan-period-choices {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.plan-week {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-week-head,
.plan-week-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(80px, 120px) minmax(80px, 120px) minmax(80px, 1fr);
  align-items: center;
  gap: 12px;
}

.plan-week-head {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-week-day {
  font-weight: 500;
}

.plan-week-total {
  font-size: 16px;
  text-align: start;
}

.plan-week-sum {
  padding-top: 8px;
  border-top: 1px solid var(--md-outline-variant);
}

.plan-day-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
  gap: 12px;
}

.plan-days {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.plan-days li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--md-surface);
  font-size: 13px;
}

.plan-days form {
  margin-inline-start: auto;
}

.plan-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.plan-preview-period {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  background: var(--md-surface);
  font-size: 12px;
}

.plan-preview-period span {
  color: var(--md-on-surface-variant);
}

.plan-preview-hours b {
  color: var(--md-primary);
  font-size: 18px;
}

@media (max-width: 900px) {
  .plan-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-job--level-1,
  .plan-job--level-2,
  .plan-job--level-3,
  .plan-job--level-4,
  .plan-job--level-5,
  .plan-job--level-6 {
    margin-inline-start: 12px;
  }
}

@media (max-width: 600px) {
  .plan-line {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .plan-line-qty {
    grid-column: 2;
  }

  .plan-column {
    flex-basis: 85vw;
  }

  .plan-week-head,
  .plan-week-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .plan-week-head {
    font-size: 11px;
  }
}

/* The board fits the window; each period scrolls under its own header. */
@media (min-width: 760px) {
  .plan-board {
    height: calc(100dvh - 190px);
    min-height: 440px;
  }

  .plan-column {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .plan-column-head {
    position: sticky;
    top: -12px;
    z-index: 1;
    margin: -12px -12px 0;
    padding: 14px 16px 10px;
    background: inherit;
  }
}
/* The release dialog: one scrolling body between a fixed head and fixed buttons. */
.plan-release-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.plan-release-dialog > form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.plan-release-head {
  padding: 24px 24px 0;
}

.plan-release-head .dialog-text {
  margin-bottom: 12px;
}

.plan-release-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 4px 24px 16px;
  overflow-y: auto;
}

.plan-release-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-release-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.plan-release-label span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  font-weight: 400;
}

.plan-release-dialog .plan-release-jobs {
  max-height: none;
  margin: 0;
  overflow: visible;
  gap: 4px;
}

.plan-release-job {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--md-surface);
  cursor: pointer;
}

.plan-release-job input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--md-primary);
}

.plan-release-job:has(input:not(:checked)) {
  background: transparent;
  color: var(--md-on-surface-variant);
}

.plan-release-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-release-meta {
  color: var(--md-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
}

.plan-release-dialog .plan-release-people {
  max-height: none;
  overflow: visible;
}

.plan-release-actions {
  margin: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--md-outline-variant);
}

@media (max-width: 520px) {
  .plan-release-job {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .plan-release-meta {
    grid-column: 2;
  }
}
/* The order tabs slide sideways on a phone instead of widening the page. */
.plan-tabs {
  flex: none;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.plan-tabs .settings-tab {
  flex: none;
  white-space: nowrap;
}
/* Latin names and numbers keep their own direction but line up on the right with the page. */
.plan-job-title,
.plan-card-title,
.kpi-value[dir="ltr"],
.item-hero-stat-value[dir="ltr"] {
  text-align: right;
}

/* Trees keep every row on the same right edge; the nesting shows inside the row,
   with a small hook under the row it belongs to. */
.bom-children {
  padding-inline-start: 0;
}

.bom-children::before {
  content: none;
}

.bom-row,
.plan-job {
  position: relative;
}

.bom-node--depth-2 > .bom-row { padding-inline-start: 38px; }
.bom-node--depth-3 > .bom-row { padding-inline-start: 66px; }
.bom-node--depth-4 > .bom-row { padding-inline-start: 94px; }
.bom-node--depth-5 > .bom-row,
.bom-node--depth-6 > .bom-row,
.bom-node--depth-7 > .bom-row,
.bom-node--depth-8 > .bom-row { padding-inline-start: 122px; }

.bom-node:not(.bom-node--depth-1) > .bom-row::before,
.plan-job:not(.plan-job--level-0)::before {
  content: "";
  position: absolute;
  top: -7px;
  width: 12px;
  height: calc(50% + 7px);
  border-inline-start: 2px solid var(--md-outline-variant);
  border-block-end: 2px solid var(--md-outline-variant);
  border-end-start-radius: 8px;
  pointer-events: none;
}

.bom-node--depth-2 > .bom-row::before { inset-inline-start: 23px; }
.bom-node--depth-3 > .bom-row::before { inset-inline-start: 51px; }
.bom-node--depth-4 > .bom-row::before { inset-inline-start: 79px; }
.bom-node--depth-5 > .bom-row::before,
.bom-node--depth-6 > .bom-row::before,
.bom-node--depth-7 > .bom-row::before,
.bom-node--depth-8 > .bom-row::before { inset-inline-start: 107px; }

.plan-job--level-1,
.plan-job--level-2,
.plan-job--level-3,
.plan-job--level-4,
.plan-job--level-5,
.plan-job--level-6 {
  margin-inline-start: 0;
}

.plan-job--level-1 { padding-inline-start: 40px; }
.plan-job--level-2 { padding-inline-start: 66px; }
.plan-job--level-3 { padding-inline-start: 92px; }
.plan-job--level-4,
.plan-job--level-5,
.plan-job--level-6 { padding-inline-start: 118px; }

.plan-job--level-1::before { inset-inline-start: 18px; }
.plan-job--level-2::before { inset-inline-start: 44px; }
.plan-job--level-3::before { inset-inline-start: 70px; }
.plan-job--level-4::before,
.plan-job--level-5::before,
.plan-job--level-6::before { inset-inline-start: 96px; }
.plan-job:not(.plan-job--level-0)::before {
  width: 20px;
}
/* A nested part with nothing under it: the hook runs on to its dot. */
.bom-node:not(.bom-node--depth-1) > .bom-row:has(> .bom-toggle--leaf)::before {
  width: 46px;
}
/* Text that only a screen reader reads. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Production orders: each order is one card that opens it. */
.plan-order-list {
  container: plan-orders / inline-size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-order {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 150px 170px 24px;
  align-items: center;
  gap: 16px 20px;
  padding: 14px 18px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  text-decoration: none;
  transition: border-color 150ms var(--md-easing), box-shadow 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.plan-order:hover {
  border-color: color-mix(in srgb, var(--md-primary) 45%, var(--md-outline-variant));
  background: color-mix(in srgb, var(--md-primary) 4%, var(--md-surface));
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

.plan-order:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.plan-order:active {
  background: color-mix(in srgb, var(--md-primary) 9%, var(--md-surface));
}

.plan-order--done,
.plan-order--cancelled {
  opacity: 0.75;
}

.plan-order-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 16px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.plan-order-id small {
  font-size: 11px;
}

.plan-order-id b {
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
}

.plan-order-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.plan-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.plan-order-for {
  font-size: 16px;
  font-weight: 600;
}

.plan-order-title {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-order-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.plan-order-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
  font-size: 12px;
}

.plan-order-product bdi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-order-product b {
  color: var(--md-primary);
}

.plan-order-more {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-order-due,
.plan-order-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.plan-order-due small,
.plan-order-progress small {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-order-due b,
.plan-order-progress b {
  font-size: 15px;
  font-weight: 600;
}

.plan-order-due span,
.plan-order-progress span {
  color: var(--md-on-surface-variant);
}

.plan-order-due--late span {
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-weight: 500;
}

.plan-order-progress .settle-bar {
  width: 100%;
  height: 6px;
}

.plan-order-go {
  width: 24px;
  height: 24px;
  fill: var(--md-on-surface-variant);
  transition: transform 150ms var(--md-easing), fill 150ms var(--md-easing);
}

.plan-order:hover .plan-order-go {
  fill: var(--md-primary);
  transform: translateX(-3px);
}

@container plan-orders (max-width: 820px) {
  .plan-order {
    grid-template-columns: 56px minmax(0, 1fr) 24px;
    gap: 12px 14px;
    padding: 14px;
  }

  .plan-order-id {
    grid-row: span 2;
    align-self: start;
    height: 56px;
  }

  .plan-order-main {
    grid-column: 2;
  }

  .plan-order-go {
    grid-column: 3;
    grid-row: 1;
  }

  .plan-order-due,
  .plan-order-progress {
    grid-row: 2;
  }

  .plan-order-due {
    grid-column: 2;
    justify-self: start;
  }

  .plan-order-progress {
    grid-column: 2 / 4;
    justify-self: end;
    width: min(150px, 45%);
  }
}

/* The capacity preview follows the form while it is typed. */
.plan-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-preview-unsaved {
  background: color-mix(in srgb, var(--md-star) 18%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 75%, var(--md-on-surface));
}

[data-capacity-preview] {
  transition: opacity 150ms var(--md-easing);
}

.plan-preview--loading {
  opacity: 0.6;
}
/* The people of production: one row each, with the hours of every weekday. */
.plan-crew {
  container: plan-crew / inline-size;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-crew-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-crew-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(7, 56px) 64px 40px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 16px;
  background: var(--md-surface);
}

.plan-crew-row--error {
  border-color: var(--md-error);
}

.plan-crew-row--new {
  animation: plan-crew-new 1.2s var(--md-easing);
}

@keyframes plan-crew-new {
  from {
    background: color-mix(in srgb, var(--md-primary) 16%, var(--md-surface));
  }
}

.plan-crew-head,
.plan-crew-sum {
  border-color: transparent;
  background: transparent;
  text-align: center;
}

.plan-crew-head {
  padding-block: 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-crew-sum {
  border-top: 1px solid var(--md-outline-variant);
  border-radius: 0;
  font-size: 13px;
}

.plan-crew-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: right;
}

.plan-crew-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 14px;
  font-weight: 600;
}

.plan-crew-person {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-crew-hours {
  width: 100%;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 15px;
  text-align: center;
}

.plan-crew-hours:focus {
  border-color: var(--md-primary);
  outline: 1px solid var(--md-primary);
}

.plan-crew-total {
  color: var(--md-primary);
  font-size: 15px;
  text-align: center;
}

.plan-crew-remove {
  justify-self: center;
}

.plan-crew-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--md-error);
  font-size: 12px;
}

.plan-crew-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: 16px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-align: center;
}

.plan-crew-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.plan-crew-add .text-field {
  flex: 0 1 340px;
}

.plan-crew-add .form-hint {
  flex: 1 1 220px;
  margin: 0;
}

.plan-crew-alert {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--md-star) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-star) 12%, var(--md-surface));
  font-size: 13px;
}

.plan-crew-alert--board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.plan-day-everyone {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

@container plan-crew (max-width: 700px) {
  .plan-crew-row {
    grid-template-columns: repeat(7, minmax(0, 1fr)) 44px 36px;
    gap: 4px;
    padding: 8px;
  }

  .plan-crew-name {
    grid-column: 1 / -1;
  }

  .plan-crew-head .plan-crew-name {
    display: none;
  }

  .plan-crew-sum .plan-crew-name {
    font-weight: 500;
  }

  .plan-crew-hours {
    height: 36px;
    font-size: 14px;
  }

  .plan-crew-total {
    font-size: 13px;
  }
}
/* Month calendars: the holidays in the settings and the workshop's capacity. */
.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 16px;
}

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 4px 0 14px;
}

.cal-heading {
  flex: 1 1 320px;
}

.cal-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-today {
  height: 36px;
}

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-weekdays {
  margin-bottom: 6px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  text-align: center;
}

.cal-weekend {
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
}

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 84px;
  padding: 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color 150ms var(--md-easing), box-shadow 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.cal-grid--capacity .cal-day {
  min-height: 104px;
}

.cal-day:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--md-primary) 50%, var(--md-outline-variant));
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.cal-day:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.cal-day:disabled {
  cursor: default;
}

.cal-day--out {
  border-color: transparent;
  background: transparent;
  opacity: 0.35;
  pointer-events: none;
}

.cal-day--past:not(.cal-day--out) {
  opacity: 0.55;
}

.cal-day--weekend:not(.cal-day--holiday),
.cal-day--off:not(.cal-day--holiday):not(.cal-day--out) {
  background: color-mix(in srgb, var(--md-on-surface) 4%, var(--md-surface));
}

.cal-day--holiday {
  border-color: color-mix(in srgb, var(--md-star) 55%, transparent);
  background: color-mix(in srgb, var(--md-star) 12%, var(--md-surface));
}

.cal-day--overtime {
  border-color: color-mix(in srgb, var(--md-primary) 55%, transparent);
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface));
}

.cal-day--today .cal-num {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.cal-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cal-num {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
}

.cal-hours {
  color: var(--md-on-surface-variant);
  font-size: 11px;
  white-space: nowrap;
}

.cal-hours b {
  color: var(--md-on-surface);
  font-size: 15px;
}

.cal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cal-tag {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-tag--holiday {
  background: color-mix(in srgb, var(--md-star) 22%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
}

.cal-tag--overtime {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.cal-tag--leave,
.cal-tag--special {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.cal-tag--closed {
  background: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
  color: var(--md-on-surface-variant);
}

.cal-bar {
  width: 100%;
  height: 4px;
  margin-top: auto;
}

.cal-bar-track {
  fill: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.cal-bar-fill {
  fill: var(--md-primary);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.cal-dot--holiday { background: var(--md-star); }
.cal-dot--weekend { background: color-mix(in srgb, var(--md-on-surface) 18%, transparent); }
.cal-dot--today,
.cal-dot--overtime { background: var(--md-primary); }
.cal-dot--leave { background: var(--md-secondary-container); }

.cal-side .form-section-title {
  margin-bottom: 8px;
}

.cal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--md-surface);
}

.cal-list-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}

.cal-list-text span {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.cal-empty {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.cal-dialog {
  width: min(440px, calc(100vw - 32px));
}

.cal-dialog--day {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.cal-dialog-actions {
  margin-top: 16px;
}

.cal-remove {
  margin-inline-start: auto;
}

.cal-day-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cal-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cal-day-head .dialog-title {
  margin-bottom: 4px;
  font-size: 20px;
}

.cal-holiday-note {
  margin: 0;
  font-size: 13px;
}

.cal-day-total {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.cal-day-total b {
  font-size: 22px;
  line-height: 26px;
}

.cal-day-total small {
  font-size: 11px;
}

.cal-day-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.cal-mode {
  min-height: 64px;
}

.cal-mode-text {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.cal-everyone .plan-time-field {
  width: max-content;
}

.cal-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-person {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  background: var(--md-surface);
}

.cal-person--own {
  border-color: color-mix(in srgb, var(--md-primary) 45%, var(--md-outline-variant));
}

.cal-person--leave {
  background: color-mix(in srgb, var(--md-on-surface) 5%, var(--md-surface));
}

.cal-person--leave .cal-leave {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.cal-person-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cal-person-name b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-person-name small {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.cal-error {
  margin: 0;
  color: var(--md-error);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .cal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .cal-weekdays,
  .cal-grid {
    gap: 3px;
  }

  .cal-weekdays span {
    font-size: 10px;
  }

  .cal-day,
  .cal-grid--capacity .cal-day {
    min-height: 64px;
    padding: 4px;
    border-radius: 10px;
  }

  .cal-day-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .cal-num {
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .cal-hours {
    font-size: 10px;
  }

  .cal-hours b {
    font-size: 12px;
  }

  .cal-tags {
    gap: 2px;
  }

  .cal-tag {
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
  }
}
/* Official holidays read from time.ir, checked before they are saved. */
.cal-fetch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.cal-fetch-button {
  justify-content: center;
}

.cal-fetch-button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.cal-import {
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--md-primary) 35%, transparent);
}

.cal-import-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}

.cal-import-head > div {
  flex: 1 1 320px;
}

.cal-import-count {
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 13px;
}

.cal-import-count b {
  font-size: 18px;
}

.cal-import-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}

.cal-import-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-import-row {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  background: var(--md-surface);
}

.cal-import-row--same {
  opacity: 0.6;
}

.cal-import-row--other {
  border-color: color-mix(in srgb, var(--md-star) 55%, transparent);
}

.cal-import-row--past .cal-import-date {
  color: var(--md-on-surface-variant);
}

.cal-import-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.cal-import-pick input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--md-primary);
}

.cal-import-date {
  font-size: 13px;
  font-weight: 500;
}

.cal-import-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
}

.cal-import-title small {
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.cal-import-tags {
  display: flex;
  gap: 4px;
}

.cal-import-actions {
  margin-top: 14px;
}

@media (max-width: 700px) {
  .cal-import-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cal-import-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* A job released to the floor: labelled, and its menu can move it or take it back. */
.plan-released {
  background: color-mix(in srgb, var(--md-star) 22%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-size: 11px;
}

.plan-move-note {
  margin: 6px 12px;
  color: var(--md-on-surface-variant);
  font-size: 11px;
  line-height: 18px;
}

.plan-move-back {
  border-top: 1px solid var(--md-outline-variant) !important;
  color: var(--md-primary) !important;
  font-weight: 500;
}
/* Board cards, calmer: a head of chips, the part, two facts, the order, then what needs attention. */
.plan-card {
  gap: 8px;
  padding: 12px 14px;
}

.plan-card--opens {
  cursor: pointer;
}

.plan-card--opens:hover {
  border-color: color-mix(in srgb, var(--md-star) 70%, var(--md-outline-variant));
  box-shadow: var(--md-elevation-1);
}

.plan-card--opens:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.plan-card--loading {
  opacity: 0.6;
}

.plan-card-top {
  flex-wrap: wrap;
  min-height: 28px;
}

.plan-stage {
  font-size: 11px;
}

.plan-task-chip {
  padding: 1px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-star) 24%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}

.plan-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.plan-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plan-fact b {
  color: var(--md-on-surface);
}

.plan-fact svg,
.plan-card-note svg,
.plan-card-warn svg,
.plan-card-release svg,
.plan-card-open svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.plan-fact--missing {
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
}

.plan-card-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-card-progress b {
  color: var(--md-on-surface);
}

.plan-card-bar {
  width: 100%;
  height: 4px;
}

.plan-card-bar-track {
  fill: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
}

.plan-card-bar-fill {
  fill: var(--md-primary);
}

.plan-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 12px;
}

.plan-card-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--md-on-surface);
  text-decoration: none;
  white-space: nowrap;
}

.plan-card-order bdi {
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card-order-no {
  color: var(--md-primary);
  font-weight: 600;
}

.plan-card-due {
  flex: none;
  color: var(--md-on-surface-variant);
}

.plan-card-due--late {
  color: color-mix(in srgb, var(--md-star) 75%, var(--md-on-surface));
  font-weight: 600;
}

.plan-card-note {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-card-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-star) 16%, transparent);
  color: color-mix(in srgb, var(--md-star) 60%, var(--md-on-surface));
  font-size: 11px;
  line-height: 16px;
}

.plan-card-warn span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--md-on-surface);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card-warn b {
  flex: none;
}

.plan-card-release,
.plan-card-open {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.plan-card-release {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  cursor: pointer;
}

.plan-card-release:hover {
  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-secondary-container));
}

.plan-card-open {
  color: var(--md-primary);
}

/* The task panel: a side sheet over the board. */
.plan-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(460px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px 0 0 28px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  box-shadow: 0 8px 40px rgb(0 0 0 / 25%);
}

.plan-panel[open] {
  animation: plan-panel-in 220ms var(--md-easing);
}

@keyframes plan-panel-in {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}

.plan-panel::backdrop {
  background: rgb(0 0 0 / 40%);
}

.plan-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 20px 0;
}

.plan-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-panel-status {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.plan-panel-status--done {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.plan-panel-title {
  margin: 12px 20px 2px;
  font-size: 22px;
  font-weight: 600;
  text-align: right;
}

.plan-panel-sub {
  margin: 0 20px 12px;
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.plan-panel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 4px 20px 20px;
  overflow-y: auto;
}

.plan-panel-progress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--md-surface);
}

.plan-panel-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-panel-big b {
  color: var(--md-primary);
  font-size: 32px;
  line-height: 36px;
}

.plan-panel-big span {
  color: var(--md-on-surface-variant);
  font-size: 13px;
}

.plan-panel-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-panel-steps li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.plan-panel-steps .plan-card-bar {
  height: 6px;
}

.plan-panel-steps b {
  text-align: left;
}

.plan-panel-step-label {
  color: var(--md-on-surface-variant);
}

.plan-panel-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plan-panel-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--md-surface);
  font-size: 11px;
}

.plan-panel-tile span,
.plan-panel-tile small {
  color: var(--md-on-surface-variant);
}

.plan-panel-tile b {
  font-size: 14px;
}

.plan-panel-tile--late b {
  color: color-mix(in srgb, var(--md-star) 75%, var(--md-on-surface));
}

.plan-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-panel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.plan-panel-label span {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
}

.plan-panel-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-panel-people li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--md-surface);
}

.plan-panel-people span:last-child {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.plan-panel-people small {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-panel-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

.plan-panel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-panel-batches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-panel-batch {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--md-surface);
}

.plan-panel-batch-no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-on-surface) 7%, transparent);
  font-weight: 600;
}

.plan-panel-batch-main {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.plan-panel-batch-main small {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-panel-batch-stage {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
}

.plan-panel-batch--quality .plan-panel-batch-stage,
.plan-panel-batch--warehouse .plan-panel-batch-stage {
  background: color-mix(in srgb, var(--md-star) 20%, var(--md-surface));
  color: color-mix(in srgb, var(--md-star) 70%, var(--md-on-surface));
}

.plan-panel-batch--closed .plan-panel-batch-stage {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.plan-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--md-outline-variant);
}

@media (max-width: 520px) {
  .plan-panel {
    border-radius: 0;
  }

  .plan-panel-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The panel's head and buttons stay put; only its middle scrolls. */
.plan-panel {
  overflow: hidden;
}

.plan-panel > [data-task-panel-body] {
  height: 100%;
}
/* Getting about the board: a strip of every period, and arrows at its sides. */
.plan-strip {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.plan-strip-item {
  display: flex;
  flex: 1 0 104px;
  flex-direction: column;
  gap: 4px;
  max-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 14px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color 150ms var(--md-easing), background-color 150ms var(--md-easing), transform 150ms var(--md-easing);
}

.plan-strip-item:hover {
  border-color: color-mix(in srgb, var(--md-primary) 50%, var(--md-outline-variant));
}

.plan-strip-item--seen {
  border-color: color-mix(in srgb, var(--md-primary) 45%, var(--md-outline-variant));
  background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface));
}

.plan-strip-item--now .plan-strip-label::after {
  content: " · جاری";
  color: var(--md-primary);
  font-weight: 400;
}

.plan-strip-item--waiting {
  background: color-mix(in srgb, var(--md-star) 10%, var(--md-surface));
}

.plan-strip-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.plan-strip-bar {
  width: 100%;
  height: 4px;
}

.plan-strip-count {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

/* While a card is held, every period in the strip is a place to drop it. */
.plan-board-page--dragging .plan-strip-item[data-period] {
  border-style: dashed;
}

.plan-strip-item.plan-column--over {
  border-style: solid;
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface));
  transform: translateY(-2px);
}

.plan-board-wrap {
  position: relative;
}

.plan-scroll {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-on-surface);
  box-shadow: var(--md-elevation-1);
  cursor: pointer;
  opacity: 0.85;
  transform: translateY(-50%);
  transition: opacity 150ms var(--md-easing), background-color 150ms var(--md-easing);
}

.plan-scroll:hover {
  background: var(--md-secondary-container);
  opacity: 1;
}

.plan-scroll svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.plan-scroll--back {
  right: -6px;
}

.plan-scroll--on {
  left: -6px;
}

.plan-board--panning {
  cursor: grabbing;
  user-select: none;
}

.plan-board {
  scroll-snap-type: none;
}

.plan-column--found {
  animation: plan-column-found 1s var(--md-easing);
}

@keyframes plan-column-found {
  from {
    box-shadow: 0 0 0 3px var(--md-primary);
  }
}

@media (max-width: 760px) {
  .plan-scroll {
    display: none;
  }
}
/* Every period fits in the strip: blocks share the width and dates may wrap. */
.plan-strip-item {
  flex: 1 1 0;
  min-width: 78px;
  padding: 7px 8px;
}

.plan-strip-label {
  font-size: 11px;
  line-height: 16px;
  white-space: normal;
}
/* Card tools: split, merge and the menu sit together at the end of the head. */
.plan-card-tools {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: auto;
}

.plan-card-top .plan-card-menu {
  margin-inline-start: 0;
}

.plan-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color 150ms var(--md-easing), color 150ms var(--md-easing);
}

.plan-card-icon:hover,
.plan-card-icon:focus-visible {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  outline: none;
}

.plan-card-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.plan-part-chip {
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}

/* The split window. */
.plan-split {
  width: min(520px, calc(100vw - 32px));
  --keep-share: 50%;
}

.plan-split form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-split-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.plan-split-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.plan-split-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.plan-split-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.plan-split-name {
  margin: 2px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 13px;
  text-align: right;
}

/* Two blocks whose widths follow the split, so the division is seen at a glance. */
.plan-split-parts {
  display: grid;
  grid-template-columns: minmax(96px, var(--keep-share)) minmax(96px, 1fr);
  gap: 4px;
  transition: grid-template-columns 120ms var(--md-easing);
}

.plan-split-part {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  overflow: hidden;
  font-size: 12px;
}

.plan-split-part--keep {
  border-radius: 16px 4px 4px 16px;
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.plan-split-part--rest {
  border-radius: 4px 16px 16px 4px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.plan-split-part b {
  font-size: 20px;
  line-height: 26px;
  white-space: nowrap;
}

.plan-split-part small {
  opacity: 0.85;
  white-space: nowrap;
}

.plan-split-slider {
  padding: 0 4px;
}

.plan-split-range {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.plan-split-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to left, var(--md-primary) var(--keep-share), var(--md-secondary-container) var(--keep-share));
}

.plan-split-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--md-secondary-container);
}

.plan-split-range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--md-primary);
}

.plan-split-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid var(--md-surface);
  border-radius: 50%;
  background: var(--md-primary);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  appearance: none;
}

.plan-split-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--md-surface);
  border-radius: 50%;
  background: var(--md-primary);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.plan-split-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.plan-split-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-split-quick button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.plan-split-quick button:hover {
  background: var(--md-secondary-container);
}

.plan-split-periods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
}

.plan-split-period {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
}

.plan-split-period span {
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.plan-split-period[aria-checked="true"] {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface));
  box-shadow: inset 0 0 0 1px var(--md-primary);
}

.plan-split-period:disabled {
  cursor: default;
  opacity: 0.4;
}

.plan-split-fit {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

.plan-split-fit[data-state="ok"] {
  color: var(--md-primary);
}

.plan-split-fit[data-state="over"] {
  color: color-mix(in srgb, var(--md-star) 75%, var(--md-on-surface));
}

.plan-split-actions {
  margin: 0;
}
/* The board's own message: a bar at the bottom that goes away by itself. */
.plan-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 60;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--md-on-surface);
  color: var(--md-surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
  font-size: 14px;
  transform: translateX(-50%);
  animation: plan-toast-in 180ms var(--md-easing);
}

.plan-toast[hidden] {
  display: none;
}

@keyframes plan-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}
/* The board fills what the window has left under it; the script measures it. */
@media (min-width: 760px) {
  .plan-board {
    height: var(--board-height, calc(100dvh - 190px));
    min-height: 0;
  }
}
/* The board's own scrollbar, above it; the browser's own one under the board is hidden. */
.plan-board {
  scrollbar-width: none;
}

.plan-board::-webkit-scrollbar {
  height: 0;
}

.plan-hscroll {
  position: relative;
  height: 14px;
  margin: 0 2px 12px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  cursor: pointer;
  --thumb-size: 120px;
  --thumb-offset: 0px;
}

.plan-hscroll[hidden] {
  display: none;
}

.plan-hscroll-thumb {
  position: absolute;
  top: 1px;
  right: var(--thumb-offset);
  width: var(--thumb-size);
  height: 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--md-primary) 70%, var(--md-surface));
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  cursor: grab;
  touch-action: none;
  transition: background-color 150ms var(--md-easing), height 150ms var(--md-easing), top 150ms var(--md-easing);
}

.plan-hscroll:hover .plan-hscroll-thumb,
.plan-hscroll--held .plan-hscroll-thumb,
.plan-hscroll-thumb:focus-visible {
  top: -2px;
  height: 18px;
  border-radius: 9px;
  background: var(--md-primary);
  outline: none;
}

.plan-hscroll--held .plan-hscroll-thumb {
  cursor: grabbing;
}

.plan-hscroll-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 4px;
  border-top: 1px solid rgb(255 255 255 / 70%);
  border-bottom: 1px solid rgb(255 255 255 / 70%);
  transform: translate(-50%, -50%);
}