/* Task control center layout -- Phase 2 of the redesign.
   Pairs with task-control-layout.js, which sorts the task page's sections
   into two columns. The grid on .detail-body still sets the two tracks;
   everything here is about how each column packs internally. */

.task-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; align-self: start; }

/* Each column packs independently, so a tall card on one side no longer
   leaves a dead row beside it the way grid auto-placement did. */
.task-column > * { align-self: stretch; margin: 0; }

/* #payFairnessSection is a standing host that is empty most of the time.
   Collapse empty hosts so they don't spend a gap. */
.task-column > *:empty { display: none; }

/* A section nobody has assigned a column yet still renders -- it just
   spans both tracks below the columns instead of breaking the grid. */
.admin-detail-modal .detail-body > *:not(.task-column) { grid-column: 1 / -1; }

/* The entrance and float animations were written for individual cards as
   direct children of .detail-body. Move them down a level so the cards
   still animate and the columns themselves stay put -- a whole column
   drifting reads as a layout bug. */
.admin-detail-modal .detail-body > .task-column { animation: none; }
.admin-detail-modal .task-column > * { animation: cc-rise .45s cubic-bezier(.16, 1, .3, 1) backwards, cc-float 6.5s ease-in-out infinite; animation-delay: 0s, .7s; }
.admin-detail-modal .task-column > *:nth-child(2) { animation-delay: .06s, 1.4s; }
.admin-detail-modal .task-column > *:nth-child(3) { animation-delay: .12s, 2.6s; }
.admin-detail-modal .task-column > *:nth-child(4) { animation-delay: .18s, 3.5s; }

@media (prefers-reduced-motion: reduce) {
  .admin-detail-modal .task-column > * { animation: none; }
}

/* Task settings: the controls that used to share the brief's card. */
.task-settings-section .detail-controls { margin-top: 4px; }
.task-settings-section .detail-controls label:first-child { margin-top: 10px; }

/* For anyone who is not an owner, admin or manager these fields are never
   sent to the server, so the values are shown instead of controls that
   discard the edit. */
