/* Action receipts: calm, readable feedback that belongs to the study desk. */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #426950;outline-offset:3px}
.alert{color:#725125}.button.danger{color:#91422e}.pill{color:#4d6342}
@media(max-width:650px){.workspace{padding-bottom:calc(82px + env(safe-area-inset-bottom))}button,a,input,select,textarea{scroll-margin-bottom:calc(105px + env(safe-area-inset-bottom))}}
:root {
  --feedback-paper: #fcfbf7;
  --feedback-ink: #233f35;
  --feedback-secondary: #526156;
  --feedback-success: #28513c;
  --feedback-info: #365c68;
  --feedback-warning: #785b25;
  --feedback-error: #9a4638;
  --feedback-settle: cubic-bezier(.16, 1, .3, 1);
}

#toast {
  --feedback-accent: var(--feedback-info);
  --feedback-tint: #edf2f2;
  position: fixed;
  inset: max(24px, env(safe-area-inset-top)) 24px auto auto;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: min(390px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 17px 19px 17px 16px;
  border: 1px solid #c4cec2;
  border-left: 3px solid var(--feedback-accent);
  border-radius: 12px;
  background: var(--feedback-paper);
  color: var(--feedback-ink);
  box-shadow: 0 3px 8px #203a2f08, 0 14px 36px #203a2f14;
  text-align: left;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  z-index: 100;
  transition: opacity 140ms var(--feedback-settle), transform 180ms var(--feedback-settle);
}

#toast.visible {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 160ms, 240ms;
}

#toast[data-type="success"] {
  --feedback-accent: var(--feedback-success);
  --feedback-tint: #eaf1e7;
}

#toast[data-type="warning"] {
  --feedback-accent: var(--feedback-warning);
  --feedback-tint: #f5efdf;
}

#toast[data-type="error"] {
  --feedback-accent: var(--feedback-error);
  --feedback-tint: #f8ece6;
}

#toast .toast-mark {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--feedback-accent);
  border-radius: 10px;
  background: var(--feedback-tint);
  color: var(--feedback-accent);
}

#toast .toast-mark svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

#toast .toast-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

#toast .toast-title {
  display: block;
  margin: 0 0 3px;
  color: var(--feedback-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

#toast .toast-detail {
  display: block;
  color: var(--feedback-secondary);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

#completion-feedback {
  position: fixed;
  top: max(104px, calc(20px + env(safe-area-inset-top)));
  left: calc(50% + 114px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 40px);
  padding: 11px 18px 11px 12px;
  border: 1px solid #aabc9f;
  border-radius: 100px;
  background: #234635;
  color: #faf7e9;
  box-shadow: 0 8px 24px #203a2f1a;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -5px) scale(.985);
  pointer-events: none;
  z-index: 95;
  transition: opacity 130ms var(--feedback-settle), transform 170ms var(--feedback-settle);
}

#completion-feedback.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-duration: 180ms, 280ms;
}

#completion-feedback > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #b6c8a4;
  border-radius: 50%;
  color: #e1d4a8;
}

#completion-feedback svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

#completion-feedback b {
  font-size: 13px;
  font-weight: 500;
}

#completion-feedback[data-kind="task"] {
  border-color: #b9a16c;
}

#completion-feedback[data-kind="task"] > span {
  border-color: #d8c48e;
  background: #d8c48e;
  color: #234635;
}

/* Scope these rules to the journey: the older help panel uses .collab-flow too. */
#ai-flow.collab-flow {
  display: block;
  margin: 20px 0;
  padding: 17px 17px 14px;
  border: 1px solid #c9d3c2;
  border-radius: 10px;
  background: #f2f5ed;
  color: var(--feedback-ink);
}

#ai-flow span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

#ai-flow .flow-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  color: #455b49;
  font-size: 11px;
  line-height: 1.6;
}

#ai-flow .flow-heading > b {
  color: #71582d;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#ai-flow .flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#ai-flow .flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  color: #52644f;
}

#ai-flow .flow-step::before {
  content: "";
  position: absolute;
  top: 12px;
  right: calc(100% + 4px);
  width: calc(100% - 20px);
  height: 1px;
  background: #85947e;
}

#ai-flow .flow-step:first-child::before {
  content: none;
}

#ai-flow .flow-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid #75846f;
  border-radius: 50%;
  background: #f2f5ed;
  color: #52644f;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#ai-flow .flow-dot svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

#ai-flow .flow-copy {
  display: block;
  min-width: 0;
}

#ai-flow .flow-copy b {
  display: block;
  color: #3f573f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

#ai-flow .flow-copy small {
  display: block;
  margin-top: 4px;
  color: #52644f;
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#ai-flow .flow-step[data-state="done"] .flow-dot {
  border-color: #28513c;
  background: #28513c;
  color: #fcfbf7;
}

#ai-flow .flow-step[data-state="current"] .flow-dot {
  border-color: #785b25;
  background: #e9dfc3;
  color: #5c461e;
  box-shadow: 0 0 0 3px #f2f5ed, 0 0 0 4px #9c8857;
}

#ai-flow .flow-step[data-state="current"] .flow-copy b {
  color: #654d24;
  font-weight: 600;
}

#ai-flow > p {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid #cad4c3;
  color: #465c46;
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  #completion-feedback { left: calc(50% + 89px); }
}

@media (max-width: 650px) {
  #toast {
    inset: auto 12px calc(91px + env(safe-area-inset-bottom)) 12px;
    gap: 12px;
    width: auto;
    max-width: none;
    padding: 15px 16px 15px 14px;
    border-radius: 11px;
    transform: translateY(5px);
  }

  #toast.visible { transform: translateY(0); }
  #toast .toast-title { font-size: 14px; }
  #toast .toast-detail { font-size: 12px; }

  #completion-feedback {
    top: calc(83px + env(safe-area-inset-top));
    left: 50%;
    padding: 9px 15px 9px 10px;
  }
}

@media (max-width: 440px) {
  #ai-flow.collab-flow { padding: 17px 16px 14px; }
  #ai-flow .flow-heading { margin-bottom: 16px; }
  #ai-flow .flow-steps { grid-template-columns: 1fr; gap: 15px; }
  #ai-flow .flow-step { flex-direction: row; align-items: flex-start; gap: 13px; }
  #ai-flow .flow-step::before {
    top: auto;
    bottom: calc(100% + 3px);
    right: auto;
    left: 12px;
    width: 1px;
    height: 9px;
  }
  #ai-flow .flow-copy { padding-top: 2px; }
  #ai-flow .flow-copy b { font-size: 13px; }
  #ai-flow .flow-copy small { margin-top: 2px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #toast,
  #toast.visible,
  #completion-feedback,
  #completion-feedback.visible {
    transition: none;
    animation: none;
  }

  #toast, #toast.visible { transform: none; }
  #completion-feedback, #completion-feedback.visible { transform: translateX(-50%); }
}

@media (forced-colors: active) {
  #toast, #completion-feedback, #ai-flow.collab-flow { border: 1px solid CanvasText; }
  #toast .toast-mark, #completion-feedback > span, #ai-flow .flow-dot { border: 1px solid currentColor; }
  #ai-flow .flow-step[data-state="current"] .flow-dot { outline: 2px solid Highlight; outline-offset: 2px; }
}