/* terminal-prod.css — production terminal landing styles */

/* ── page shell ─────────────────────────────────────────── */
.bt-page {
  background: var(--bg-1);
  height: 100vh;
  height: 100dvh;
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.55;
  color: var(--fg-1);
  padding: 12px 16px;
  box-sizing: border-box;
}
.bt-page--none {
  padding: 0;
  background: var(--bg-0);
}

/* ── window ─────────────────────────────────────────────── */
.bt-window {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--bg-0);
  border: 1px solid var(--bg-4);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bt-window--none {
  max-width: none; border: 0; border-radius: 0;
  box-shadow: none; height: 100%;
}

/* ── chrome ─────────────────────────────────────────────── */
.bt-chrome {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--bg-3);
  flex: 0 0 auto;
}
.bt-chrome--mac     { grid-template-columns: 80px 1fr 80px; }
.bt-chrome--linux   { grid-template-columns: 1fr auto; }
.bt-chrome--minimal { grid-template-columns: 1fr; }

.bt-dots { display: flex; gap: 6px; }
.bt-dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-4);
}
.bt-dots span:nth-child(3) { background: var(--accent); }

.bt-chrome__title {
  text-align: center;
  color: var(--fg-3);
  font-size: var(--t-12);
}
.bt-chrome__title--left { text-align: left; }
.bt-chrome__dot.ok { color: var(--ok); margin-right: 6px; }

.bt-chrome__right {
  color: var(--fg-4);
  font-size: var(--t-12);
  text-align: right;
}
.bt-chrome__right--linux {
  display: flex; gap: 12px;
  font-size: var(--t-15);
  color: var(--fg-3);
}

/* ── scroll body ────────────────────────────────────────── */
.bt-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  cursor: text;
}
.bt-scroll::-webkit-scrollbar { width: 10px; }
.bt-scroll::-webkit-scrollbar-track { background: var(--bg-0); }
.bt-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-3); border-radius: 6px;
  border: 2px solid var(--bg-0);
}
.bt-scroll::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

.bt-body { padding: 10px 14px 10px; }
.bt-line { padding: 1px 0; }
.bt-sp { height: 14px; }

/* ── prompt ─────────────────────────────────────────────── */
.bt-prompt {
  display: flex;
  align-items: baseline;
  padding: 4px 0 2px;
  font-size: var(--t-13);
}
.bt-prompt__user  { color: var(--accent); font-weight: 500; }
.bt-prompt__at    { color: var(--fg-4); }
.bt-prompt__host  { color: var(--fg-2); }
.bt-prompt__colon { color: var(--fg-4); }
.bt-prompt__path  { color: var(--ok); }
.bt-prompt__glyph { color: var(--fg-3); margin: 0 8px 0 6px; }
.bt-prompt__cmd   { color: var(--fg-0); }

/* ── outputs ────────────────────────────────────────────── */
.bt-out {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0; padding: 0;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
}
.bt-err { color: var(--err); }

/* ── help ───────────────────────────────────────────────── */
.bt-help { font-size: var(--t-13); color: var(--fg-2); }
.bt-help__head {
  color: var(--accent);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  margin-bottom: 8px;
}
.bt-help__table { border-collapse: collapse; }
.bt-help__table td {
  padding: 2px 24px 2px 0;
  vertical-align: top;
  font-size: var(--t-13);
}
.bt-help__table td:first-child {
  color: var(--accent);
  white-space: nowrap;
}
.bt-help__table td:last-child { color: var(--fg-2); }
.bt-help__hint {
  margin-top: 10px;
  color: var(--fg-4);
  font-size: var(--t-12);
}

