/* Limbhand — a field log in a terminal. Moss ground (mid), pale ink, one amber accent.
   No header: the prompt is the first thing. The contract address lives in the status line at the bottom. */
:root {
  --moss: #5C6B4A; --moss-2: #52603F; --moss-3: #46533A; --edge: #7E8F68;
  --ink: #F1F5E4; --dim: #B9C7A6; --amber: #FFC24B; --amber-2: #E8B23F; --bark: #2E3A22;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --crt: "VT323", var(--mono);
  --dock: 74px;
}
* { box-sizing: border-box; }
html { background: var(--moss); }
body { margin: 0; background: var(--moss); color: var(--ink); font: 14px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
code, pre { font-family: var(--mono); }
.tk { font-style: normal; }

.shell { max-width: 1180px; margin: 0 auto; padding: 10px 12px calc(var(--dock) + 24px); }

/* ---- status line at the top: small, one line ---- */
.statline { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; color: var(--dim); font-size: 12px; letter-spacing: .02em; padding: 4px 2px 10px; }
.statk { color: var(--ink); font-family: var(--crt); font-size: 20px; line-height: 1; }
.statv { white-space: nowrap; }

/* ---- the prompt ---- */
.prompt { border: 1px dashed var(--edge); background: var(--moss-2); padding: 12px 12px 10px; }
.promptline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--crt); font-size: 24px; line-height: 1; }
.ps1 { color: var(--amber); }
.promptword { color: var(--dim); }
.plug { background: transparent; color: var(--ink); border: 1px solid var(--edge); padding: 4px 10px; font-family: var(--crt); font-size: 22px; line-height: 1; }
.plug[data-on="1"] { border-color: var(--amber); color: var(--amber); }
.limbrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 10px; }
.limbkey { background: var(--moss-3); color: var(--ink); border: 1px solid var(--edge); padding: 9px 6px; text-align: left; font-family: var(--crt); font-size: 22px; line-height: 1; letter-spacing: .02em; }
.limbkey[aria-pressed="true"] { background: var(--amber); color: var(--bark); border-color: var(--amber); }
.limbkey[data-top="1"]::after { content: " ◄"; color: var(--amber-2); }
.limbkey[aria-pressed="true"][data-top="1"]::after { color: var(--bark); }
.callrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calllab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--crt); font-size: 24px; line-height: 1; }
.callin { width: 5.5ch; background: var(--bark); color: var(--amber); border: 1px solid var(--edge); padding: 4px 6px; font: 18px/1.2 var(--mono); text-align: right; }
.callin:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.ante { color: var(--dim); font-size: 12px; margin-left: auto; }
.gokey { background: var(--amber); color: var(--bark); border: 0; padding: 10px 16px; font-family: var(--crt); font-size: 24px; line-height: 1; width: 100%; }
.gokey:disabled { opacity: .55; cursor: default; }
.promptnote { margin-top: 10px; color: var(--dim); font-size: 12.5px; min-height: 1.4em; }
.promptnote b { color: var(--amber); font-weight: 600; }

/* ---- two columns ---- */
.twocol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }

