/* visit-updates (visit-updates.ejs). Every selector starts with .visit-updates; keyframes are named visit-updates-*.
   The pill tone is one custom property per tone; the timeline rail and dots share --visit-updates-line. */
.visit-updates {
    --visit-updates-line: #e3e6ea;
    --visit-updates-muted: #6c757d;
    --visit-updates-tone: var(--theme-primary);
    --visit-updates-tone-bg: rgba(var(--theme-primary-rgb), .10);
    display: block;
}
.visit-updates[hidden] { display: none; }

.visit-updates-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.visit-updates-caption { color: var(--visit-updates-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.visit-updates-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
    color: var(--visit-updates-tone); background: var(--visit-updates-tone-bg);
}
.visit-updates-pill:empty { display: none; }
.visit-updates .visit-updates--ok     { --visit-updates-tone: #146c43; --visit-updates-tone-bg: #f0faf4; }
.visit-updates .visit-updates--warn   { --visit-updates-tone: #997404; --visit-updates-tone-bg: #fffaeb; }
.visit-updates .visit-updates--danger { --visit-updates-tone: #b02a37; --visit-updates-tone-bg: #fdf2f4; }
.visit-updates .visit-updates--off    { --visit-updates-tone: #495057; --visit-updates-tone-bg: #f1f3f5; }

.visit-updates-list { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.visit-updates-list::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--visit-updates-line);
}
.visit-updates-dir { color: var(--visit-updates-muted); font-size: .75rem; margin: -4px 0 10px; }
.visit-updates-dir[hidden] { display: none; }
.visit-updates-dir::before { content: '↑'; font-weight: 700; margin-right: 5px; color: var(--theme-primary); }
/* The rail ends in an arrowhead at the newest step, and a small chevron sits on the rail between steps, so the
   order reads as one direction of travel: older at the bottom, newer at the top. */
.visit-updates-list--flow { padding-top: 8px; }
.visit-updates-list--flow::after {
    content: ''; position: absolute; left: 1px; top: -2px; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--theme-primary);
}
.visit-updates-list--flow .visit-updates-item:not(:last-child)::after {
    content: ''; position: absolute; left: -14px; bottom: 1px; width: 5px; height: 5px;
    border-top: 2px solid #9aa1a9; border-left: 2px solid #9aa1a9; transform: rotate(45deg);
}
.visit-updates-now {
    display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--theme-primary); background: rgba(var(--theme-primary-rgb), .12);
}
.visit-updates-item { position: relative; padding: 0 0 12px 8px; }
.visit-updates-item:last-child { padding-bottom: 0; }
.visit-updates-item::before {
    content: ''; position: absolute; left: -17px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid var(--visit-updates-line);
}
.visit-updates-item:first-child::before { border-color: var(--theme-primary); background: var(--theme-primary); }
.visit-updates-item--hold::before { border-color: #997404; }
.visit-updates-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.visit-updates-label { font-weight: 600; font-size: .9rem; }
.visit-updates-when { color: var(--visit-updates-muted); font-size: .8rem; white-space: nowrap; }
.visit-updates-meta { color: var(--visit-updates-muted); font-size: .8rem; margin-top: 2px; overflow-wrap: anywhere; }
.visit-updates-meta a { color: var(--theme-primary); }
.visit-updates-empty { color: var(--visit-updates-muted); font-size: .9rem; margin: 0; }