/* ── ls ─────────────────────────────────────────────────── */
.bt-ls { font-size: var(--t-13); }
.bt-ls__head { color: var(--fg-4); padding-bottom: 6px; }
.bt-ls__list {
  display: flex; flex-direction: column; gap: 2px;
}
.bt-ls__rowWrap {
  position: relative;
}
.bt-ls__row {
  display: grid;
  grid-template-columns: 96px 60px 40px 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--r-1);
  border: 1px solid var(--bg-3);
  background: var(--bg-1);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.bt-ls__row:hover, .bt-ls__row:focus-visible {
  background: var(--accent-tint-10);
  border-color: var(--accent);
  outline: none;
}
.bt-ls__perm  { color: var(--ok); }
.bt-ls__owner { color: var(--fg-3); }
.bt-ls__size  { color: var(--fg-3); text-align: right; }
.bt-ls__date  { color: var(--fg-3); }
.bt-ls__nameWrap {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
}
.bt-ls__name  {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-tint-24);
  transition: border-color var(--dur-fast) var(--ease);
}
.bt-ls__row:hover .bt-ls__name,
.bt-ls__row:focus-visible .bt-ls__name { border-bottom-color: var(--accent); }
.bt-ls__status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.bt-ls__status--live {
  color: var(--ok);
  border-color: rgba(127, 191, 122, 0.30);
  background: rgba(127, 191, 122, 0.08);
}
.bt-ls__status--wip {
  color: var(--warn);
  border-color: rgba(229, 196, 106, 0.28);
  background: rgba(229, 196, 106, 0.08);
}
.bt-ls__action {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--bg-4);
  border-radius: var(--r-1);
  color: var(--fg-2);
  font-size: var(--t-12);
  background: var(--bg-2);
  text-transform: lowercase;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.bt-ls__actionArrow { transition: transform var(--dur-fast) var(--ease); }
.bt-ls__row:hover .bt-ls__action,
.bt-ls__row:focus-visible .bt-ls__action {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
  font-weight: 500;
}
.bt-ls__row:hover .bt-ls__actionArrow { transform: translateX(3px); }

