/* Independent browser acceptance client — deliberately plain, no framework. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #12100e; color: #efe6d8; font: 14px/1.6 -apple-system, "PingFang SC", serif; }
.top { display: flex; align-items: center; gap: 24px; padding: 12px 20px; border-bottom: 1px solid #3a2f24; }
.brand { display: flex; align-items: baseline; gap: 10px; font-size: 17px; }
.brand small { color: #6f6252; font-size: 11px; }
.tabs { margin-left: auto; display: flex; gap: 6px; }
.tab { background: #1d1814; color: #b9a98c; border: 1px solid #3a2f24; padding: 4px 12px; cursor: pointer; }
.tab.is-on { background: #2a2118; color: #f3d9ab; border-color: #7a5c33; }
.grid { display: grid; grid-template-columns: 260px 1fr 300px; gap: 18px; padding: 18px 20px; min-height: calc(100vh - 150px); }
h2 { font-size: 13px; letter-spacing: .12em; color: #d8b98a; margin: 18px 0 8px; font-weight: 600; }
h2 small { float: right; color: #6f6252; letter-spacing: 0; font-weight: 400; }
.card { border: 1px solid #3a2f24; border-left: 3px solid #8a6a3c; background: #181411; padding: 10px 12px; }
.card.muted { color: #8a7a63; border-left-color: #3a2f24; }
.right .card { border-left-color: #5f7f8f; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: #241d16; color: #e8d9bd; border: 1px solid #4a3a28; padding: 4px 10px; cursor: pointer; }
.chips button:hover { background: #33281d; }
/* Connection + login surface. The status line is load-bearing: over a socket, "did the
   subprotocol negotiate" is the difference between a working client and a silent one. */
.status { padding: 6px 20px; background: #16211a; color: #9fc9a8; font-size: 12px; border-bottom: 1px solid #2a3a2e; }
.status.is-error { background: #241416; color: #e08a7a; border-bottom-color: #4a2a2c; }
.login { display: flex; flex-direction: column; gap: 6px; }
.login input { background: #181411; border: 1px solid #4a3a28; color: #efe6d8; padding: 6px 8px; }
.login button { background: #2a2118; color: #efe6d8; border: 1px solid #5d472c; padding: 6px; cursor: pointer; }
.events { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.events li { border-left: 3px solid #8a6a3c; background: #181411; margin-bottom: 8px; padding: 8px 12px; }
.events li .k { color: #d8b98a; font-size: 11px; letter-spacing: .08em; }
.events li .t { color: #cfc3b0; }
.events li.refused, .event.refused { border-left-color: #a05252; }
.events li.success, .event.success { border-left-color: #6f9f6f; }
.events li.combat, .event.combat { border-left-color: #c9a227; }
/* Event cards are divs now (they carry data-kind/data-seq for tests), so they need the
   same visual treatment the li rules gave them. */
.event { border-left: 3px solid #8a6a3c; background: #181411; margin-bottom: 8px; padding: 8px 12px; }
.event-head { color: #d8b98a; font-size: 11px; letter-spacing: .08em; }
.event-body { color: #cfc3b0; }
.chip.npc { border-color: #7a5c33; color: #f3d9ab; }
.chip.item { border-color: #4a6a5a; color: #a8d0bc; }
.bottom { border-top: 1px solid #3a2f24; padding: 10px 20px 18px; }
.bottom form { display: flex; gap: 8px; margin-top: 8px; }
#cmd { flex: 1; background: #181411; border: 1px solid #4a3a28; color: #efe6d8; padding: 8px 10px; }
#cmd-form button { background: #2a2118; color: #efe6d8; border: 1px solid #5d472c; padding: 8px 16px; cursor: pointer; }
.result { margin-top: 8px; min-height: 20px; color: #b9a98c; font-size: 13px; }
.result.refused { color: #e08a7a; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
dt { color: #8a7a63; }
dd { margin: 0; }