/* Prompt nav: the prompt, the faint completion, the output under it and the row of command links. Colours and type
   from --pmt-* then the shared --sx-* tokens. */
.pmt-bar { --_g: var(--pmt-ground, var(--sx-ground, #0B0F0D)); --_i: var(--pmt-ink, var(--sx-ink, #DCE8DF)); --_a: var(--pmt-accent, var(--sx-accent, #6EF2A0));
  --_mu: var(--pmt-mute, var(--sx-mute, color-mix(in srgb, var(--_i) 64%, var(--_g)))); --_f: var(--pmt-font, var(--sx-mono, ui-monospace, monospace)); }
.pmt-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pmt { position: relative; display: flex; align-items: center; gap: 1ch; min-width: 0; font: 400 14px/1 var(--_f); color: var(--_i); cursor: text; }
.pmt-ps1 { color: var(--_a); white-space: nowrap; }
.pmt-field { position: relative; flex: 1; min-width: 6ch; display: grid; }
.pmt-in { grid-area: 1 / 1; width: 100%; min-width: 0; padding: 6px 0; border: 0; background: none; color: var(--_i); font: inherit; caret-color: var(--_a); outline: none; }
.pmt-in::placeholder { color: var(--_mu); opacity: 1; }
/* The completion sits right after what is typed: the field's own text measured in characters (a monospace face). */
.pmt-ghost { grid-area: 1 / 1; align-self: center; padding-left: calc(var(--pmt-len, 0) * 1ch); color: var(--_mu); white-space: pre; pointer-events: none; overflow: hidden; }
.pmt:focus-within .pmt-ps1 { text-shadow: none; }
.pmt-links { display: flex; gap: 0 2ch; align-items: center; font: 400 14px/1 var(--_f); }
.pmt-links a { color: var(--_i); text-decoration: none; padding: 8px 0; text-transform: lowercase; }
.pmt-links a::before { content: "./"; color: var(--_mu); }
.pmt-links a:hover, .pmt-links a[aria-current] { color: var(--_a); }
.pmt-links a:focus-visible, .pmt-cmd:focus-visible { outline: 1px solid var(--_a); outline-offset: 3px; }
.pmt-out { position: absolute; z-index: 5; left: 0; top: calc(100% + 1px); min-width: min(440px, 100%); max-width: calc(100vw - 32px); padding: 12px 2ch 14px; box-sizing: border-box;
  background: var(--_g); color: var(--_i); border: 1px solid color-mix(in srgb, var(--_i) 22%, var(--_g)); font: 400 14px/1.6 var(--_f); }
.pmt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 3ch; }
.pmt-list li { display: contents; }
.pmt-cmd { padding: 2px 0; border: 0; background: none; font: inherit; color: var(--_a); text-align: left; text-decoration: none; cursor: pointer; }
.pmt-cmd:hover { text-decoration: underline; text-underline-offset: 4px; }
.pmt-about { color: var(--_mu); }
.pmt-err { margin: 0; color: var(--_i); }