/* ============================================================
   saadalaref.com — home: the career filesystem
   Full viewport, three bands, no page scroll.
   ============================================================ */

.shell {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- band 1: header ---------- */
.shell-head {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px;
  padding: 13px clamp(16px, 2.6vw, 32px);
  border-bottom: var(--hairline);
}
.shell-id {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.12em; color: var(--defense);
}
.shell-nav { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); }
.shell-nav a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.shell-nav a:hover { color: var(--text-primary); }

/* ---------- band 2: tree + pane ---------- */
.shell-main {
  flex: 1; min-height: 0;
  /* 28.6vw matches the handoff's 1fr:2.5fr split at its 1280px design width,
     but caps so the tree does not balloon on large monitors. */
  display: grid; grid-template-columns: clamp(238px, 28.6vw, 366px) 1fr;
}

.tree-col {
  background: var(--ground-raised);
  border-right: var(--hairline);
  overflow-y: auto;
  padding: 14px 0 20px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.tree-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-label); padding: 0 10px 12px; text-transform: uppercase;
}
#tree { display: flex; flex-direction: column; }

.tree-row {
  display: flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 9px 10px;
  background: none; border: 0; border-left: 2px solid transparent;
  font-family: var(--mono); font-size: 12px; text-align: left;
  color: var(--text-muted); cursor: pointer; width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
.tree-row:hover { background: var(--row-hover); color: var(--text-primary); }
.tree-row.is-active { background: var(--row-active); color: var(--text-primary); }
.tree-icon { flex: 0 0 auto; font-size: 10px; }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pane-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* Horizontal inset shared by the reading pane and the terminal below it, so
   the two stay optically aligned. On wide monitors it grows to keep the
   reading column from being stranded against the tree divider. */
.pane-col { --inset: clamp(20px, 3.2vw, 44px); }
@media (min-width: 1500px) {
  .pane-col { --inset: max(44px, calc((100% - 1180px) / 2)); }
}

#pane {
  flex: 1; min-height: 0; min-width: 0; overflow-y: auto;
  padding: clamp(20px, 3.2vw, 44px) var(--inset);
  display: flex; flex-direction: column;
}
.pane-in { animation: rise 0.3s ease both; max-width: 44em; }

/* On tall displays a short file leaves the pane bottom-heavy with dead space.
   auto margins centre it only when there is spare room and still scroll from
   the top when the content is taller than the pane. */
@media (min-height: 900px) {
  .pane-in { margin-block: auto; }
}

.pane-crumb {
  font-family: var(--mono); font-size: 11px; color: var(--text-label);
  margin: 0 0 16px; letter-spacing: 0.04em;
}
.pane-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(24px, 3.3vw, 42px);
  letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px;
  text-wrap: balance;
}
.pane-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-label); margin: 0 0 30px; text-transform: uppercase;
}
.pane-block { margin-bottom: 24px; }
.pane-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 8px;
}
.pane-text {
  font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.75;
  color: var(--text-body); margin: 0; max-width: 40em;
}

.pane-stats {
  display: flex; flex-wrap: wrap; gap: 26px 40px;
  padding-bottom: 20px; margin: 30px 0 0; border-bottom: var(--hairline);
}
.stat-v {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-label); margin-top: 6px;
}

.pane-more {
  display: inline-block; margin-top: 24px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
}
#pane .btn-row { margin-top: 28px; }

/* ---------- band 3: terminal ---------- */
.term {
  flex: 0 0 auto;
  border-top: var(--hairline);
  background: var(--ground-raised);
  min-width: 0;
}
#log {
  max-height: 96px; overflow-y: auto;
  padding: 10px var(--inset) 0;
}
.log-line {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  margin: 0; white-space: pre-wrap; word-break: break-word;
}
#log:empty { display: none; }

.prompt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--inset) 13px;
  cursor: text;
}
.prompt-label {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--defense); white-space: nowrap; flex: 0 0 auto;
}
#cmd {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-family: var(--mono); font-size: 13px; color: var(--text-primary);
  caret-color: var(--defense); padding: 2px 0;
}
#cmd::placeholder { color: var(--text-label); opacity: 1; }
#cmd:focus-visible { outline: none; }
.prompt-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-label); white-space: nowrap; flex: 0 0 auto;
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .shell-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pane-col { --inset: 18px; }
  .pane-in { max-width: 100%; }
  .pane-text, .pane-title { max-width: 100%; }
  .tree-col {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: var(--hairline); padding: 0;
  }
  .tree-label { display: none; }
  #tree { flex-direction: row; }
  .tree-row {
    width: auto; white-space: nowrap; min-height: 44px;
    border-left: 0; border-bottom: 2px solid transparent;
    padding-left: 12px !important; padding-right: 12px;
  }
  .tree-row.is-active { border-bottom-color: currentColor; }
  .prompt-hint { display: none; }
  #log { max-height: 70px; }
}