/* =========================================================================
   Station — shared styles for tmux-web
   Calm modern minimal: warm off-black + muted amber accent + Inter/JetBrains Mono
   Drop-in file. Referenced by index.station.html, login.station.html,
   claude-logs.station.html.
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --st-bg:        #17140f;   /* warm off-black */
  --st-bg-sunken: #120f0b;
  --st-bg-raised: #1f1b15;
  --st-bg-hover:  #241f18;

  --st-border:       #2a2319;
  --st-border-soft:  #201a12;
  --st-border-strong:#3a3021;

  --st-text:      #ebe3d4;
  --st-text-dim:  #9a9185;
  --st-text-faint:#6e6558;

  --st-accent:     #d6a157;   /* muted amber */
  --st-accent-dim: #8a6434;
  --st-accent-bg:  rgba(214, 161, 87, 0.12);

  --st-ok:    #7ba864;
  --st-warn:  #d69155;
  --st-error: #d46a56;
  --st-info:  #7a9dc4;

  --st-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --st-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', Consolas, monospace;

  --st-radius-sm: 6px;
  --st-radius:    10px;
  --st-radius-lg: 14px;
}

/* ---- Base -------------------------------------------------------------- */
html, body {
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-sans);
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}
button { cursor: pointer; }

/* Scrollbar — quiet */
.st-scroll::-webkit-scrollbar          { width: 10px; height: 10px; }
.st-scroll::-webkit-scrollbar-track    { background: transparent; }
.st-scroll::-webkit-scrollbar-thumb    { background: #2a2319; border-radius: 10px; border: 2px solid var(--st-bg-sunken); }
.st-scroll::-webkit-scrollbar-thumb:hover { background: #3a3021; }

/* ---- Kbd chip ---------------------------------------------------------- */
.st-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--st-mono);
  font-size: 10.5px;
  color: var(--st-text-dim);
  background: var(--st-bg-raised);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  line-height: 1;
}

/* ---- Icon button ------------------------------------------------------- */
.st-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--st-radius-sm);
  color: var(--st-text-dim);
  transition: background .12s, color .12s;
}
.st-icon-btn:hover { background: var(--st-bg-raised); color: var(--st-text); }

/* ---- Pill button ------------------------------------------------------- */
.st-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--st-bg-raised);
  border: 1px solid var(--st-border);
  border-radius: 8px;
  color: var(--st-text);
  font-size: 12.5px;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.st-btn:hover { background: var(--st-bg-hover); border-color: var(--st-border-strong); }
.st-btn-primary {
  background: var(--st-accent);
  border-color: var(--st-accent);
  color: #1a1408;
}
.st-btn-primary:hover { background: #e0ac61; border-color: #e0ac61; }
.st-btn-accent { background: var(--st-accent); border-color: var(--st-accent); color: #1a1408; }
.st-btn-accent:hover { background: #e0ac61; border-color: #e0ac61; }

/* ---- Tag / badge ------------------------------------------------------- */
.st-tag {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  font-family: var(--st-mono); font-size: 10px; line-height: 1;
  color: var(--st-text-faint);
  background: var(--st-bg-raised);
  border-radius: 999px;
}
.st-tag-amber { color: var(--st-accent); background: var(--st-accent-bg); }
.st-tag-ok    { color: var(--st-ok);     background: rgba(123, 168, 100, .12); }
.st-tag-warn  { color: var(--st-warn);   background: rgba(214, 145, 85, .12); }
.st-tag-err   { color: var(--st-error);  background: rgba(212, 106, 86, .12); }

/* ---- Text helpers ------------------------------------------------------ */
.st-mono { font-family: var(--st-mono); }
.st-dim  { color: var(--st-text-dim); }
.st-faint{ color: var(--st-text-faint); }

/* ---- Hide scrollbar on mobile overscroll ------------------------------- */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }