/* Department sliders: work comes in, agents do it, a person approves, it goes out. */
.dflow { display: grid; gap: 10px; }
.df-row { display: grid; gap: 6px; }
.df-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.df-items { display: flex; flex-wrap: wrap; gap: 6px; }
.df-item { padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.df-row.to .df-item { border-color: var(--gold-line); background: var(--gold-bg); }
.df-work { position: relative; display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: #0f1d3d; color: #e6ebf5; }
.df-work::before, .df-work::after { content: ''; position: absolute; left: 30px; width: 2px; height: 10px; background: var(--line); }
.df-work::before { top: -10px; }
.df-work::after { bottom: -10px; }
.df-duty { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.df-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); justify-self: center; }
.df-duty.agent .df-mark { animation: busy 2.4s ease-in-out infinite; }
.df-duty.approve .df-mark { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--gold); }
.df-t { font-size: 16px; font-weight: 600; }
.df-who { font-family: var(--mono); font-size: 11.5px; color: #a4b0c8; }
.df-duty.approve .df-who { color: var(--gold-soft); }
@keyframes busy { 50% { transform: scale(.65); opacity: .6; } }
.dpt-act { margin-top: 20px; }
.dpt-start { display: flex; gap: 8px; }
.dpt-start input { flex: 1; min-width: 0; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 13px 18px; font: inherit; font-size: 16px; }
.dpt-start input:focus { border-color: var(--gold); outline: none; }
.dpt-ask { min-height: 44px; }
.dpt-moments { display: grid; gap: 6px; margin-top: 22px; }
.dpt-moment { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.dpt-moment .when { font-family: var(--mono); font-size: 12px; color: var(--gold-ink); }
.dpt-key { margin: 22px 0 0; }
@media (max-width: 760px) { .dpt-start { flex-direction: column; } .df-who { display: none; } }

/* the department cards on the page open their slider */
.dept.open-able { cursor: pointer; transition: transform .15s, border-color .15s; }
.dept.open-able:hover, .dept.open-able:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.dept.open-able .open { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--navy); }
.dpt-k { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-right: 12px; }
.dpt-k .key { margin-left: 0; }