/* ── floating preview tooltip ─────────────────────────── */
.bt-float {
  position: absolute;
  top: calc(100% + 6px);
  /* anchor at the right side of the row, drop downward */
  right: 0;
  z-index: 50;
  width: min(520px, calc(100% + 16px));
  opacity: 0;
  transform: translateY(-4px) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 140ms var(--ease),
              transform 140ms var(--ease);
}
.bt-float[data-open="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bt-float__pointer {
  position: absolute;
  top: -5px; right: 20px;
  width: 10px; height: 10px;
  background: var(--bg-2);
  border-left: 1px solid var(--accent-tint-24);
  border-top:  1px solid var(--accent-tint-24);
  transform: rotate(45deg);
}
.bt-float__card {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--accent-tint-24);
  border-radius: var(--r-2);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55),
              0 2px 6px rgba(0,0,0,0.4);
}
.bt-float__frame {
  position: relative;
  height: 140px;
  border-radius: var(--r-1);
  overflow: hidden;
  border: 1px solid var(--bg-3);
  background: var(--bg-0);
}
.bt-float__frame canvas { display: block; width: 100%; height: 100%; }
.bt-float__badge {
  position: absolute; bottom: 6px; left: 6px;
  font-size: 10px; color: var(--fg-1);
  background: rgba(10,12,16,0.85);
  padding: 2px 7px; border-radius: var(--r-1);
  text-transform: uppercase; letter-spacing: var(--tr-wide);
}
.bt-float__meta { min-width: 0; }
.bt-float__title {
  color: var(--accent);
  font-size: var(--t-15);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.bt-float__sub {
  color: var(--fg-3);
  font-size: var(--t-12);
  margin-top: 2px;
}
.bt-float__body {
  color: var(--fg-2);
  font-size: var(--t-12);
  line-height: 1.5;
  margin: 8px 0;
}
.bt-float__metaRow {
  color: var(--fg-3);
  font-size: 11px;
}

/* ── notes ──────────────────────────────────────────────── */
.bt-notes { font-size: var(--t-13); }
.bt-notes__head { color: var(--fg-4); padding-bottom: 4px; }
.bt-notes ul { list-style: none; padding: 0; margin: 0; }
.bt-notes__row {
  display: grid;
  grid-template-columns: 110px 50px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.bt-notes__row:hover { background: var(--accent-tint-10); }
.bt-notes__date { color: var(--fg-3); }
.bt-notes__min  { color: var(--fg-4); text-align: right; font-size: var(--t-12); }
.bt-notes__title {
  color: var(--fg-1);
  border-bottom: 1px dashed var(--fg-4);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bt-notes__title:hover, .bt-notes__row:hover .bt-notes__title {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.bt-notes__more {
  margin-top: 10px;
  color: var(--accent);
  font-size: var(--t-12);
}

/* ── contact ────────────────────────────────────────────── */
.bt-contact {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
}
.bt-contact__row {
  display: grid; grid-template-columns: 80px 16px 1fr;
  gap: 8px; font-size: var(--t-13);
}
.bt-contact__label { color: var(--fg-3); white-space: pre; }
.bt-contact__row a { color: var(--fg-1); border-bottom: 1px dotted var(--fg-4); }
.bt-contact__row a:hover { color: var(--accent); border-color: var(--accent); }

/* ── irc ────────────────────────────────────────────────── */
.bt-irc {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 6px 0 4px;
}
.bt-irc__head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--bg-3);
  font-size: var(--t-12);
  color: var(--fg-3);
}
.bt-irc__channel { color: var(--accent); font-weight: 500; }
.bt-irc__count   { color: var(--fg-3); }
.bt-irc__status  { margin-left: auto; font-size: var(--t-12); }
.bt-irc__status--online       { color: var(--ok); }
.bt-irc__status--connecting,
.bt-irc__status--reconnecting { color: var(--accent); }
.bt-irc__status--offline      { color: var(--err); }

.bt-irc__log {
  display: flex; flex-direction: column;
  padding: 4px 0;
}
.bt-irc__row {
  display: grid;
  grid-template-columns: 48px minmax(0, auto) 1fr;
  gap: 8px;
  padding: 1px 0;
  font-size: var(--t-13);
  line-height: 1.45;
}
.bt-irc__row--system,
.bt-irc__row--action {
  grid-template-columns: 48px 1fr;
}
.bt-irc__time   { color: var(--fg-4); font-variant-numeric: tabular-nums; }
.bt-irc__nick   { color: var(--fg-2); font-weight: 500; }
.bt-irc__text   { color: var(--fg-1); word-break: break-word; white-space: pre-wrap; }
.bt-irc__row--self .bt-irc__nick { color: var(--accent); }
.bt-irc__action { color: var(--fg-2); font-style: italic; word-break: break-word; white-space: pre-wrap; }
.bt-irc__system { color: var(--fg-3); }
.bt-irc__row--warn .bt-irc__system { color: var(--err); }
.bt-irc__row--err  .bt-irc__system { color: var(--err); }

.bt-livePrompt--irc { padding-top: 8px; }

/* ── banner ─────────────────────────────────────────────── */
.bt-banner {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.05;
  color: var(--accent);
  margin: 4px 0;
  padding: 4px 0;
  white-space: pre;
  overflow-x: auto;
}

/* ── live prompt ────────────────────────────────────────── */
.bt-livePrompt {
  display: flex;
  align-items: baseline;
  padding: 4px 0 2px;
  font-size: var(--t-13);
}
.bt-inputWrap {
  display: inline-grid;
  align-items: baseline;
}
.bt-inputWrap::after {
  content: attr(data-value);
  visibility: hidden;
  white-space: pre;
  grid-area: 1 / 1;
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: inherit;
  padding: 0;
}
.bt-input {
  width: 0;
  min-width: 100%;
  grid-area: 1 / 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: inherit;
  caret-color: transparent;
  padding: 0;
}
.bt-caret {
  color: var(--accent);
  pointer-events: none;
  animation: bt-blink 1.05s steps(1, end) infinite;
}
.bt-livePrompt:focus-within .bt-caret { animation: bt-blink 1.05s steps(1, end) infinite; }
@keyframes bt-blink { 50% { opacity: 0; } }

/* ── statusbar ──────────────────────────────────────────── */
.bt-statusbar {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--bg-3);
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-3); font-size: var(--t-12);
}
.bt-statusbar code {
  font-size: 11px; padding: 0 4px;
  background: var(--bg-2); border: 1px solid var(--bg-3);
  border-radius: var(--r-1); color: var(--accent);
}
.bt-statusdot.ok { color: var(--ok); margin-right: 4px; }
.bt-statusspacer { flex: 1; }

.dim { color: var(--fg-4); }

/* ── mobile ─────────────────────────────────────────────── */
/* Phone-portrait (≤720px): collapse fixed-width ls/notes/contact
   columns; turn the floating shader-preview tooltip into an inline
   stacked card; trim chrome and statusbar; bump input font so iOS
   Safari doesn't auto-zoom on focus. */
