[data-page="weekly-tasks"] {
  --weekly-gold: #e0b95e;
  --weekly-green: #79c58e;
  --weekly-cyan: #68b3be;
  --weekly-danger: #e08373;
}

.weekly-task-web-hero {
  padding: 30px 0 16px;
  background:
    radial-gradient(circle at 78% 12%, rgba(100, 168, 113, 0.14), transparent 30%),
    radial-gradient(circle at 18% 8%, rgba(218, 177, 91, 0.12), transparent 32%);
}

.weekly-task-web-hero__copy > p {
  max-width: 820px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: clamp(0.96rem, 1.5vw, 1.08rem);
  line-height: 1.55;
}

.weekly-task-web-workspace {
  padding-top: 18px;
}

.weekly-task-web-shell {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(212, 182, 116, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(100, 168, 113, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(29, 29, 24, 0.98), rgba(13, 18, 18, 0.98));
}

.weekly-task-web-shell__head,
.weekly-task-web-upload-section,
.weekly-task-web-results {
  padding: 24px;
}

.weekly-task-web-shell__head {
  display: grid;
  grid-template-columns: minmax(170px, 0.45fr) minmax(420px, 1fr);
  gap: 22px;
  align-items: end;
  border-bottom: 1px solid rgba(212, 182, 116, 0.14);
}

.weekly-task-web-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--weekly-gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.weekly-task-web-shell h2,
.weekly-task-web-shell h3 {
  margin: 0;
}

.weekly-task-web-shell__head p,
.weekly-task-web-review-note,
.weekly-task-web-route-head p {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.weekly-task-web-context-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.weekly-task-web-context-fields label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weekly-task-web-context-fields input,
.weekly-task-web-context-fields select,
.weekly-task-web-task-row input,
.weekly-task-web-task-row select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(211, 184, 124, 0.2);
  border-radius: 10px;
  background: rgba(8, 13, 14, 0.78);
  color: var(--text-strong);
  font: inherit;
}

.weekly-task-web-context-fields input,
.weekly-task-web-context-fields select {
  padding: 0 11px;
}

.weekly-task-web-context-fields input:focus,
.weekly-task-web-context-fields select:focus,
.weekly-task-web-task-row input:focus,
.weekly-task-web-task-row select:focus {
  border-color: rgba(224, 185, 94, 0.68);
  outline: 2px solid rgba(224, 185, 94, 0.12);
  outline-offset: 1px;
}

.weekly-task-web-upload-section {
  border-bottom: 1px solid rgba(212, 182, 116, 0.14);
}

.weekly-task-web-input[hidden] {
  display: none;
}

.weekly-task-web-section-heading {
  margin-bottom: 16px;
}

.weekly-task-web-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.weekly-task-web-dropzone {
  display: grid;
  min-height: 154px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px dashed rgba(224, 185, 94, 0.38);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(224, 185, 94, 0.06), transparent 45%),
    rgba(7, 12, 13, 0.58);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.weekly-task-web-dropzone:hover,
.weekly-task-web-dropzone:focus-visible,
.weekly-task-web-dropzone.is-dragover {
  border-color: rgba(224, 185, 94, 0.78);
  background: rgba(42, 35, 21, 0.42);
  outline: none;
  transform: translateY(-1px);
}

.weekly-task-web-dropzone__icon {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(224, 185, 94, 0.4);
  border-radius: 14px;
  background: rgba(72, 55, 24, 0.5);
}

.weekly-task-web-dropzone__icon::before,
.weekly-task-web-dropzone__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  background: var(--weekly-gold);
  transform: translateX(-50%);
}

.weekly-task-web-dropzone__icon::before {
  top: 12px;
  width: 2px;
  height: 17px;
}

.weekly-task-web-dropzone__icon::after {
  bottom: 11px;
  width: 22px;
  height: 2px;
}

.weekly-task-web-dropzone strong {
  color: var(--text-strong);
  font-size: 1.05rem;
}

.weekly-task-web-dropzone span,
.weekly-task-web-dropzone small {
  color: var(--text-muted);
}

.weekly-task-web-dropzone small {
  margin-top: 2px;
  color: var(--weekly-gold);
}

.weekly-task-web-dropzone.has-file {
  min-height: 78px;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-content: start;
  justify-items: start;
  column-gap: 12px;
  row-gap: 2px;
  padding: 13px 16px;
  text-align: left;
}