.task-settings-limited .detail-controls [data-task-setting="manager"] { display: none; }
.task-settings-readonly[hidden] { display: none; }
.task-settings-readonly { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; border: 1px solid #eeedf4; border-radius: 10px; overflow: hidden; background: #eeedf4; }
.task-settings-readonly-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 11px; background: #fff; }
.task-settings-readonly-row span { color: #8a899b; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.task-settings-readonly-row strong { color: #3e3947; font-size: 11px; font-weight: 700; text-align: right; }

@media (max-width: 900px) {
  /* .detail-body collapses to a single track here, so the reference column
     falls in below the work column -- brief and delivery first, reference
     after, which is the order someone reads on a tablet anyway. */
  .task-column { gap: 17px; }
}

/* Focused control-center composition. The main column is the work story;
   the rail is the small set of facts an agent checks repeatedly. */
.admin-detail-modal .detail-body {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  align-items: start;
}

.admin-detail-modal #taskTopRow:empty { display: none; }
.admin-detail-modal #taskTopRow { margin: 0; }

.task-required-action-section {
  border-color: #dcd8ff;
  background: linear-gradient(135deg, #fbfaff, #f4f1ff);
}
.task-required-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task-required-action-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-help-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid #d9d4f7;
  border-radius: 50%;
  background: #fff;
  color: #6557e9;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.task-help-toggle:hover,
.task-help-toggle[aria-expanded="true"] {
  background: #6557e9;
  color: #fff;
  border-color: #6557e9;
}
.task-control-help {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #e2deef;
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  color: #5d5677;
  font-size: 11px;
  line-height: 1.5;
}
.task-control-help.hidden {
  display: none;
}
.task-required-action-section .detail-copy {
  color: #423b68;
  font-weight: 700;
  margin-bottom: 0;
}
.task-action-status {
  color: #6557e9;
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
  white-space: nowrap;
}
.task-overdue-alert {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 10px;
  padding: 8px 12px;
  border: 1px solid #f3c6b6;
  border-radius: 10px;
  background: #fff2ec;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
}
.task-overdue-alert:before { content: "!"; display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #e0684f; color: #fff; font-size: 10px; }
.task-overdue-alert.hidden { display: none; }

.task-settings-section .detail-controls { margin-top: 6px; }
.task-settings-section .detail-controls label:first-child { margin-top: 8px; }
.task-settings-section .task-next-action-field input { min-height: 42px; }
.task-setting-hidden { display: none !important; }
.task-settings-section #saveAdminUpdate { width: 100%; justify-content: center; }

/* The header owns the next-step decision. Keep the old completion control in
   the DOM because task-deliverables.js uses it as the guarded completion
   path, but remove it from the visual action row. Phase completion is likewise
   invoked by the single header action after the delivery check. */
.admin-detail-modal .task-legacy-complete,
.admin-detail-modal [data-complete-phase] { display: none !important; }
.task-primary-action {
  min-width: 156px;
  justify-content: center;
  margin-left: 12px;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(101, 87, 233, .2);
}
.task-primary-action:disabled {
  cursor: not-allowed;
  color: #827d9d;
  border-color: #ddd9ef;
  background: #f1eff8;
  box-shadow: none;
}
.task-primary-action[data-task-primary-action="waiting"] {
  min-width: 174px;
}
/* One-shot pulse the moment a task flips to complete -- see renderPrimaryAction. */
.task-primary-action.task-primary-action-celebrate {
  animation: task-complete-pulse .55s cubic-bezier(.2, .8, .3, 1);
}
@keyframes task-complete-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(38, 150, 111, .14); }
  100% { transform: scale(1); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .task-primary-action.task-primary-action-celebrate { animation: none; }
}

/* Saving without changing state is still useful, but it should not compete
   with the next-step action in the delivery card. */
#taskDeliverySaveSecondaryBody .delivery-save-row {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#taskDeliverySaveSecondaryBody .delivery-save-row button { width: 100%; justify-content: center; margin-top: 0; }
#taskDeliverySaveSecondaryBody .delivery-save-status { display: block; margin-top: 7px; }

/* The menu is intentionally secondary: it is available at the task header,
   but it never adds a tall admin card to the initial reading flow. */
.task-more-actions {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  z-index: 20;
}
.task-more-actions.hidden { display: none; }
.task-more-actions-trigger {
  margin: 0;
  white-space: nowrap;
  border-color: #ddd9ef;
  color: #5d5677;
  background: #fff;
  box-shadow: none;
}
.task-more-actions-trigger span {
  margin-left: 5px;
  letter-spacing: .08em;
}
.task-more-actions-menu {
  position: fixed;
  top: 140px;
  right: 24px;
  width: min(400px, calc(100vw - 36px));
  max-height: min(72vh, 660px);
  overflow: auto;
  padding: 9px;
  border: 1px solid #e2deef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 60px rgba(50, 42, 111, .2);
}
.task-more-actions-menu.hidden { display: none; }
.task-more-actions-section {
  padding: 10px;
  border: 1px solid #eeebf6;
  border-radius: 10px;
  background: #fcfbff;
}
.task-more-actions-section + .task-more-actions-section { margin-top: 8px; }
.task-more-actions-section-heading { margin-bottom: 8px; }
.task-more-actions-section-heading p {
  margin: 5px 0 0;
  color: #777287;
  font-size: 10px;
  line-height: 1.45;
}
.task-more-actions-section .detail-controls { margin-top: 0; }
.task-more-actions-section .detail-controls label,
.agent-release-form label {
  display: block;
  margin-top: 10px;
  color: #69687a;
  font-size: 11px;
  font-weight: 700;
}
.task-more-actions-section .detail-controls label:first-child,
.agent-release-form label:first-child { margin-top: 0; }
.task-more-actions-section .detail-controls input,
.task-more-actions-section .detail-controls select,
.task-more-actions-section .detail-controls textarea,
.agent-release-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #e3e2eb;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  font-size: 11px;
}
.task-more-actions-section .detail-controls select[multiple] {
  min-height: 92px;
}
.task-more-actions-section .detail-controls textarea,
.agent-release-form textarea {
  min-height: 70px;
  resize: vertical;
}
.task-more-actions-section .outline-button {
  width: 100%;
  justify-content: center;
  margin-top: 11px;
}
.task-more-actions-menu #requestDeletionControl {
  margin: 0;
  padding: 10px;
  border: 1px solid #f0dede;
  background: #fffafa;
}
.task-more-actions-menu #requestDeletionControl .detail-copy {
  margin-bottom: 10px;
}

@media (max-width: 1050px) {
  .admin-detail-modal .detail-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .task-primary-action { width: 100%; margin: 14px 0 0; }
  .task-more-actions {
    margin-top: 14px;
    margin-left: 0;
  }
  .task-more-actions-menu {
    position: fixed;
    top: 76px;
    right: 18px;
    width: min(400px, calc(100vw - 36px));
    max-height: calc(100vh - 96px);
  }
  .task-required-action-heading { align-items: flex-start; }
  .task-action-status { text-align: right; }
}