/* The staff job page: the timeline, options lists, and the customer link to copy. */

.te { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--text-m); }
.te time { font-family: var(--mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--muted); padding-top: 3px; text-transform: uppercase; }
.te .k { font-size: 12.5px; color: var(--muted); }
.te p { margin: 1px 0 0; }
details.te { display: block; }
.opts { margin: 4px 0 0; padding: 0; list-style: none; }
.opts li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.opts li span:last-child { font-family: var(--mono); font-stretch: 87.5%; white-space: nowrap; }

/* A link to copy, and the card that offers it once an estimate is sent. */
.staff .copy { display: flex; gap: 6px; }
.staff .copy.wrap { flex-wrap: wrap; }
.staff .copy.wrap .field { flex: 1 1 16em; min-width: 0; }
.staff .sent-link { background: var(--ok-wash); border-color: var(--ok); }

/* Timeline-style rows with their own columns: a person and their action, a task with its
   tick and due date, a lost reason with its settings. */
.te.split { grid-template-columns: 1fr auto; }
.te.task { grid-template-columns: auto 1fr auto; }
.te.lost-reason { grid-template-columns: 1fr auto auto auto auto; }

/* A map in a card: the customer's drawing on the lead, the service area in settings. */
.map-panel { height: 240px; border-radius: 6px; }
.map-panel.tall { height: 420px; }
.fence-map { display: grid; gap: 8px; }
.fence-corner { width: 18px; height: 18px; border: 3px solid #FFFFFF; border-radius: 50%; background: #3F98D4; box-shadow: 0 1px 4px rgb(0 0 0 / .5); cursor: grab; }
.area-corner { border-radius: 50%; background: #3F98D4; border: 2px solid #fff; box-shadow: 0 1px 3px #0008; }
.area-mid { border-radius: 50%; background: #fff; color: #24719F; font: 700 14px/18px sans-serif; text-align: center; box-shadow: 0 1px 3px #0008; }