.weekly-task-web-dropzone.has-file .weekly-task-web-dropzone__icon {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
}

.weekly-task-web-dropzone.has-file > span:not(.weekly-task-web-dropzone__icon) {
  display: none;
}

.weekly-task-web-dropzone.has-file small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-preview {
  position: relative;
  display: grid;
  overflow: hidden;
  height: clamp(220px, 32vw, 420px);
  place-items: center;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid rgba(211, 184, 124, 0.2);
  border-radius: 16px;
  background: #070a0a;
}

.weekly-task-web-preview[hidden] {
  display: none;
}

.weekly-task-web-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}

.weekly-task-web-detection-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(121, 197, 142, 0.34);
  border-radius: 999px;
  background: rgba(9, 24, 16, 0.9);
  color: var(--weekly-green);
  font-size: 0.72rem;
  font-weight: 700;
}

.weekly-task-web-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.weekly-task-web-status {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.weekly-task-web-status.is-error {
  color: var(--weekly-danger);
}

.weekly-task-web-status.is-success {
  color: var(--weekly-green);
}

.weekly-task-web-button-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: weekly-task-web-spin 700ms linear infinite;
}

.is-loading .weekly-task-web-button-spinner {
  display: inline-block;
}

@keyframes weekly-task-web-spin {
  to { transform: rotate(360deg); }
}

.weekly-task-web-results {
  padding-top: 22px;
}

.weekly-task-web-results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.weekly-task-web-results-head > .btn {
  min-height: 44px;
}

.weekly-task-web-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 5px;
  border: 1px solid rgba(211, 184, 124, 0.14);
  border-radius: 14px;
  background: rgba(5, 9, 10, 0.58);
}

.weekly-task-web-tab {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}

.weekly-task-web-tab.is-active {
  border: 1px solid rgba(224, 185, 94, 0.25);
  background: linear-gradient(180deg, rgba(77, 58, 26, 0.72), rgba(43, 34, 21, 0.72));
  color: var(--text-strong);
}

.weekly-task-web-review-head,
.weekly-task-web-route-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.weekly-task-web-review-note {
  min-height: 1.4em;
  font-size: 0.84rem;
}

.weekly-task-web-review-note.has-warning {
  color: var(--weekly-danger);
}

.weekly-task-web-task-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.weekly-task-web-task-columns > section {
  padding: 14px;
  border: 1px solid rgba(211, 184, 124, 0.14);
  border-radius: 15px;
  background: rgba(5, 10, 11, 0.52);
}

.weekly-task-web-task-columns h3 {
  margin-bottom: 12px;
  color: var(--weekly-gold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weekly-task-web-task-list {
  display: grid;
  gap: 8px;
}

.weekly-task-web-task-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 72px 16px 72px auto;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(192, 205, 197, 0.1);
  border-radius: 11px;
  background: rgba(15, 21, 20, 0.72);
}

.weekly-task-web-task-row.needs-review {
  border-color: rgba(224, 131, 115, 0.48);
  box-shadow: inset 3px 0 0 rgba(224, 131, 115, 0.72);
}

.weekly-task-web-task-row.is-complete {
  opacity: 0.64;
}

.weekly-task-web-task-row input,
.weekly-task-web-task-row select {
  min-height: 36px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.weekly-task-web-progress-divider {
  color: var(--text-muted);
  text-align: center;
}

.weekly-task-web-complete {
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  min-width: 34px;
  color: var(--text-muted);
  cursor: pointer;
}

.weekly-task-web-complete input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--weekly-green);
}

.weekly-task-web-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}

.weekly-task-web-total {
  padding: 14px;
  border: 1px solid rgba(211, 184, 124, 0.14);
  border-radius: 13px;
  background: rgba(8, 13, 14, 0.7);
}

.weekly-task-web-total span,
.weekly-task-web-total small {
  display: block;
  color: var(--text-muted);
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.weekly-task-web-total strong {
  display: block;
  margin: 4px 0;
  color: var(--text-strong);
  font-size: 1.22rem;
}

.weekly-task-web-route-notice {
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(224, 131, 115, 0.3);
  border-radius: 12px;
  background: rgba(74, 35, 29, 0.28);
  color: #edb2a8;
  font-size: 0.84rem;
}

.weekly-task-web-route-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.weekly-task-web-route-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(290px, 0.65fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(121, 197, 142, 0.16);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(46, 75, 53, 0.18), rgba(8, 13, 14, 0.7) 36%);
}