/* the tree */
.treepane { min-width: 0; }
.tree { margin: 0; padding: 12px 8px; background: var(--moss-3); border: 1px solid var(--edge); font-size: 12.5px; line-height: 1.45; overflow: hidden; white-space: pre; color: var(--ink); }
.tree .row { cursor: pointer; }
.tree .row:hover { background: rgba(255, 194, 75, .12); }
.tree .picked { color: var(--amber); }
.tree .top { color: var(--amber); font-weight: 600; }
.tree .dim { color: var(--dim); }
.tree .bark { color: var(--edge); }
.tapehead { margin: 16px 0 6px; color: var(--dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tape { border-top: 1px solid var(--edge); }
.tapeline { display: flex; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(126, 143, 104, .5); font-size: 12.5px; }
.tapeline .ts { color: var(--dim); white-space: nowrap; }
.tapeline .who { color: var(--amber); }
.tapeline.quiet { color: var(--dim); }

/* the field notes */
.notes { min-width: 0; display: grid; gap: 14px; align-content: start; }
.banner { margin: 0; font-size: 11px; line-height: 1.15; color: var(--amber); overflow: hidden; white-space: pre; }
.note { border: 1px solid var(--edge); background: var(--moss-2); padding: 12px; }
.notek { display: block; color: var(--dim); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.notev { display: block; color: var(--dim); font-size: 12.5px; }
.potnum { display: block; font-family: var(--crt); font-size: 44px; line-height: 1; margin: 6px 0 2px; color: var(--ink); }
.lead { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.lead b { color: var(--amber); font-weight: 600; }
.primerlist { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.primerlist li { margin: 5px 0; }
.primerlist b { color: var(--amber); font-weight: 600; }
.morelink { display: inline-block; margin-top: 8px; font-size: 12.5px; }
.receipt { margin: 8px 0 0; padding: 8px; background: var(--bark); color: var(--ink); font-size: 11.5px; line-height: 1.4; white-space: pre; overflow: hidden; }
.receipt .rk { color: var(--dim); }
.receipt .rv { color: var(--amber); }

/* other views */
.leaf { margin-top: 14px; }
.leafh { font-family: var(--crt); font-size: 34px; line-height: 1; margin: 6px 0 14px; }
.leafsub { font-family: var(--crt); font-size: 24px; line-height: 1; margin: 18px 0 6px; color: var(--amber); }
.leaf p { max-width: 70ch; font-size: 13.5px; }
.ledger { border: 1px solid var(--edge); background: var(--moss-3); padding: 8px; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; margin: 0; }
.ledger .rv { color: var(--amber); }
.downkey { background: var(--amber); color: var(--bark); border: 0; padding: 3px 8px; font: 12px var(--mono); }

/* the colophon */
.colophon { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--edge); color: var(--dim); font-size: 12px; }
.col { display: grid; gap: 2px; margin-bottom: 8px; }
.colk { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.colv { color: var(--ink); word-break: break-all; user-select: all; }
.collinks { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 6px; }
.collinks .nolink { display: none; }
.colnote { margin: 0; }

/* ---- the status line at the bottom: the contract address, always on screen ---- */
.addrline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); color: var(--bark);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k v" "keys keys"; gap: 2px 8px; align-items: center;
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border-top: 2px solid var(--amber); font-size: 11.5px; }
.addrk { grid-area: k; font-family: var(--crt); font-size: 20px; line-height: 1; color: var(--bark); }
.addrv { grid-area: v; min-width: 0; word-break: break-all; user-select: all; line-height: 1.25; color: var(--bark); }
.addrkeys { grid-area: keys; display: flex; gap: 8px; align-items: center; }
.addrcopy { background: var(--bark); color: var(--ink); border: 0; padding: 4px 12px; font: 12px var(--mono); }
.addrcopy[data-done="1"] { background: var(--amber); color: var(--bark); }
.addrgm, .addrhand { color: var(--bark); text-decoration: underline; font-size: 12px; }
.addrgm[data-off="1"] { visibility: hidden; }

/* ---- pick a wallet, notices ---- */
.hatch { position: fixed; inset: 0; z-index: 40; background: rgba(46, 58, 34, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hatchbox { width: min(420px, 100%); background: var(--moss-2); border: 1px solid var(--edge); padding: 14px; }
.hatchtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--crt); font-size: 24px; }
.hatchtop button { background: transparent; border: 0; color: var(--ink); font-size: 22px; }
.wellpick { display: grid; gap: 6px; }
.wellpick button { display: flex; align-items: center; gap: 10px; background: var(--moss-3); color: var(--ink); border: 1px solid var(--edge); padding: 10px; text-align: left; }
.wellpick img { width: 24px; height: 24px; }
.blip { position: fixed; left: 50%; bottom: calc(var(--dock) + 14px); transform: translateX(-50%); z-index: 50; background: var(--bark); color: var(--ink); padding: 8px 14px; font-size: 12.5px; border: 1px solid var(--amber); max-width: 92vw; }

/* ---- wider: one column still, more room ---- */
@media (min-width: 720px) {
  body { font-size: 15px; }
  .shell { padding: 16px 20px calc(var(--dock) + 30px); }
  .limbrow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gokey { width: auto; }
  .tree { font-size: 15px; padding: 14px 12px; }
  .banner { font-size: 13px; }
  .potnum { font-size: 56px; }
  .addrline { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k v keys"; font-size: 13px; padding: 9px 20px calc(9px + env(safe-area-inset-bottom)); }
  :root { --dock: 50px; }
}

/* ---- desktop: the tree and the prompt left, the notes as a second column ---- */
@media (min-width: 1000px) {
  .shell { padding: 20px 28px calc(var(--dock) + 36px); }
  .statk { font-size: 24px; }
  .prompt { padding: 16px 18px 14px; }
  .promptline, .calllab, .gokey { font-size: 28px; }
  .limbkey { font-size: 24px; padding: 11px 10px; }
  .twocol { grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; margin-top: 22px; }
  .tree { font-size: 17px; line-height: 1.5; padding: 18px 16px; }
  .banner { font-size: 12.5px; }
  .notes { position: sticky; top: 16px; }
  .potnum { font-size: 64px; }
}