/* statusbar.css — the Vim-style status line, command line, and help panel.

   The status bar is fixed to the bottom and never scrolls away. In a modal
   interface the mode indicator is not decoration: it is the answer to "what
   will this key do", and hiding it is how modal UIs earn their bad reputation. */

.statusbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 26px;
  padding: 0 .5rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
}

/* The bar and the command line sit over the page, so the last few lines of
   content would otherwise be unreachable behind them. */
body { padding-bottom: 30px; }

.sb-mode {
  display: inline-block;
  padding: 0 .5rem;
  line-height: 18px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bg);
  background: var(--muted);
}
.sb-mode-normal  { background: var(--blue); }
.sb-mode-drill   { background: var(--green); }
.sb-mode-grade   { background: var(--yellow); }
.sb-mode-command { background: var(--purple); }

.sb-seg { color: var(--muted); }
.sb-seg span { color: var(--text); }
.sb-spacer { flex: 1; }

.sb-hint {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}

.sb-deck { opacity: .6; }

.sb-message { font-weight: 600; }
.sb-message-info { color: var(--green); }
.sb-message-warn { color: var(--orange); }

/* Tint the whole frame by mode — peripheral vision picks this up long before
   you read the badge, which is the point. */
body[data-mode="DRILL"]   .statusbar { border-top-color: var(--green); }
body[data-mode="GRADE"]   .statusbar { border-top-color: var(--yellow); }
body[data-mode="COMMAND"] .statusbar { border-top-color: var(--purple); }

/* ------------------------------------------------------- command line */

.command-line {
  position: fixed;
  left: 0; right: 0; bottom: 26px;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  background: var(--bg-2);
  border-top: 1px solid var(--purple);
  font-family: var(--mono);
}
.command-prompt { color: var(--purple); font-weight: 700; }
#sb-command-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  outline: none;
  padding: 0;
}

/* --------------------------------------------------------- drill cue */

/* The cue is a real <button>: it is the entry point to the drill, and a mouse
   user has no way to guess `i`. It replaces the input zone entirely rather than
   sitting beside it — two instructions at once is what made the app read as
   broken on first use. */
.drill-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: 1.15rem .8rem;
  border: 1px dashed var(--green);
  border-radius: var(--radius);
  background: rgba(158,206,106,.06);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.drill-cue:hover { background: rgba(158,206,106,.12); border-style: solid; }
.cue-main { font-weight: 500; }

/* ------------------------------------------------------------- kbd */

kbd {
  font-family: var(--mono);
  font-size: .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: .05rem .3rem;
  color: var(--text);
  white-space: nowrap;
}
.tab kbd, .actions kbd { opacity: .55; margin-left: .25rem; }

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

.help-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16,17,25,.82);
  overflow-y: auto;
  padding: 2rem 1rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.help-inner { max-width: 46rem; width: 100%; margin: 0; }
.help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.help-panel h4 { margin: 1.2rem 0 .5rem; font-size: .8rem; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--muted); }
.help-panel table.data td { padding: .3rem .5rem; }
.help-panel table.data td:first-child { width: 7.5rem; white-space: nowrap; }

/* --------------------------------------------------------- search */

#browse-search {
  width: 100%;
  max-width: 26rem;
  margin: .4rem 0 .6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  padding: .4rem .6rem;
}

@media (max-width: 52rem) {
  .sb-hint { display: none; }
}