/* Hub: a three-column file manager in a terminal (ranger/yazi style).
   Colours: catppuccin-mocha, same as the hosts' theme. */

:root {
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --overlay0: #6c7086;
  --subtext0: #a6adc8;
  --text: #cdd6f4;
  --blue: #89b4fa;
  --green: #a6e3a1;
  --mauve: #cba6f7;
  --peach: #fab387;
  --red: #f38ba8;
  --yellow: #f9e2af;
  --font: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Author `display` rules would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--crust);
  color: var(--text);
  font: 15px/1.5 var(--font);
}

a { color: var(--blue); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.term {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  background: var(--base);
}

/* ---------------------------------------------------------------- bars */

.bar {
  display: flex;
  gap: 1ch;
  align-items: center;
  padding: 0.25rem 1ch;
  background: var(--mantle);
  white-space: nowrap;
  overflow: hidden;
}

.prompt { color: var(--green); font-weight: bold; }
.prompt:enabled:hover { text-decoration: underline; }
.prompt:disabled { cursor: default; }
.crumbs { color: var(--blue); overflow: hidden; text-overflow: ellipsis; }
.crumbs button:hover { text-decoration: underline; }

.bottom { color: var(--subtext0); }
.status { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pos { color: var(--overlay0); }
.help-button { color: var(--overlay0); padding: 0 0.5ch; }

.filter { color: var(--peach); }
.filter input {
  font: inherit;
  color: var(--text);
  background: var(--surface0);
  border: 0;
  outline: none;
  width: 18ch;
  padding: 0 0.5ch;
}

/* ---------------------------------------------------------------- columns */

.cols {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  min-height: 0;
}

.col {
  overflow-y: auto;
  padding: 0.25rem 0;
  border-right: 1px solid var(--surface0);
}
.col:last-child { border-right: 0; }
.parent { opacity: 0.6; }
.preview { padding: 0.25rem 2ch; }

.entries { list-style: none; margin: 0; padding: 0; }

.entry {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  padding: 0 1ch;
  cursor: pointer;
  user-select: none;
}
.entry .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .meta { color: var(--overlay0); white-space: nowrap; }

.kind-dir .name { color: var(--blue); font-weight: bold; }
.kind-service .name { color: var(--green); }
.kind-post .name { color: var(--text); }

.entry:hover { background: var(--surface0); }
.entry.sel { background: var(--blue); }
.entry.sel .name, .entry.sel .meta { color: var(--crust); }
.kind-service.sel { background: var(--green); }
.parent .entry.sel { background: var(--surface1); }
.parent .entry.sel .name { color: var(--text); }
.parent .entry.sel .meta { color: var(--subtext0); }

.preview h2 { margin: 0.25rem 0; color: var(--mauve); font-size: 1rem; }
.preview p { margin: 0.5rem 0; }
.preview .entries { margin-inline: -1ch; }
.dim { color: var(--overlay0); }
.err { color: var(--red); }
.desc { white-space: pre-line; }
.good { color: var(--green); }
.warn { color: var(--yellow); }
.bad { color: var(--red); }
.kind-link .name, .kind-article .name, .kind-note .name { color: var(--text); }
.preview h3 { margin: 0.75rem 0 0.25rem; color: var(--blue); font-size: 1rem; font-weight: normal; }
.note { margin: 0; padding-left: 2ch; }
.note li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.kind-status .name { color: var(--mauve); font-weight: bold; }
.kind-status.sel { background: var(--mauve); }
.kind-template .name, .kind-action .name { color: var(--peach); }
.kind-grant .name { color: var(--text); }
.reset-link { user-select: all; }
.preview a { overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 0 1ch; }
.tag { color: var(--peach); }
.status-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.status-list li { display: grid; grid-template-columns: 2ch 1fr auto; }
.status.err { color: var(--red); }
.linkbar { flex: 1; display: flex; }
.linkbar input { flex: 1; min-width: 20ch; }

/* ---------------------------------------------------------------- dashboard
   btop look: rounded boxes with the title set into the top border. */

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto 1fr;
  gap: 1.1rem 1ch;
  padding: 1rem 1ch 0.5rem;
  min-height: 0;
  overflow: auto;
  font-size: 14px;
}

.box {
  position: relative;
  border: 1px solid var(--box, var(--surface1));
  border-radius: 8px;
  padding: 0.6rem 1.5ch 0.4rem;
  min-width: 0;
}
.box-title {
  position: absolute;
  top: -0.8em;
  left: 1.5ch;
  margin: 0;
  padding: 0 1ch;
  background: var(--base);
  color: var(--box);
  font-size: inherit;
}
.box-title::before { content: "┤ "; color: var(--box, var(--surface1)); }
.box-title::after { content: " ├"; color: var(--box, var(--surface1)); }

.box-head { --box: var(--mauve); grid-column: 1 / -1; }
.box-group { --box: var(--blue); margin-bottom: 1.1rem; }
.box-group:last-child { margin-bottom: 0; }
.box-detail { --box: var(--peach); }

.head-row { display: flex; flex-wrap: wrap; gap: 0 3ch; }
.head-row .clock { color: var(--text); }
.head-row .keys { margin-left: auto; }

.dash-groups { min-width: 0; }
.row {
  display: grid;
  grid-template-columns: 2ch minmax(8ch, 1fr) auto 7ch 7ch 7ch;
  gap: 0 1.5ch;
  padding: 0 0.5ch;
  cursor: pointer;
  white-space: nowrap;
}
.row > :nth-child(n + 4) { text-align: right; }
.row .name { overflow: hidden; text-overflow: ellipsis; }
.row:hover { background: var(--surface0); }
.row.sel { background: var(--surface1); }
.row-head { cursor: default; }
.row-head:hover { background: none; }
.spark { letter-spacing: -0.05em; }

.graph { line-height: 1; white-space: pre; overflow: hidden; margin-bottom: 0.5rem; }
.graph-scale { font-size: 12px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 0 2ch; margin: 0.5rem 0; }
.stats dt { color: var(--overlay0); }
.stats dd { margin: 0; overflow-wrap: anywhere; }
.conditions { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- help */

.help {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(44ch, calc(100% - 2rem));
  height: fit-content;
  padding: 1rem 2ch;
  background: var(--mantle);
  border: 1px solid var(--mauve);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
}
.help[hidden] { display: none; }
.help h2 { margin: 0 0 0.5rem; color: var(--mauve); font-size: 1rem; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 2ch; margin: 0; }
.help dd { margin: 0; color: var(--subtext0); }
.help p { color: var(--overlay0); margin-bottom: 0; }

kbd {
  padding: 0 0.4ch;
  border: 1px solid var(--surface1);
  border-radius: 3px;
  color: var(--peach);
  font: inherit;
}

.noscript { padding: 1rem 2ch; max-width: 80ch; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 760px) {
  html, body { font-size: 14px; }
  .cols { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .parent { display: none; }
  .col { border-right: 0; }
  .current { border-bottom: 1px solid var(--surface0); }
  .entry { padding-block: 0.3rem; }
  .dashboard { grid-template-columns: 1fr; grid-template-rows: none; font-size: 12px; }
  .graph { font-size: 10px; }
  .row { grid-template-columns: 2ch minmax(6ch, 1fr) 6ch 6ch 6ch; }
  .row .spark, .row-head > :nth-child(3) { display: none; }
  .head-row .keys { display: none; }
}