/* === agent c5: visit sync states, verified coverage, known facts in forms, hand-off sweep === */

/* The quiet sync marker on a board card: a small glyph, its words in the label / tooltip. */
.dx-card .s.sc5-sline { display: flex; align-items: center; gap: 4px; }
.dx-card .sc5-stext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc5-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; border-radius: 50%; color: var(--faint, #98a2b3); opacity: .75; }
.sc5-mark .ico, .sc5-mark svg { width: 11px; height: 11px; }
.sc5-mark.sc5-local { opacity: .45; }
.sc5-mark.sc5-queued { color: var(--link, #2f6fed); opacity: .85; }
.sc5-mark.sc5-confirmed { color: #0F7A3D; opacity: .9; }
.sc5-mark.sc5-failed { color: var(--bad-strong, #B42318); opacity: 1; }
.sc5-mark.sc5-conflict { color: #8A5A00; opacity: 1; }

/* The state line on the job sheet. Calm when the bridge is off. */
.sc5-sync { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
  background: rgb(16 22 43 / .035); font-size: var(--fs-sm); line-height: 1.4; }
.sc5-sync-i { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.sc5-sync-t { display: grid; gap: 1px; flex: 1 1 160px; min-width: 0; }
.sc5-sync-t b { font-weight: 650; color: var(--ink-2); }
.sc5-sync-t span { color: var(--muted); overflow-wrap: anywhere; }
.sc5-sync.sc5-queued .sc5-sync-i { color: var(--link, #2f6fed); }
.sc5-sync.sc5-confirmed .sc5-sync-i, .sc5-sync.sc5-confirmed b { color: #0F7A3D; }
.sc5-sync.sc5-failed { background: rgb(220 38 38 / .07); }
.sc5-sync.sc5-failed .sc5-sync-i, .sc5-sync.sc5-failed b { color: var(--bad-strong, #B42318); }
.sc5-sync.sc5-conflict { background: rgb(var(--sg-gold-rgb, 252 181 55) / .16); }
.sc5-sync.sc5-conflict .sc5-sync-i, .sc5-sync.sc5-conflict b { color: #8A5A00; }
.sc5-choose { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
.sc5-retry { flex: none; }

/* Verified coverage (best fit, next best job) */
.sc5-stale { display: flex; align-items: center; gap: 6px; margin: 6px 0; padding: 7px 12px; border-radius: 12px; font-size: var(--fs-sm);
  color: #8A5A00; background: rgb(var(--sg-gold-rgb, 252 181 55) / .14); }
.sc5-okline { color: #0F7A3D; font-weight: 600; white-space: nowrap; }
.sc5-nbok { margin: 4px 0 8px; line-height: 1.45; }
.sc5-fit tr[data-state="no"] td { color: var(--muted); }
.dx-next-fit.sc5-unv p { margin: 4px 0 0; }

/* Known facts: read-only value, where it came from, Change */
.sc5-fact { min-width: 0; }
.sc5-fact .sc5-fact-l { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.sc5-fact-v { display: flex; align-items: baseline; gap: 8px; min-height: 34px; padding: 7px 12px; border-radius: var(--r-ctl, 12px);
  background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.sc5-fact-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--ink); }
.sc5-fact-edit { flex: none; font-size: var(--fs-sm); }
.sc5-fact-s { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.sc5-fact-s .ico, .sc5-fact-s svg { color: #0F7A3D; }
.sc5-need { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--r-pill, 999px); font-size: 11px; font-weight: 650; line-height: 18px;
  color: #8A5A00; background: rgb(var(--sg-gold-rgb, 252 181 55) / .22); }
.sc5-known { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.45;
  background: rgb(22 163 74 / .07); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .18); }
.sc5-known > .ico, .sc5-known > svg { color: #0F7A3D; flex: none; margin-top: 2px; }
.sc5-known b { font-weight: 650; }
.sc5-pick { margin: 4px 4px 0 0; font-size: var(--fs-sm); }
.sc5-jobfacts { margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: rgb(16 22 43 / .03); }
.sc5-jobfacts > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-height: 28px; }
.sc5-jobfacts > summary::-webkit-details-marker { display: none; }
.sc5-jobfacts > summary > span { min-width: 0; overflow-wrap: anywhere; }
.sc5-jobfacts[open] > summary { margin-bottom: 8px; }
.sc5-jobfacts .sc5-fact-s { margin-top: 1px; }

/* Suggest a verified time (Sunny on the visit sheet - rules only) */
.sc5-suggest { display: grid; gap: 8px; margin: 10px 0; }
.sc5-suggest-btn { justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.sc5-sunny { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--sg-gold-rgb, 252 181 55) / .6); }
.sc5-slots { display: grid; gap: 6px; }
.sc5-slots > p { margin: 0; }
.sc5-slot { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "d t c" "s s s"; align-items: baseline; gap: 2px 10px; width: 100%;
  text-align: left; padding: 9px 12px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink);
  background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .3); transition: transform .1s ease, box-shadow .15s ease; }
.sc5-slot:hover { box-shadow: inset 0 0 0 1.5px rgb(22 163 74 / .55); }
.sc5-slot:active { transform: scale(.985); }
.sc5-slot:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgb(47 111 237 / .35)); }
.sc5-slot b { grid-area: d; }
.sc5-slot > span:nth-of-type(1) { grid-area: t; font-variant-numeric: tabular-nums; }
.sc5-slot-c { grid-area: c; justify-self: end; color: var(--ink-2); font-weight: 600; }
.sc5-slot small { grid-area: s; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.sc5-none { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); background: rgb(16 22 43 / .04); }
.sc5-move { margin: 6px 0 0; }

/* Settings > Automations: the hand-off sweep row */
.sc5-sweep { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.sc5-sweep > span { flex: 1 1 280px; min-width: 0; }

@media (max-width: 520px) {
  .sc5-slot { grid-template-columns: auto 1fr; grid-template-areas: "d t" "c c" "s s"; }
  .sc5-slot-c { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sc5-slot { transition: none; } .sc5-slot:active { transform: none; } }