.weekly-task-web-route-order {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(224, 185, 94, 0.42);
  border-radius: 50%;
  color: var(--weekly-gold);
  font-weight: 700;
}

.weekly-task-web-route-copy strong {
  color: var(--text-strong);
  font-family: Georgia, serif;
  font-size: 1.02rem;
}

.weekly-task-web-route-objectives {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.weekly-task-web-route-objectives span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(224, 185, 94, 0.09);
  color: var(--text-muted);
  font-size: 0.72rem;
}

.weekly-task-web-route-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.weekly-task-web-route-metric {
  min-width: 0;
  padding-left: 9px;
  border-left: 1px solid rgba(211, 184, 124, 0.12);
}

.weekly-task-web-route-metric span,
.weekly-task-web-route-metric small {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-route-metric strong {
  display: block;
  margin: 2px 0;
  color: var(--text-strong);
  font-size: 0.9rem;
}

.weekly-task-web-coverage {
  max-width: 360px;
  text-align: right;
  font-size: 0.76rem;
}

@media (max-width: 980px) {
  .weekly-task-web-shell__head {
    grid-template-columns: 1fr;
  }

  .weekly-task-web-route-step {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .weekly-task-web-route-metrics {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .weekly-task-web-shell__head,
  .weekly-task-web-upload-section,
  .weekly-task-web-results {
    padding: 20px;
  }

  .weekly-task-web-context-fields,
  .weekly-task-web-task-columns,
  .weekly-task-web-totals {
    grid-template-columns: 1fr;
  }

  .weekly-task-web-review-head,
  .weekly-task-web-route-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .weekly-task-web-coverage {
    text-align: left;
  }

  .weekly-task-web-task-row {
    grid-template-columns: minmax(0, 1fr) 66px 12px 66px auto;
  }

  .weekly-task-web-route-step {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px;
  }

  .weekly-task-web-route-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .weekly-task-web-task-row {
    grid-template-columns: minmax(0, 1fr) 56px 10px 56px;
  }

  .weekly-task-web-complete {
    grid-column: 1 / -1;
    justify-content: start;
  }

  .weekly-task-web-dropzone {
    min-height: 140px;
    padding: 20px;
  }

  .weekly-task-web-dropzone.has-file {
    min-height: 74px;
    padding: 12px 14px;
  }

  .weekly-task-web-preview {
    height: clamp(180px, 56vw, 360px);
  }
}

/* App-aligned planner workspace */
.weekly-task-web-context-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: end;
  width: min(100%, 430px);
}

.weekly-task-web-results {
  padding: 12px;
  background: #111516;
}

.weekly-task-web-tabs {
  gap: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(187, 177, 151, 0.18);
  border-radius: 7px;
  background: #0d1112;
}

.weekly-task-web-results-head {
  margin-bottom: 10px;
}

.weekly-task-web-tab {
  min-height: 43px;
  border-radius: 0;
  color: rgba(224, 215, 197, 0.62);
  font-family: Georgia, serif;
  font-size: 0.82rem;
}

.weekly-task-web-tab + .weekly-task-web-tab {
  border-left: 1px solid rgba(187, 177, 151, 0.14);
}

.weekly-task-web-tab.is-active {
  border: 0;
  background:
    linear-gradient(180deg, rgba(122, 115, 100, 0.34), rgba(48, 46, 42, 0.44)),
    #1a1c1c;
  color: #fff7e7;
  box-shadow: inset 0 0 0 1px rgba(224, 185, 94, 0.2);
}

.weekly-task-web-tab.has-unread:not(.is-active) {
  color: #f05a4a;
  text-shadow:
    1px 1px 0 #000,
    0 0 5px rgba(240, 90, 74, 0.45);
}

.weekly-task-web-tab.has-unread:not(.is-active):hover,
.weekly-task-web-tab.has-unread:not(.is-active):focus-visible {
  color: #ff6c5f;
}

.weekly-task-web-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding: 7px 9px;
  border-left: 2px solid rgba(91, 174, 157, 0.42);
  background: rgba(34, 72, 66, 0.1);
}

.weekly-task-web-review-note {
  min-height: 0;
  margin: 0;
  color: rgba(211, 220, 211, 0.68);
  font-size: 0.74rem;
  line-height: 1.35;
}

.weekly-task-web-review-note.has-warning {
  color: #e8b86b;
}

.weekly-task-web-review-head:has(.weekly-task-web-review-note.has-warning) {
  border-left-color: rgba(224, 166, 65, 0.58);
  background: rgba(105, 73, 24, 0.1);
}


.weekly-task-web-task-columns {
  gap: 7px;
  margin-top: 0;
}

.weekly-task-web-task-columns > section {
  min-width: 0;
  padding: 6px;
  border-color: rgba(171, 164, 145, 0.17);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28px),
    #111516;
}

