/* Kerminal's shared terminal interface. */
:root {
  color-scheme:dark;
  --bg:#0b100d; --panel:#141b16; --panel-2:#1c2820;
  --line:#304237; --line-2:#496254;
  --fg:#e6efe7; --dim:#a8b8aa; --dim-2:#829688;
  --green:#a7e28d; --blue:#89bbef; --cyan:#72d6d0;
  --red:#ef8d86; --yellow:#e5bd72; --orange:#e7a47b; --magenta:#d7a6e5;
  --white:#fff; --on:#0b100d; --accent-soft:#203829;
  --r:0px; --r-sm:0px; --r-xs:0px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
[hidden] { display:none !important; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-thumb { background:var(--line-2); }
*::-webkit-scrollbar-track { background:transparent; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:14px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow:hidden; }
::selection { color:var(--fg); background:#365640; }
a { color:var(--cyan); text-decoration:none; text-underline-offset:3px; }
a:hover { color:#a3edee; text-decoration:underline; }
button, input, textarea, select { font:inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.skip-link { position:fixed; top:8px; left:12px; z-index:50; padding:9px 14px;
  border-radius:var(--r-xs); color:var(--on); background:var(--green); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
code, kbd, pre { font-family:var(--mono); }
code { background:var(--panel-2); border:1px solid var(--line); border-radius:0;
  padding:.1em .38em; font-size:.87em; color:var(--cyan); }
pre { background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 16px; overflow-x:auto; margin:0; font-size:12.5px; line-height:1.75; color:var(--fg); }
pre code { background:none; border:0; padding:0; font-size:inherit; color:inherit; }

/* One scrolling region keeps the header and keyboard controls nearby. */
.term { position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg);
  height:100%; height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.term-bar { display:none; }
.term-menu { flex:none; display:flex; align-items:center; gap:24px; min-height:58px;
  padding:8px max(24px,calc((100vw - 1040px) / 2)); background:var(--panel); border-bottom:1px solid var(--line-2); }
.term-menu .brand { display:inline-flex; align-items:center; gap:9px; flex:none;
  color:var(--fg); font:650 16px/1.4 var(--mono); white-space:nowrap; }
.term-menu .brand:hover { text-decoration:none; color:var(--green); }
.brand-mark { display:inline-flex; justify-content:center; align-items:center; width:27px; height:27px;
  border-radius:0; background:var(--green); color:var(--on); font:700 13px var(--mono); padding-right:2px; }
.term-menu .cursor { display:none; }
.term-menu .tabs { margin-left:auto; display:flex; align-items:center; gap:6px; min-width:0; }
.term-menu .tabs a { display:flex; align-items:center; justify-content:center; padding:6px 12px;
  min-height:36px; color:var(--dim); border-radius:0; font:500 11px/1.5 var(--mono); white-space:nowrap; }
.term-menu .tabs a:hover { color:var(--fg); background:var(--panel-2); text-decoration:none; }
.term-menu .tabs a[aria-current] { background:var(--accent-soft); color:var(--green); box-shadow:inset 0 -2px var(--green); font-weight:600; }
.term-menu .tabs a.keyhit, .toplink.keyhit { background:var(--accent-soft); color:var(--green); }
.term-screen { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  position:relative; scroll-padding:24px; }
.wrap { max-width:1088px; margin:0 auto; padding:36px 24px 44px; }
.wrap.wide { max-width:1168px; }
.term-status { flex:none; display:flex; align-items:center; gap:12px; min-height:32px;
  padding:6px max(24px,calc((100vw - 1040px) / 2)); background:var(--panel); border-top:1px solid var(--line);
  font:10px/1.5 var(--mono); color:var(--dim); }
.term-status > span { display:flex; align-items:center; gap:7px; }
.term-status .st-brand { color:var(--green); font-weight:600; }
.term-status .grow { flex:1; }
.term-status .st-mode { color:var(--dim); }
.term-status a { color:var(--cyan); }
.term-status a:hover { color:var(--fg); }
.term-keys { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:3px 16px;
  padding:0 max(24px,calc((100vw - 1040px) / 2)) 5px; background:var(--panel); font:10px/1.5 var(--mono); color:var(--dim-2); }
.term-keys b { display:inline-block; color:var(--dim); font-family:var(--mono); font-size:9px;
  font-weight:500; border:1px solid var(--line); border-radius:3px; padding:0 3px; line-height:1.4; margin-right:3px; }
.term-keys .pct { margin-left:auto; font-family:var(--mono); font-size:9px; }
.tui-help-trigger { color:var(--dim-2); background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.tui-help-trigger:hover { color:var(--green); }

h1, h2, h3, h4 { font-family:var(--mono); color:var(--fg); }
h1 { font-size:34px; font-weight:600; line-height:1.2; margin:0 0 14px; }
h2 { font-size:18px; font-weight:600; line-height:1.35; margin:24px 0 12px; }
h3 { font-size:15px; font-weight:600; line-height:1.4; }
.screen-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin:0 0 12px; }
.screen-title h1 { margin:0; }
.screen-title .path { color:var(--dim-2); font:11px var(--mono); }
.eyebrow { color:var(--green); font:600 10px/1.5 var(--mono); text-transform:uppercase; margin:0 0 12px; }
.lead { color:var(--dim); font-size:14px; line-height:1.75; margin:0 0 22px; max-width:60em; }
.sub { color:var(--dim); margin:0 0 14px; font-size:13px; }
.muted { color:var(--dim); }
.hint { color:var(--dim-2); font-size:11.5px; line-height:1.65; margin:7px 0 0; }
.hl { background:var(--accent-soft); color:var(--green); }
.card { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.card > h3 { position:static; margin:0 0 16px; font-size:14px; color:var(--fg); }
.card p { margin:0; color:var(--dim); font-size:13px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid > *, .split > *, .stack > * { min-width:0; }
.split { display:grid; gap:18px; align-items:start; }
.split.two { grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); }
.split.side { grid-template-columns:230px minmax(0,1fr); }
.stack { display:grid; gap:18px; align-content:start; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; white-space:normal; text-align:center;
  font-family:var(--mono); font-weight:600; font-size:12px; min-height:40px; line-height:1.4;
  padding:10px 16px; border-radius:var(--r-xs); background:var(--green); color:var(--on); border:1px solid var(--green);
  transition:background .15s,border-color .15s; }
.btn:hover { text-decoration:none; background:#c4f3b0; border-color:#c4f3b0; color:var(--on); }
.btn:active { transform:translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { background:var(--panel-2); color:var(--dim-2); border-color:var(--line); cursor:default; pointer-events:none; }
.btn.ghost { background:var(--panel); color:var(--fg); border-color:var(--line); }
.btn.ghost:hover { background:var(--panel-2); color:var(--cyan); border-color:var(--cyan); }
.btn.blue { background:var(--blue); border-color:var(--blue); }
.btn.small { font-size:11.5px; padding:6px 11px; min-height:31px; }
.btnrow { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px; font-size:12.5px; }
.kv .k { color:var(--dim-2); white-space:nowrap; }
.kv .v { color:var(--fg); overflow-wrap:anywhere; }
.kv .v.g { color:var(--green); }
.kv .v.y { color:var(--yellow); }
.kv .v.c { color:var(--cyan); }

label { display:block; font-size:12px; font-weight:550; color:var(--fg); margin:18px 0 7px; }
input[type=text], input[type=email], input[type=search], textarea, select {
  width:100%; background:var(--panel); color:var(--fg); border:1px solid var(--line-2); border-radius:var(--r-xs);
  padding:10px 12px; font-family:var(--sans); font-size:13px; line-height:1.5; transition:border-color .15s; }
input::placeholder, textarea::placeholder { color:var(--dim-2); opacity:1; }
textarea { min-height:110px; resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:var(--green); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color:var(--red); }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tag { display:inline-flex; align-items:center; font-size:10.5px; font-weight:500; line-height:1.6;
  border:1px solid var(--line); border-radius:4px; padding:2px 7px; color:var(--dim); white-space:nowrap; background:var(--panel-2); }
.tag.bug { color:var(--red); background:#342321; border-color:#6b3c37; }
.tag.question, .tag.idea { color:var(--cyan); background:#193435; border-color:#356365; }
.tag.closed { color:var(--dim-2); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips button { font-family:var(--mono); font-size:12px; cursor:pointer; color:var(--dim);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xs); padding:6px 11px; }
.chips button:hover { color:var(--green); background:var(--accent-soft); border-color:var(--line-2); }
details > summary { cursor:pointer; list-style:none; }
details > summary::-webkit-details-marker { display:none; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th, td { text-align:left; padding:11px 12px; vertical-align:top; border-bottom:1px solid var(--line); }
th { background:var(--panel-2); color:var(--dim); font-weight:550; font-size:11.5px; }
tr:last-child td { border-bottom:0; }

.tui-help { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.72); }
.tui-help.on { display:flex; }
.tui-help .panel { width:380px; max-width:100%; max-height:85dvh; overflow:auto; background:var(--panel);
  border:1px solid var(--line-2); border-radius:var(--r); padding:24px; box-shadow:0 18px 64px #0008; }
.tui-help .hd { color:var(--fg); font-size:16px; font-weight:600; margin:0 0 18px; }
.tui-help dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:12px 22px; font-size:12px; }
.tui-help dt { color:var(--green); font-family:var(--mono); font-size:11px; white-space:nowrap; }
.tui-help dd { margin:0; color:var(--dim); }

@media (max-width:880px) {
  .grid, .split.two, .split.side { grid-template-columns:1fr; }
  .term-menu { gap:16px; }
  .term-menu .tabs a { padding:6px 9px; }
}
@media (pointer:coarse), (max-width:600px) {
  .btn, .btn.small, .chips button, .pkg button, .filebar .acts button, .filebar .acts a,
  .tree a.node, details.dir > summary { min-height:44px; }
  input[type=text], input[type=email], input[type=search], textarea, select { font-size:16px; }
  .tui-help-trigger { min-height:36px; padding:0 6px; }
  .term-menu .tabs a { min-height:44px; }
}
@media (max-width:600px) {
  h1 { font-size:27px; }
  .wrap, .wrap.wide { padding:26px 18px 32px; }
  .term-menu { flex-wrap:wrap; gap:8px; padding:13px 18px 0; min-height:0; }
  .term-menu .brand { font-size:16px; }
  .term-menu .tabs { width:100%; margin:0; gap:0; justify-content:space-between; }
  .term-menu .tabs a { flex:1; padding:6px 5px; font-size:11px; border-radius:0; }
  .term-status { padding:8px 18px 3px; gap:10px; font-size:10px; min-height:0; }
  .term-status .st-mode, .term-status .grow { display:none; }
  .term-status > span:last-child { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
  .term-keys { padding:0 12px 2px; gap:10px; }
  .term-keys > span:not(.pct) { display:none; }
  .term-keys .pct { font-size:9px; }
  .card { padding:20px; }
  .kv { gap:9px 14px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}