/* Terminal styling for francoisrob.me.
   Palette: Catppuccin Mocha, expressed as oklch. */

:root {
  --bg: oklch(0.2429 0.0304 283.91);        /* base */
  --bg-dark: oklch(0.1828 0.0204 284.20);   /* crust */
  --fg: oklch(0.8787 0.0426 272.28);        /* text */
  --dim: oklch(0.5497 0.0345 277.10);       /* overlay0 */
  --surface: oklch(0.4037 0.0320 280.15);   /* surface1 */
  --green: oklch(0.8577 0.1092 142.72);     /* green */
  --blue: oklch(0.7664 0.1113 259.88);      /* blue */
  --cyan: oklch(0.8585 0.0792 182.75);      /* teal */
  --red: oklch(0.7556 0.1297 2.76);         /* red */
  --yellow: oklch(0.9193 0.0704 86.53);     /* yellow */
  --magenta: oklch(0.7871 0.1187 304.77);   /* mauve */
  --lavender: oklch(0.8166 0.0910 277.31);  /* lavender */
  --cursor: oklch(0.9226 0.0238 30.49);     /* rosewater */
  --sel-bg: oklch(0.9226 0.0238 30.49);     /* rosewater */
  --sel-fg: oklch(0.2429 0.0304 283.91);    /* base */
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
}

body {
  color: var(--fg);
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.45;
  font-variant-ligatures: none;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

#screen {
  height: 100%;
  overflow-y: auto;
  padding: 12px 14px 40vh 14px;
  white-space: pre-wrap;
  word-break: break-all;
  cursor: text;
}

#screen::-webkit-scrollbar { width: 8px; }
#screen::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 4px; }

.line { min-height: 1.45em; }

.p-user { color: var(--green); font-weight: 600; }
.p-path { color: var(--blue); font-weight: 600; }
.p-sym  { color: var(--fg); }

.dir   { color: var(--blue); font-weight: 600; }
.exec  { color: var(--green); }
.link  { color: var(--cyan); }
.err   { color: var(--red); }
.warn  { color: var(--yellow); }
.dim   { color: var(--dim); }
.match { color: var(--red); font-weight: 600; }
.green { color: var(--green); }
.blue  { color: var(--blue); }
.cyan  { color: var(--cyan); }
.mag   { color: var(--magenta); }
.yel   { color: var(--yellow); }

a { color: var(--lavender); }

.sug { color: var(--dim); }

.cursor {
  background: var(--cursor);
  color: var(--bg);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% { background: transparent; color: var(--fg); }
}

#mobile-input {
  position: fixed;
  top: -100px;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 0;
}

/* Fullscreen editor overlays (nano, vim, less) */

#overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.ed-titlebar {
  background: var(--fg);
  color: var(--bg);
  text-align: center;
  white-space: pre;
  overflow: hidden;
}

.ed-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 0 2px;
  outline: none;
}

textarea.ed-body {
  background: var(--bg);
  color: var(--fg);
  border: 0;
  resize: none;
  font: inherit;
  line-height: inherit;
  white-space: pre;
}

.ed-status {
  white-space: pre-wrap;
  min-height: 1.45em;
}

.ed-status .inv, .ed-keys .inv {
  background: var(--fg);
  color: var(--bg);
}

.ed-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  white-space: pre;
  overflow: hidden;
}

.vim-line { min-height: 1.45em; white-space: pre-wrap; word-break: break-all; }
.vim-tilde { color: var(--blue); }

.vim-status {
  display: flex;
  justify-content: space-between;
  white-space: pre;
}