/* The tone and mark names must mirror UI_TONES and UI_MARKS in contracts/contracts.json;
   the server's views send them and these selectors are their only readers. */

.st { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-ghost); flex: none; }
.st[data-tone="ok"]::before { background: var(--ok-solid); }
.st[data-tone="need"]::before, .st[data-tone="warn"]::before { background: var(--warn-solid); }
.st[data-tone="need"] { color: var(--amber); font-weight: 600; }
.st[data-tone="bad"]::before { background: var(--bad-solid); }
.st[data-tone="bad"] { color: var(--danger); }
.st[data-tone="run"]::before { background: var(--run); box-shadow: 0 0 0 3px var(--run-wash); }
.st[data-tone="run"] { color: var(--ink); }
.st.lg { font-size: 15px; font-weight: 600; color: var(--ink); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-ghost); flex: none; display: inline-block; }
.dot[data-tone="ok"] { background: var(--ok-solid); }
.dot[data-tone="need"], .dot[data-tone="warn"] { background: var(--warn-solid); }
.dot[data-tone="bad"] { background: var(--bad-solid); }
.dot[data-tone="run"] { background: var(--run); box-shadow: 0 0 0 3px var(--run-wash); }

@keyframes spin { to { transform: rotate(360deg); } }
.ico.spin { width: 16px; height: 16px; color: var(--run); animation: spin 1s linear infinite; flex: none; }
.ico.spin.lg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .ico.spin { animation: none; } }

.bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--run-wash); overflow: hidden; flex: none; }
.bar > span { display: block; height: 100%; background: var(--run); border-radius: 3px; }

.tcell { appearance: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); vertical-align: middle; line-height: 0; font-size: 0; flex: none; }
.tcell svg { display: block; flex: none; width: 24px; height: 24px; }
.tcell:hover { transform: scale(1.08); box-shadow: 0 0 0 4px var(--paper-2); }
.tcell[data-mark="done"] { color: var(--ok); }
.tcell[data-mark="partly"] { color: var(--amber); }
.tcell[data-mark="not"] { color: var(--danger); }
.tcell[data-mark="run"] { color: var(--run); cursor: default; }
.tcell[data-mark="none"] { color: var(--ink-ghost); cursor: default; }
.tcell[data-mark="wait"] { color: var(--ink-soft); cursor: default; }
.tcell[data-mark="none"]:hover, .tcell[data-mark="run"]:hover, .tcell[data-mark="wait"]:hover { transform: none; box-shadow: none; }
.tcell.mini { width: 18px; height: 18px; cursor: default; }
.tcell.mini svg { width: 18px; height: 18px; }
.tcell.mini:hover { transform: none; box-shadow: none; }
.tcell.big { width: 52px; height: 52px; cursor: default; }
.tcell.big svg { width: 48px; height: 48px; }
.tcell.big:hover { transform: none; box-shadow: none; }

.verdict { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.verdict .vi { width: 36px; height: 36px; display: grid; place-items: center; flex: none; color: var(--ink-soft); }
.verdict .vi svg { width: 34px; height: 34px; }
.verdict[data-tone="ok"] .vi { color: var(--ok); }
.verdict[data-tone="need"] .vi, .verdict[data-tone="warn"] .vi { color: var(--amber); }
.verdict[data-tone="bad"] .vi { color: var(--danger); }
.verdict[data-tone="run"] .vi { color: var(--run); }
.verdict .vt { font-weight: 700; font-size: 20px; letter-spacing: -.015em; line-height: 1.3; }
.verdict .vs { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }

.notice { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--paper-2); color: var(--ink); }
.notice .grow { color: var(--ink); }
.notice.warn { background: var(--amber-wash); }
.notice.bad { background: var(--danger-wash); }
.stale { opacity: .5; pointer-events: none; }
.live-bar { border-radius: 0; padding-left: 24px; flex: none; }
#page.out-of-date { opacity: .6; pointer-events: none; transition: opacity var(--dur) var(--ease); }