/* ---------- the owner's Tether-bridge pages (owner-pages.js): Status, Routines, Needs you and Archived ---------- */

/* Needs you and Archived are the list's own top lines (LIST-TOP-ROWS, app.js listTopRow(), .cl-compact); Needs
   you's own icon keeps the warning tint its waiting dot wears everywhere else (CODE-CHIP-STATES) */
.code-needs-row .cl-compact-ic { color: var(--warn); }

/* the bridge pages themselves (#code-needs, #code-status, #code-routines, #code-archived): the Usage/Errors page
   shell (app.css .usage, .u-inner, .u-h1) holds the heading; .code-list is the column of groups under it */
.code-list { display: flex; flex-direction: column; gap: 22px; }

/* a group: its name and count, as the sidebar names its sections, then its rows (needs.css's own layout) */
.nd-group { display: flex; flex-direction: column; gap: 6px; }
.nd-head { display: flex; gap: 8px; align-items: baseline; margin: 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.nd-head .n { font-variant-numeric: tabular-nums; }
.nd-lead { margin: 0; color: var(--muted); font-size: 14.5px; }
.nd-empty { margin: 0; color: var(--muted); font-size: 14.5px; }
.nd-list { display: flex; flex-direction: column; margin: 0 -10px; }

/* a row: a dot, a name with where it's from, a line under it, and how long ago on the right */
.nd-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; width: 100%; min-width: 0; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; }
button.nd-row { cursor: pointer; }
button.nd-row:active { background: var(--selected); }
button.nd-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.nd-dot { display: grid; place-items: center; height: 21px; }
.nd-main { display: grid; gap: 2px; min-width: 0; }
.nd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.nd-where { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 400; }
.nd-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13.5px; }
.nd-time { padding-top: 2px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  button.nd-row:hover { background: var(--hover-2); }
}
@media (pointer: coarse) {
  .nd-row { min-height: 44px; }
}
/* a phone: the line is most of what's read there, so it wraps to a second line before it's cut; a row's time can
   run long on Routines ("Next … · Last run …"), so it drops to its own line under the name instead of squeezing
   it, as routines.css's own .rt-side does at its narrow width */
@media (max-width: 760px) {
  .nd-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .nd-row { grid-template-columns: 16px minmax(0, 1fr); }
  .nd-time { grid-column: 2; margin-top: 2px; }
}

/* a row's dot: waiting on you in --warn, working in --muted (breathing, as the Agents list's own run dot does),
   an unread reply in --link, a failure in --err, a shipped task in --add. Never color alone: each sits in a group
   already named by its heading (Waiting on you, Failed, Ready for review, Working, Shipped today). */
.nd-dot .st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; color: var(--muted); }
.nd-dot .st.ask { color: var(--warn); }
.nd-dot .st.run { animation: skpulse 1.2s ease-in-out infinite; }
.nd-dot .st.unread { color: var(--link); }
.nd-dot .st.failed { color: var(--err); }
.nd-dot .st.ship { color: var(--add); }
@media (prefers-reduced-motion: reduce) { .nd-dot .st.run { animation: none; } }