/* Worker page. Builds on /site.css (tokens, .tok rows, buttons, .prompt, .status). */
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.hint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }

.wk-faq { display: grid; gap: 6px; }
.wk-faq details { border: 1px solid var(--slate-lo); background: rgba(13, 10, 19, 0.6); padding: 0 10px; }
.wk-faq summary { cursor: pointer; padding: 8px 0; font-weight: 800; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lavender); list-style: none; }
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::before { content: "+ "; color: var(--neon); font-family: var(--mono); }
.wk-faq details[open] summary::before { content: "- "; }
.wk-faq summary:hover { color: var(--amber); }
.wk-faq p, .wk-faq ul, .wk-faq ol { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; }
.wk-faq ul, .wk-faq ol { padding-left: 18px; }
.wk-faq li { margin: 3px 0; }
.wk-faq .mono { color: var(--lavender); }

/* step 1 */
.wk-code { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--slate); background: var(--ink); min-width: 0; }
.wk-code .xrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wk-code .field.code { width: 130px; text-transform: uppercase; letter-spacing: 0.12em; }
.wk-code .field.addr { flex: 1 1 280px; min-width: 0; font-size: 11px; }
.wk-code b.mono { color: var(--amber); font-weight: 600; }

/* rows: facts get the full width, the buttons go underneath */
#mine .tok { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
#mine .tok .act { grid-column: 1 / -1; justify-content: flex-start; margin-top: 10px; }
.tok .agents { display: grid; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--muted); min-width: 0; }
.tok .agents .aline { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.tok .agents .aid { font-family: var(--mono); color: var(--lavender); }
.tok .agents .ok { color: var(--ok); }
.tok .agents .warn { color: var(--amber); }
.tok .agents .note { color: var(--muted); font-style: italic; }
.tok .agents a { color: var(--lavender); overflow-wrap: anywhere; }
.tok .agents a:hover { color: var(--amber); }
.tok .agents .uri { font-family: var(--mono); min-width: 0; }

/* step 3: the action panel */
.wk-act { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--neon); background: var(--ink);
  box-shadow: 0 0 14px rgba(176, 38, 255, 0.2); min-width: 0; }
.wk-act .xtitle { font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lavender); margin: 0; }
.wk-act .xrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wk-act .field.addr { flex: 1 1 280px; min-width: 0; font-size: 11px; width: auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 12px; min-width: 0; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.kv dd { margin: 0; color: var(--lavender); overflow-wrap: anywhere; min-width: 0; line-height: 1.45; }
.kv dd.mono { font-size: 11px; }
.kv dd.warn { color: var(--amber); }
.kv dd small { color: var(--muted); font-size: 11px; font-family: var(--font); }
.warnbox { border: 1px solid var(--red); background: rgba(236, 48, 19, 0.08); padding: 10px; font-size: 12px;
  line-height: 1.5; color: var(--lavender); }
.warnbox b { color: var(--red); }
.warnbox ul { margin: 6px 0 0; padding-left: 18px; }
.wk-hash { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--slate); min-width: 0; }
.wk-hash .lbl { font-weight: 800; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.wk-hash code { flex: 1 1 260px; min-width: 0; font-size: 12px; color: var(--amber); }
#act-pair { display: grid; gap: 8px; }
#act-pair .prompt pre { font-size: 11px; max-height: 160px; overflow: auto; }
.wk-keyid { font-size: 12px; line-height: 1.5; color: var(--lavender); }
.wk-act .field.keyid { width: 220px; max-width: 100%; font-family: var(--mono); letter-spacing: 0.08em; text-transform: lowercase; }
#act-keyid-info.ok { color: var(--ok); }
#act-keyid-info.err { color: var(--amber); }
.wk-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--lavender); cursor: pointer; }
.wk-confirm input { flex: none; margin: 3px 0 0; accent-color: var(--neon); }

/* statement */
#act-out { display: grid; gap: 10px; min-width: 0; }
.wk-tablewrap { overflow-x: auto; border: 1px solid var(--slate-lo); }
.wk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wk-table th { text-align: left; font-weight: 800; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--slate); white-space: nowrap; }
.wk-table td { padding: 6px 8px; border-bottom: 1px solid var(--slate-lo); color: var(--lavender); vertical-align: top; }
.wk-table td.num { text-align: right; white-space: nowrap; }
.wk-table td:first-child { white-space: nowrap; }
.wk-table a { color: var(--lavender); }
.wk-table a:hover { color: var(--amber); }
.lookup .hint { font-size: 11px; }

@media (max-width: 520px) {
  #mine .tok { grid-template-columns: 52px minmax(0, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 6px; }
  .wk-act .xrow .btn { flex: 1 1 auto; }
}