/* THE TRAIL LANGUAGE ON A PAGE (MANTRA_MANIFEST language-trail.md): near-black ground, sand ink,
   amber only for the one thing a panel does, a raised part for a choice, never amber for a state. */
:root {
  --ground: #0B0D10; --card: #16191D; --rule: #23272C; --raised: #2C323A; --outline: #2E343B;
  --sand: #F2DDB4; --dim: rgba(242, 221, 180, 0.55); --amber: #E8A64B; --red: #EF4444; --cyan: #22D3EE;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--sand); font: 15px/1.45 var(--mono); }
a { color: var(--amber); }
button, input, select, textarea { font: inherit; color: inherit; }
header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
header h1 { font-size: 16px; margin: 0; flex: 1; min-width: 160px; }
header .who { color: var(--dim); font-size: 13px; }
nav.tabs { display: flex; gap: 3px; padding: 3px; margin: 10px 16px 0; background: var(--card); border: 1px solid var(--outline); border-radius: 12px; overflow-x: auto; }
nav.tabs button { flex: 1; min-width: max-content; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); cursor: pointer; }
nav.tabs button.on { background: var(--raised); color: var(--sand); font-weight: 600; }
main { padding: 12px 16px 40px; max-width: 1200px; margin: 0 auto; }
section { display: none; } section.on { display: block; }
.card { background: var(--card); border-radius: 16px; padding: 14px; margin: 10px 0; }
.dim { color: var(--dim); } .small { font-size: 12px; } .red { color: var(--red); }
.action { background: var(--amber); color: var(--ground); border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 600; cursor: pointer; }
.action:disabled { background: var(--raised); color: var(--dim); cursor: default; }
.quiet { background: none; border: 0; color: var(--amber); cursor: pointer; padding: 8px 4px; }
.quiet.danger { color: var(--red); }
.choice { display: inline-flex; gap: 3px; padding: 3px; background: var(--card); border: 1px solid var(--outline); border-radius: 12px; }
.choice button { border: 0; background: transparent; color: var(--dim); padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.choice button.on { background: var(--raised); color: var(--sand); font-weight: 600; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; background: var(--ground); border: 1.5px solid var(--outline); border-radius: 10px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); }
label.field { display: block; margin: 10px 0; } label.field span { display: block; color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
#map { height: 62vh; min-height: 380px; border-radius: 16px; background: #1b1f24; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.person:last-child { border-bottom: 0; }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.tick { width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid var(--dim); flex: none; display: grid; place-items: center; font-size: 13px; }
.tick.on { background: var(--amber); border-color: var(--amber); color: var(--ground); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--dim); font-weight: 400; }
tr.pick { cursor: pointer; } tr.pick:hover td { background: #1c2026; }
.tree ul { list-style: none; padding-left: 18px; border-left: 1px solid var(--rule); margin: 4px 0 4px 6px; }
.tree li { margin: 6px 0; } .tree .who { cursor: pointer; } .tree .who:hover { color: var(--amber); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--sand); }
.leaflet-popup-content { font: 13px/1.4 var(--mono); }
.leaflet-control-layers { background: var(--card) !important; color: var(--sand) !important; border-radius: 12px !important; }
.login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }