/* ledger — no-frills */
:root {
  --ink: #e7e4d6; --ink-dim: #9a978a; --ink-mute: #5d5b53;
  --bg: #0a0a0b;  --bg-2: #131316; --bg-3: #1c1c20;
  --rule: #2a2a2e; --rule-2: #1a1a1d;
  --a: #9b8cff;    --a-2: #f0c674; --ok: #6ad48b; --bad: #e07a7a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { font: 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .8rem; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.left, .right { display: flex; align-items: center; gap: .6rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); }
.brand { font-weight: 600; letter-spacing: .04em; }
.sub { color: var(--ink-dim); font-size: .8rem; }
.ico {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule);
  border-radius: .5rem; width: 2.1rem; height: 2.1rem;
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ico:active { transform: translateY(1px); background: var(--bg-3); }
.grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 880px) { .grid { grid-template-columns: 22rem 1fr; } }
.col { padding: .9rem .9rem 6rem; }
.col-input { border-right: 1px solid var(--rule); }
form { display: flex; flex-direction: column; gap: .6rem; }
.row { display: flex; gap: .5rem; align-items: flex-end; }
.row .grow { flex: 1; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em; }
label small { font-size: .65rem; text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
input, select, textarea {
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: .4rem;
  padding: .5rem .6rem; font: inherit;
  text-transform: none; letter-spacing: 0;
}
textarea { resize: vertical; min-height: 6rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--a); outline-offset: 0; border-color: var(--a); }
button.primary {
  background: var(--a); color: #0a0a0b; border: 0; border-radius: .4rem;
  padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
}
button.primary:active { transform: translateY(1px); }
.search { display: flex; gap: .5rem; margin-bottom: .6rem; }
.search input { flex: 1; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.row-item {
  background: var(--bg-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: .4rem; padding: .6rem .7rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.row-item.k-note     { border-left-color: var(--a); }
.row-item.k-entity   { border-left-color: var(--a-2); }
.row-item.k-relation { border-left-color: var(--ok); }
.row-item.k-prompt   { border-left-color: var(--bad); }
.row-item .top { display: flex; gap: .5rem; align-items: baseline; }
.row-item .k { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); }
.row-item .when { color: var(--ink-mute); font-size: .7rem; margin-left: auto; }
.row-item .text { white-space: pre-wrap; word-break: break-word; }
.row-item .meta { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .72rem; color: var(--ink-dim); }
.row-item .meta .t { background: var(--bg-3); border: 1px solid var(--rule-2); border-radius: 999px; padding: .05rem .5rem; }
.row-item .meta .r { color: var(--a-2); }
.row-item .actions { display: flex; gap: .3rem; }
.row-item .actions button {
  background: transparent; color: var(--ink-mute); border: 1px solid var(--rule-2);
  border-radius: .3rem; padding: .15rem .4rem; font: inherit; font-size: .7rem; cursor: pointer;
}
.row-item .actions button:hover { color: var(--ink); }
.empty { color: var(--ink-mute); text-align: center; padding: 2rem 0; }
.foot { display: flex; gap: .5rem; align-items: center; padding: .5rem .8rem; border-top: 1px solid var(--rule); color: var(--ink-mute); font-size: .75rem; }
.foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--ink); }
.foot code { color: var(--a-2); }
dialog { background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule); border-radius: .5rem; padding: 1rem 1.2rem; max-width: 32rem; }
dialog h3 { margin: 0 0 .5rem; font-size: .9rem; }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; font-size: .8rem; }
dialog dt { color: var(--a-2); }
dialog dd { margin: 0; color: var(--ink-dim); }
dialog code { color: var(--a); }
::backdrop { background: rgba(0,0,0,0.5); }