/* Crosstalk account view. Served at /app.css; the page carries no inline style so the CSP can forbid it (#176). */
  :root { --bg:#fafafa; --fg:#1a1a1a; --mute:#6b6b6b; --line:#e2e2e2; --ok:#1a7f37; --bad:#b42318; --card:#fff; --accent:#2c5bd1; }
  @media (prefers-color-scheme: dark) { :root { --bg:#111; --fg:#eee; --mute:#9a9a9a; --line:#2a2a2a; --card:#181818; --accent:#7aa2ff; } }
  * { box-sizing:border-box }
  body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--fg) }
  header { display:flex; align-items:center; gap:16px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0 }
  header h1 { font-size:15px; margin:0 }
  nav a { margin-right:12px; color:var(--mute); text-decoration:none; cursor:pointer } nav a.on { color:var(--fg); font-weight:600 }
  #who { margin-left:auto; color:var(--mute); font-size:12px } #who b { color:var(--fg) } #who button { margin-left:8px }
  /* Which relay this is (#425): the host, and a badge when it is not production. */
  #env { color:var(--mute); font-size:12px; font:12px ui-monospace,Menlo,monospace }
  #env .badge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; font:600 11px system-ui,-apple-system,Segoe UI,sans-serif; text-transform:uppercase; letter-spacing:.03em; background:#b45309; color:#fff }
  main { padding:16px; max-width:1100px; margin:0 auto }
  table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line) }
  th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top } th { color:var(--mute); font-weight:600; font-size:12px }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bad); margin-right:6px } .dot.on { background:var(--ok) }
  /* Harness liveness (#465): about the harness, not the machine's link. */
  .dot.active { background:var(--ok) } .dot.idle { background:var(--mute) } .dot.offline { background:var(--bad) }
  .live { color:var(--mute); font-size:12px; margin-right:6px }
  tr.machine td { background:var(--bg); color:var(--fg); font-weight:600; padding-top:9px } tr.machine a { color:var(--fg); text-decoration:none } tr.machine a:hover { text-decoration:underline }
  td.acts { white-space:nowrap; text-align:right }
  tr.detail td { background:var(--bg) } tr.detail table { margin-top:6px }
  details.stale { margin-top:14px } details.stale summary { cursor:pointer; color:var(--mute); margin-bottom:6px } details.stale summary::marker { color:var(--mute) }
  button { font:inherit; padding:4px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer } button:hover { border-color:var(--accent) } button.danger { color:var(--bad) } button:disabled { opacity:.5; cursor:default }
  input, select { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg) }
  form.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 }
  .armed { white-space:nowrap } .armed .mute { margin-right:4px }
  tr.hit td { background:color-mix(in srgb, var(--accent) 18%, transparent) } .bad { color:var(--bad) } .ok { color:var(--ok) } form.row label select { margin:0 4px }
  main a { color:var(--accent) } .mute { color:var(--mute) } .err { color:var(--bad); margin:8px 0 } .card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:14px }
  code { font:12px ui-monospace,Menlo,monospace } pre { font:12px ui-monospace,Menlo,monospace; white-space:pre-wrap; margin:0 }
  h2 { font-size:15px; margin:18px 0 8px }
  /* Machines page (#467): a title row with its action, the two enrolment paths side by side, collapsed harness lists. */
  h2.bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap } h2.bar a { font-weight:400; font-size:13px; text-decoration:none }
  .enrol { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px } .enrol h3 { margin:0 0 4px; font-size:14px } .enrol .card { margin-bottom:14px }
  .enrol table { margin-top:10px } p.row { display:flex; gap:10px; align-items:center; margin:10px 0 0 }
  /* The download rows (#389): the checksum wraps rather than widening the table. */
  table.dl { margin-top:10px } table.dl .sha { word-break:break-all; color:var(--mute) } table.dl td.act a { white-space:nowrap }
  @media (max-width:720px) { table.dl .sha { display:inline-block; max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom } }
  td.nm { white-space:nowrap } td.act { text-align:right; white-space:nowrap }
  .tag { display:inline-block; margin-left:6px; padding:0 6px; border-radius:10px; font-size:11px; border:1px solid var(--line); color:var(--mute); vertical-align:1px } .tag.bad { color:var(--bad); border-color:var(--bad) }
  details summary { cursor:pointer; color:var(--mute) } details[open] summary { margin-bottom:4px }
  ul.hl { list-style:none; padding:0; margin:0; columns:2; column-gap:24px } ul.hl li { margin:2px 0; break-inside:avoid } ul.hl a { color:var(--fg); text-decoration:none } ul.hl a:hover { color:var(--accent) }
  .stale { opacity:.55 }
  .signin { max-width:420px; margin:80px auto }
  .token { font:13px ui-monospace,Menlo,monospace; word-break:break-all; padding:8px; background:var(--bg); border:1px dashed var(--line); border-radius:6px }
  ol.steps { padding-left:20px; margin:8px 0 } ol.steps li { margin:4px 0 }
  .signin a { color:var(--accent) }
  .warn { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--bad); border-radius:8px; padding:10px 14px; margin:0 0 14px }
  .plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:12px 0 }
  .plan { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px } .plan.on { border-color:var(--accent) }
  .plan h3 { margin:0 0 4px; font-size:15px } .plan .price { font-size:22px; font-weight:600 } .plan ul { padding-left:18px; margin:8px 0; color:var(--mute) } .plan li { margin:3px 0 }