.weekly-task-web-task-columns h3 {
  margin: 0 0 6px;
  padding: 8px;
  border: 1px solid rgba(205, 162, 73, 0.22);
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent, rgba(205, 162, 73, 0.09), transparent),
    rgba(91, 86, 74, 0.08);
  color: #dcc790;
  font-size: 0.67rem;
  line-height: 1;
  text-align: center;
}

.weekly-task-web-task-columns > section:nth-child(2) h3 {
  border-color: rgba(87, 176, 165, 0.2);
  color: #abd7cf;
}

.weekly-task-web-task-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.weekly-task-web-task-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 30px 62px 28px;
  gap: 4px;
  min-width: 0;
  min-height: 134px;
  padding: 6px;
  border: 1px solid rgba(186, 178, 157, 0.13);
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 50%),
    #171b1c;
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, 0.025);
}

.weekly-task-web-task-row:hover {
  border-color: rgba(205, 184, 135, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 50%),
    #191d1e;
}

.weekly-task-web-task-row.needs-review {
  border-color: rgba(224, 166, 65, 0.48);
  box-shadow: inset 3px 0 0 rgba(224, 166, 65, 0.7);
}

.weekly-task-web-task-row.is-complete {
  border-color: rgba(87, 156, 114, 0.24);
  background: rgba(50, 92, 67, 0.08);
  opacity: 1;
}

.weekly-task-web-task-row > select[data-task-field="name"] {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 3px;
  background: rgba(7, 10, 11, 0.72);
  color: #eee9df;
  font-size: 0.69rem;
  font-weight: 750;
  text-align: center;
  text-align-last: center;
  text-overflow: ellipsis;
}

.weekly-task-web-task-row > select[data-task-field="name"]:invalid {
  border-color: rgba(224, 105, 85, 0.72);
  color: #f2b2a6;
}

.weekly-task-web-task-row > select[data-task-field="name"] option {
  background: #15191a;
  color: #eee9df;
  text-align: left;
}

.weekly-task-web-card-recommendation {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 62px;
  padding: 6px;
  border: 1px solid rgba(129, 146, 137, 0.1);
  border-radius: 3px;
  background: rgba(5, 9, 9, 0.3);
}

.weekly-task-web-card-recommendation[data-state="complete"],
.weekly-task-web-card-recommendation[data-state="ambient"],
.weekly-task-web-card-recommendation[data-state="review"],
.weekly-task-web-card-recommendation[data-state="missing"] {
  place-items: center;
  color: rgba(220, 214, 201, 0.5);
  font-size: 0.62rem;
  line-height: 1.25;
  text-align: center;
}

.weekly-task-web-card-recommendation[data-state="complete"] {
  color: #72ca73;
  font-weight: 850;
  text-transform: uppercase;
}

.weekly-task-web-card-recommendation[data-state="ambient"] {
  color: rgba(102, 200, 181, 0.84);
  font-weight: 750;
}

.weekly-task-web-card-recommendation[data-state="review"] {
  color: #dfa956;
}

