/* ============================================================
   arysbek-os — v2 design system
   "An academic's terminal." Warm paper + ink, all-monospace,
   fills the screen, never scrolls. /theme dark available.
   ============================================================ */

:root {
  /* warm paper + ink (default) */
  --paper:    oklch(0.957 0.008 86);
  --paper-2:  oklch(0.934 0.010 86);
  --paper-3:  oklch(0.908 0.012 84);
  --ink:      oklch(0.235 0.012 64);
  --ink-2:    oklch(0.435 0.010 64);
  --ink-3:    oklch(0.595 0.008 66);
  --rule:     oklch(0.805 0.012 78);
  --rule-soft:oklch(0.868 0.010 80);
  --acc:      oklch(0.555 0.180 33);   /* vermilion ink */
  --acc-soft: oklch(0.555 0.180 33 / 0.12);
  --ok:       oklch(0.555 0.130 158);  /* measured green */
  --ok-soft:  oklch(0.555 0.130 158 / 0.14);
  --sel:      oklch(0.555 0.180 33 / 0.10);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs: 13.5px;
  --bar-h: 34px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --paper:    oklch(0.165 0.012 250);
  --paper-2:  oklch(0.205 0.013 250);
  --paper-3:  oklch(0.245 0.014 250);
  --ink:      oklch(0.915 0.010 250);
  --ink-2:    oklch(0.700 0.012 250);
  --ink-3:    oklch(0.560 0.012 250);
  --rule:     oklch(0.330 0.014 250);
  --rule-soft:oklch(0.275 0.013 250);
  --acc:      oklch(0.700 0.170 36);
  --acc-soft: oklch(0.700 0.170 36 / 0.16);
  --ok:       oklch(0.760 0.150 158);
  --ok-soft:  oklch(0.760 0.150 158 / 0.16);
  --sel:      oklch(0.700 0.170 36 / 0.13);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

body {
  font-family: var(--mono);
  font-size: var(--fs);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-variant-ligatures: none;
}

::selection { background: var(--acc-soft); }

#root { height: 100vh; height: 100dvh; }

/* engineering-paper texture + faint field signature */
.os-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--rule) 0.6px, transparent 0.7px);
  background-size: 22px 22px;
  opacity: 0.35;
  transition: opacity 0.4s;
}
[data-theme="dark"] .os-bg { opacity: 0.22; }

/* ====================== OS SHELL ====================== */
.os {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: transparent;
}

/* ---- titlebar ---- */
.titlebar {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 12px;
  color: var(--ink-2);
  user-select: none;
}
.tb-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.tb-mark { color: var(--acc); }
.tb-sep { color: var(--rule); }
.tb-spacer { flex: 1; }
.tb-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-item .k { color: var(--ink-3); }
.tb-item .v { color: var(--ink-2); }
.tb-dot { width: 7px; height: 7px; border-radius: 50%; }
.tb-dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
@media (max-width: 720px) { .tb-hide { display: none; } }

/* ---- tab strip ---- */
.tabstrip {
  flex: 0 0 auto;
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabstrip::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: transparent;
  border: none; border-right: 1px solid var(--rule-soft);
  cursor: pointer; white-space: nowrap;
  position: relative;
  transition: color 0.18s, background 0.18s;
}
.tab:hover { color: var(--ink); background: var(--paper-2); }
.tab.active { color: var(--ink); background: var(--paper); }
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--acc);
}
.tab-num { font-size: 10px; color: var(--ink-3); opacity: 0.7; }
.tab.active .tab-num { color: var(--acc); opacity: 1; }

/* ---- workspace (panes area) ---- */
.workspace { flex: 1 1 auto; min-height: 0; display: flex; background: var(--paper); }
.split-h { display: flex; flex: 1; min-width: 0; min-height: 0; }
.split-v { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

.pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  flex: 1;
  background: var(--paper);
}
.pane + .pane-border-l { }
.pane.bl { border-left: 1px solid var(--rule); }
.pane.bt { border-top: 1px solid var(--rule); }