@media (max-width: 720px) {
  .bt-page {
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .bt-window {
    border-radius: 6px;
  }

  /* chrome — keep dots, hide title + window controls */
  .bt-chrome--mac     { grid-template-columns: 1fr; }
  .bt-chrome--linux   { grid-template-columns: 1fr; }
  .bt-chrome__title,
  .bt-chrome__right { display: none; }

  /* ls — drop metadata columns, keep name + status + action + toggle */
  .bt-ls__row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }
  .bt-ls__perm,
  .bt-ls__owner,
  .bt-ls__size,
  .bt-ls__date { display: none; }
  .bt-ls__nameWrap { flex-wrap: wrap; gap: 8px; }
  /* No hover on touch — show "open" pill in its active look from the start. */
  .bt-ls__action {
    background: var(--accent);
    color: var(--bg-0);
    border-color: var(--accent);
    font-weight: 500;
    text-decoration: none;
  }
  /* tap-to-expand indicator — single monospace glyph, no pill, no chrome.
     Sits at the row's right edge as a plain "[+]" / "[−]" affordance. */
  .bt-ls__toggle {
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: var(--t-13);
    user-select: none;
    padding: 0 2px;
  }
  .bt-ls__row[aria-expanded="true"] .bt-ls__toggle { color: var(--accent); }

  /* Expanded card on mobile is itself a link to the project. Strip the
     global <a> bottom-border + colour so the card looks identical to the
     desktop <div> variant; provide a faint accent flash on tap. */
  .bt-float--link,
  .bt-float--link:hover,
  .bt-float--link:focus,
  .bt-float--link:focus-visible {
    border-bottom: 0;
    text-decoration: none;
    color: inherit;
  }
  .bt-float--link { -webkit-tap-highlight-color: var(--accent-tint-16); }
  .bt-float--link:active .bt-float__card {
    border-color: var(--accent);
    background: var(--accent-tint-10);
  }

  /* float — inline stacked card, not a positioned tooltip */
  .bt-float {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    margin-top: 6px;
    transition: none;
  }
  .bt-float[data-open="false"] { display: none; }
  .bt-float__pointer { display: none; }
  .bt-float__card { grid-template-columns: 1fr; gap: 10px; }
  .bt-float__frame { height: 160px; }

  /* notes — drop the duration column on phones */
  .bt-notes__row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .bt-notes__min { display: none; }

  /* contact — let the label column size to content */
  .bt-contact__row {
    grid-template-columns: auto auto 1fr;
    gap: 6px;
  }
  .bt-contact__label { white-space: normal; }

  /* help table — let command names wrap */
  .bt-help__table td { padding: 2px 10px 2px 0; }
  .bt-help__table td:first-child { white-space: normal; }

  /* statusbar — keep only the "● online" indicator; everything past it
     references typing commands, which isn't possible on touch. */
  .bt-statusbar { flex-wrap: wrap; gap: 6px; }
  .bt-statusbar > :nth-child(n+2) { display: none; }

  /* banner — shrink ASCII art so it fits 360px without scroll */
  .bt-banner { font-size: 8px; line-height: 1; }

  /* live prompt — let input wrap below prefix when content is long */
  .bt-livePrompt { flex-wrap: wrap; }

  /* irc — tighten the gutter on narrow screens; lose the timestamp column to
     give message text more room. */
  .bt-irc__row {
    grid-template-columns: 36px minmax(0, auto) 1fr;
    gap: 6px;
    font-size: 14px;
  }
  .bt-irc__row--system,
  .bt-irc__row--action {
    grid-template-columns: 36px 1fr;
  }
  .bt-irc__head { font-size: 11px; gap: 6px; }

  /* iOS: ≥16px input font prevents auto-zoom on focus.
     The mirror ::after must match for the inputWrap to size correctly. */
  .bt-input,
  .bt-inputWrap::after { font-size: 16px; }
}

@media (max-width: 420px) {
  .bt-page { padding: 4px 6px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .bt-body { padding: 8px 10px; }
  .bt-chrome { padding: 6px 10px; }
  .bt-ls__row { padding: 8px; }
  .bt-banner { font-size: 7px; }
}