.weekly-task-web-card-place {
  overflow: hidden;
  color: rgba(164, 212, 194, 0.8);
  font-size: 0.67rem;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-card-estimates {
  display: grid;
  grid-template-columns: minmax(80px, 1.15fr) minmax(58px, 0.85fr);
  gap: 4px;
}

.weekly-task-web-card-estimate,
.weekly-task-web-total,
.weekly-task-web-route-metric {
  display: inline-grid;
  grid-template-columns: 14px minmax(0, auto);
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.weekly-task-web-card-estimate > span:last-child,
.weekly-task-web-total > span:last-child,
.weekly-task-web-route-metric > span:last-child {
  display: grid;
  min-width: 0;
}

.weekly-task-web-card-estimate strong,
.weekly-task-web-total strong,
.weekly-task-web-route-metric strong {
  overflow: hidden;
  color: #e8e3d9;
  font-size: 0.68rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-card-estimate[data-metric="duration"] strong {
  overflow: visible;
  font-size: 0.64rem;
  text-overflow: clip;
}

.weekly-task-web-card-estimate strong {
  overflow: visible;
  text-overflow: clip;
}

.weekly-task-web-card-estimate small,
.weekly-task-web-total small,
.weekly-task-web-route-metric small {
  overflow: hidden;
  color: rgba(218, 211, 196, 0.42);
  font-size: 0.51rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.weekly-task-web-metric-icon {
  width: 13px;
  height: 13px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.86;
}

[data-metric="duration"] > .weekly-task-web-metric-icon {
  background-image: url("/assets/img/icons/hunt-icon-duration.svg");
}

[data-metric="xp"] > .weekly-task-web-metric-icon,
[data-metric="task-xp"] > .weekly-task-web-metric-icon {
  background-image: url("/assets/img/icons/hunt-icon-xp.svg");
}

[data-metric="points"] > .weekly-task-web-metric-icon {
  background-image: url("/assets/img/icons/hunt-icon-tasks.svg");
}

[data-metric="profit"] > .weekly-task-web-metric-icon {
  background-image: url("/assets/img/icons/hunt-icon-profit.svg");
}

[data-metric="xp"] strong { color: #d7bde8; }
[data-metric="task-xp"] strong { color: #caa6df; }
[data-metric="points"] strong { color: #e0c173; }
[data-metric="profit"] strong { color: #e1b65f; }

.weekly-task-web-progress-fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding-right: 18px;
  color: rgba(222, 217, 206, 0.55);
  font-size: 0.65rem;
}

.weekly-task-web-progress-fields input {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  min-height: 26px;
  padding: 0 4px;
  border-radius: 2px;
  color: #e5dbca;
  font-size: 0.62rem;
  text-align: center;
  appearance: textfield;
}

.weekly-task-web-progress-fields input:first-child {
  color: #d9a44b;
}

.weekly-task-web-complete {
  position: absolute;
  right: 7px;
  bottom: 11px;
  display: grid;
  min-width: 16px;
  place-items: center;
}

.weekly-task-web-complete input {
  width: 16px;
  min-height: 16px;
  accent-color: #5da36e;
}

.weekly-task-web-task-row.is-complete .weekly-task-web-progress-fields {
  visibility: hidden;
}

.weekly-task-web-task-row.is-complete .weekly-task-web-card-recommendation > * {
  display: none;
}

.weekly-task-web-task-row.is-complete .weekly-task-web-card-recommendation::after {
  content: "Complete";
  color: #72ca73;
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
}

.weekly-task-web-route-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 22px;
  align-items: end;
  margin-bottom: 9px;
  padding: 10px 4px 13px;
  border-bottom: 1px solid rgba(189, 176, 146, 0.1);
}

.weekly-task-web-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  min-width: 0;
  margin: 0;
  gap: 9px;
}

.weekly-task-web-totals-context {
  display: block;
  color: rgba(226, 218, 201, 0.55);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.weekly-task-web-totals-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  min-width: 0;
}

.weekly-task-web-total {
  width: 100%;
  min-height: 35px;
  padding: 5px 9px;
  border: 0;
  border-left: 1px solid rgba(189, 176, 146, 0.14);
  background: transparent;
}

.weekly-task-web-total strong {
  font-size: 0.84rem;
}

.weekly-task-web-priority-control {
  display: grid;
  gap: 5px;
  color: rgba(231, 218, 191, 0.76);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: end;
}

.weekly-task-web-priority-control select {
  width: 126px;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid rgba(224, 185, 94, 0.38);
  border-radius: 5px;
  background: #0b0f10;
  color: #f5efe2;
  color-scheme: dark;
  font: inherit;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.weekly-task-web-priority-control select:hover {
  border-color: rgba(224, 185, 94, 0.66);
  background: #101516;
}

.weekly-task-web-priority-control select:focus {
  border-color: #d7a936;
  outline: 2px solid rgba(215, 169, 54, 0.2);
  outline-offset: 1px;
}

.weekly-task-web-priority-control select option {
  background: #171b1c;
  color: #f5efe2;
}

.weekly-task-web-priority-control select option:disabled {
  background: #171b1c;
  color: #9e988b;
}

.weekly-task-web-route-notice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 0;
  border-left: 2px solid rgba(199, 158, 79, 0.38);
  border-radius: 0;
  background: rgba(194, 133, 35, 0.045);
  color: inherit;
}

.weekly-task-web-route-notice[hidden] {
  display: none;
}

.weekly-task-web-route-notice-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgba(226, 178, 78, 0.3);
  border-radius: 50%;
  color: #efc86f;
  font: 800 0.55rem/1 Georgia, serif;
}

.weekly-task-web-route-notice > span:last-child {
  display: grid;
  gap: 2px;
}

.weekly-task-web-route-notice strong {
  color: #ead5a5;
  font-size: 0.67rem;
}

.weekly-task-web-route-notice > span:last-child > span {
  color: rgba(225, 216, 196, 0.68);
  font-size: 0.61rem;
}

.weekly-task-web-route-steps {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 2px 0 8px;
}

.weekly-task-web-route-empty {
  width: 100%;
  padding: 12px 13px;
  border-left: 2px solid rgba(199, 158, 79, 0.38);
  background: rgba(194, 133, 35, 0.045);
  color: rgba(225, 216, 196, 0.68);
  font-size: 0.68rem;
  line-height: 1.45;
}

.weekly-task-web-route-stage {
  display: grid;
  gap: 6px;
}

.weekly-task-web-route-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  padding: 0 4px;
}

.weekly-task-web-route-stage-copy {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.weekly-task-web-route-stage-copy h3 {
  margin: 0;
  color: rgba(226, 218, 201, 0.68);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.weekly-task-web-route-stage.is-start h3 {
  color: #e4b95e;
}

.weekly-task-web-route-stage-copy span {
  color: rgba(218, 210, 192, 0.4);
  font-size: 0.61rem;
}

.weekly-task-web-route-stage-list {
  display: grid;
  gap: 6px;
}

.weekly-task-web-route-stage-list[hidden] {
  display: none;
}

.weekly-task-web-route-stage.is-later {
  padding-top: 5px;
  border-top: 1px solid rgba(189, 176, 146, 0.08);
}

.weekly-task-web-later-toggle,
.weekly-task-web-detail-toggle {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(207, 185, 137, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(232, 224, 208, 0.7);
  font-size: 0.61rem;
  font-weight: 750;
  cursor: pointer;
}

.weekly-task-web-detail-toggle {
  position: relative;
  padding-right: 27px;
}

.weekly-task-web-detail-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease, margin 140ms ease;
}

.weekly-task-web-detail-toggle[aria-expanded="true"]::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.weekly-task-web-later-toggle:hover,
.weekly-task-web-detail-toggle:hover {
  border-color: rgba(222, 181, 91, 0.35);
  background: rgba(190, 139, 42, 0.09);
  color: #efd08e;
}

.weekly-task-web-route-step {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid rgba(189, 180, 158, 0.11);
  border-radius: 7px;
  background: rgba(6, 9, 10, 0.24);
}

.weekly-task-web-route-step.is-primary {
  padding: 14px 15px;
  border-color: rgba(215, 167, 67, 0.28);
  border-left-width: 2px;
  background:
    linear-gradient(100deg, rgba(174, 121, 31, 0.1), transparent 42%),
    rgba(6, 9, 10, 0.28);
}

.weekly-task-web-route-order {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(218, 169, 74, 0.34);
  border-radius: 50%;
  background: rgba(178, 124, 35, 0.15);
  color: #e0b55f;
  font-size: 0.66rem;
  font-weight: 800;
}

.weekly-task-web-route-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.weekly-task-web-route-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weekly-task-web-route-heading h4 {
  overflow: hidden;
  margin: 0;
  color: #f1e6d2;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-route-place-select {
  width: 100%;
  min-width: 0;
  padding: 1px 22px 2px 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-overflow: ellipsis;
  color-scheme: dark;
}

.weekly-task-web-route-place-select:hover,
.weekly-task-web-route-place-select:focus-visible {
  border-bottom-color: rgba(226, 186, 99, 0.3);
  background: rgba(205, 162, 73, 0.06);
}

.weekly-task-web-route-place-select option {
  background: #151817;
  color: #f1e6d2;
}

.weekly-task-web-route-summary {
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(125px, 0.58fr) minmax(190px, 0.85fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0 2px;
  border-top: 1px solid rgba(189, 180, 158, 0.08);
}

.weekly-task-web-route-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: baseline;
  min-width: 0;
}

.weekly-task-web-route-focus small {
  color: rgba(218, 209, 190, 0.4);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.weekly-task-web-route-focus strong {
  overflow: hidden;
  color: #e8ddd0;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-route-focus > span {
  padding: 2px 6px;
  border: 1px solid rgba(213, 175, 94, 0.16);
  border-radius: 999px;
  color: rgba(230, 202, 143, 0.78);
  font-size: 0.57rem;
  white-space: nowrap;
}

.weekly-task-web-route-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weekly-task-web-route-time {
  display: grid;
  min-width: 0;
  place-items: center;
}

.weekly-task-web-route-time .weekly-task-web-route-metric,
.weekly-task-web-route-outcomes .weekly-task-web-route-metric {
  justify-content: center;
  padding-left: 9px;
}

.weekly-task-web-route-metric-copy {
  text-align: left;
}

.weekly-task-web-route-metric-secondary {
  display: block;
  margin-top: 2px;
  overflow: visible;
  color: rgba(202, 166, 223, 0.82);
  font-size: 0.54rem;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.weekly-task-web-route-outcomes .weekly-task-web-route-metric + .weekly-task-web-route-metric {
  border-left: 1px solid rgba(189, 180, 158, 0.1);
}

.weekly-task-web-route-task-list {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.weekly-task-web-route-task-list[hidden] {
  display: none;
}

.weekly-task-web-route-task {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(205, 93, 78, 0.1);
}

.weekly-task-web-route-task[data-type="delivery"] {
  border-bottom-color: rgba(231, 226, 214, 0.08);
}

.weekly-task-web-route-task-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.weekly-task-web-route-task-identity {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.weekly-task-web-route-task-identity span {
  color: rgba(223, 125, 114, 0.76);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-task-web-route-task[data-type="delivery"] .weekly-task-web-route-task-identity span {
  color: rgba(231, 226, 214, 0.64);
}

.weekly-task-web-route-task-identity strong {
  overflow: hidden;
  color: #df9a92;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-task-web-route-task[data-type="delivery"] .weekly-task-web-route-task-identity strong {
  color: #e9e3d8;
}

.weekly-task-web-route-task-meta {
  display: flex;
  gap: 9px;
  color: rgba(229, 220, 199, 0.7);
  font-size: 0.61rem;
  white-space: nowrap;
}

.weekly-task-web-route-completes {
  color: #e3bd63;
  font-weight: 800;
}

.weekly-task-web-route-completes.is-complete {
  color: #78cb88;
}

.weekly-task-web-route-task progress {
  width: calc(100% - 60px);
  height: 5px;
  margin-left: 60px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
}

.weekly-task-web-route-task progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.weekly-task-web-route-task progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #a84d47, #df7d72);
}

.weekly-task-web-route-task[data-type="delivery"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, #9a968d, #d7d1c5);
}

.weekly-task-web-coverage {
  max-width: none;
  margin: 12px 0 0;
  color: rgba(218, 210, 192, 0.38);
  font-size: 0.61rem;
  text-align: center;
}

@media (max-width: 1080px) {
  .weekly-task-web-task-columns {
    grid-template-columns: 1fr;
  }

  .weekly-task-web-route-summary {
    grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.55fr);
  }

  .weekly-task-web-route-outcomes {
    grid-column: 1 / -1;
  }

  .weekly-task-web-route-outcomes .weekly-task-web-route-metric {
    justify-content: center;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .weekly-task-web-results {
    padding: 8px;
  }

  .weekly-task-web-review-head,
  .weekly-task-web-route-toolbar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .weekly-task-web-review-head {
    flex-direction: column;
  }

  .weekly-task-web-totals {
    justify-items: start;
  }

  .weekly-task-web-totals-metrics {
    justify-content: flex-start;
  }

  .weekly-task-web-priority-control {
    justify-self: start;
  }

  .weekly-task-web-route-summary {
    grid-template-columns: 1fr;
  }

  .weekly-task-web-route-outcomes {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .weekly-task-web-results-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .weekly-task-web-task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weekly-task-web-route-step,
  .weekly-task-web-route-step.is-primary {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .weekly-task-web-route-heading {
    align-items: flex-start;
  }

  .weekly-task-web-route-focus {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .weekly-task-web-route-focus > span {
    grid-column: 2;
    justify-self: start;
  }

  .weekly-task-web-route-task-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .weekly-task-web-task-list {
    grid-template-columns: 1fr;
  }

  .weekly-task-web-route-outcomes {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .weekly-task-web-route-outcomes .weekly-task-web-route-metric + .weekly-task-web-route-metric {
    border-left: 0;
  }
}

.weekly-task-web-context-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 680px);
}

.weekly-task-web-team-toggle {
  display: flex !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px !important;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid rgba(211, 184, 124, 0.2);
  border-radius: 10px;
  background: rgba(8, 13, 14, 0.78);
  cursor: pointer;
  text-transform: none !important;
}

.weekly-task-web-team-toggle input {
  width: 17px !important;
  min-height: 17px !important;
  accent-color: #d6ab48;
}

.weekly-task-web-team-toggle > span { display: grid; gap: 1px; }
.weekly-task-web-team-toggle strong { color: #f1eadb; font-size: 0.72rem; }
.weekly-task-web-team-toggle small { color: rgba(222, 213, 194, 0.58); font-size: 0.64rem; }

.weekly-task-web-community-coverage {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(91, 174, 157, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(110deg, rgba(39, 91, 79, 0.13), transparent 52%),
    rgba(8, 14, 14, 0.56);
  color: rgba(218, 212, 197, 0.68);
  font-size: 0.67rem;
}

.weekly-task-web-community-coverage[hidden] { display: none; }

.weekly-task-web-coverage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weekly-task-web-coverage-header > strong {
  color: #ded4bc;
  font-size: 0.74rem;
}

.weekly-task-web-coverage-mode {
  padding: 2px 7px;
  border: 1px solid rgba(91, 174, 157, 0.28);
  border-radius: 999px;
  color: #87d2c0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.weekly-task-web-coverage-totals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.weekly-task-web-coverage-total {
  display: grid;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(143, 179, 168, 0.13);
  border-radius: 4px;
  background: rgba(5, 10, 10, 0.4);
}

.weekly-task-web-coverage-total > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: rgba(222, 216, 202, 0.58);
}

.weekly-task-web-coverage-total strong {
  color: #7ed0bc;
  font-size: 0.75rem;
}

.weekly-task-web-coverage-total.is-current {
  border-color: rgba(241, 196, 86, 0.34);
  background: rgba(163, 112, 24, 0.11);
}

.weekly-task-web-coverage-total.is-current > span > span,
.weekly-task-web-coverage-total.is-current strong {
  color: #f1c456;
  font-weight: 850;
}

.weekly-task-web-coverage-total progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
}

.weekly-task-web-coverage-total progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.06); }
.weekly-task-web-coverage-total progress::-webkit-progress-value { background: linear-gradient(90deg, #387d70, #78c9b5); }

.weekly-task-web-coverage-note {
  margin: 0;
  color: rgba(222, 214, 198, 0.5);
  font-size: 0.61rem;
  line-height: 1.4;
}

.weekly-task-web-route-title-group { display: grid; gap: 4px; min-width: 0; }
.weekly-task-web-hunt-mode {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid rgba(96, 181, 145, 0.3);
  border-radius: 999px;
  color: #80d2af;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.weekly-task-web-hunt-mode.is-team { border-color: rgba(91, 157, 218, 0.34); color: #8dc6ef; }

.weekly-task-web-route-guess {
  justify-self: start;
  color: #d9a858;
  font-size: 0.58rem;
  font-weight: 750;
}

.weekly-task-web-route-step.is-data-pending .weekly-task-web-route-time .weekly-task-web-route-metric strong {
  overflow: visible;
  color: #d9a858;
  font-size: 0.62rem;
  line-height: 1.18;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 900px) {
  .weekly-task-web-context-fields { grid-template-columns: 1fr; width: 100%; }
  .weekly-task-web-coverage-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .weekly-task-web-coverage-totals { grid-template-columns: 1fr; }
}