.pane-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-size: 11px; letter-spacing: 0.03em;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  text-transform: lowercase;
  user-select: none;
  white-space: nowrap;
}
.pane-head > .grow + * , .pane-head .meta { flex: 0 0 auto; }
.pane-head .dot { width: 6px; height: 6px; border-radius: 1px; background: var(--ink-3); flex: 0 0 auto; }
.pane-head .dot.live { background: var(--ok); animation: livepulse 1.6s var(--ease) infinite; }
@keyframes livepulse { 50% { opacity: 0.3; } }
.pane-head .grow { flex: 1; }
.pane-head .meta { color: var(--ink-3); opacity: 0.8; }

.pane-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  padding: 18px 20px;
}
.pane-body.center { display: flex; flex-direction: column; justify-content: center; }
.pane-body::-webkit-scrollbar { width: 9px; height: 9px; }
.pane-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; border: 2px solid var(--paper); }
.pane-body::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---- command bar ---- */
.cmdbar {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.cmd-feedback {
  height: 0; overflow: hidden;
  font-size: 11.5px; color: var(--ink-3);
  padding: 0 16px;
  transition: height 0.2s var(--ease), padding 0.2s var(--ease);
  border-bottom: 1px solid transparent;
  display: flex; align-items: center; gap: 8px;
}
.cmd-feedback.show { height: 26px; padding: 4px 16px; border-bottom-color: var(--rule-soft); }
.cmd-feedback.err { color: var(--acc); }
.cmd-line { display: flex; align-items: center; gap: 0; padding: 10px 16px; }
.cmd-prompt { color: var(--acc); white-space: nowrap; user-select: none; }
.cmd-prompt .path { color: var(--ink-3); }
.cmd-prompt .sig { color: var(--ink); }
.cmd-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--mono); font-size: var(--fs); color: var(--ink);
  caret-color: var(--acc); padding: 0 0 0 9px; min-width: 0;
}
.cmd-hint { font-size: 11px; color: var(--ink-3); white-space: nowrap; user-select: none; }
@media (max-width: 640px) { .cmd-hint { display: none; } }

/* ====================== SHARED CONTENT BITS ====================== */
.kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--rule);
  border-radius: 4px; background: var(--paper); font-size: 11px; color: var(--ink-2);
}
.acc { color: var(--acc); }
.ok { color: var(--ok); }
.dim { color: var(--ink-2); }
.faint { color: var(--ink-3); }
a.lnk { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc-soft); }
a.lnk:hover { border-bottom-color: var(--acc); }

.term-cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--acc); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.prompt-echo { color: var(--ink-3); }
.prompt-echo .p { color: var(--ok); }
.prompt-echo .c { color: var(--ink); }

.cmd-input::placeholder { color: var(--ink-3); opacity: 0.7; }

/* ====================== HELP OVERLAY ====================== */
.help-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: oklch(0.2 0.01 80 / 0.32);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.18s var(--ease);
}
[data-theme="dark"] .help-overlay { background: oklch(0 0 0 / 0.5); }
@keyframes fadeIn { from { opacity: 0; } }
.help-panel {
  width: min(520px, 90vw);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 24px 70px -30px oklch(0.2 0.02 60 / 0.6);
  overflow: hidden;
  animation: popIn 0.2s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.help-head { padding: 12px 18px; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); font-size: 12.5px; color: var(--ink); }
.help-list { padding: 8px 0; }
.help-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 7px 18px; font-size: 12.5px; }
.help-row .hc { color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-row .hd { color: var(--ink-2); }
.help-foot { padding: 12px 18px; border-top: 1px solid var(--rule-soft); background: var(--paper-2); font-size: 11.5px; }
@media (max-width: 520px) { .help-row { grid-template-columns: 1fr; gap: 2px; } }