/* ───────────────────────────────────────────────────────────────
   Local Test — interactive deploy demo

   A hand-built replica of the app window (src/renderer/index.html +
   renderer.js + styles.css), rebuilt on the site's own tokens so it
   follows the light/dark theme. Every label, placeholder and log line
   in the markup is copied from the app source; nothing is invented.

   Everything is namespaced .lt-* so it cannot collide with the shared
   classes in styles.css.

   1. Tokens    2. Shell      3. Toolbar   4. Sidebar
   5. Detail    6. Tabs       7. Cards     8. Deploy row
   9. Live      10. Activity  11. Toast    12. Motion & narrow
   ─────────────────────────────────────────────────────────────── */

/* ─── 1. Tokens ─────────────────────────────────────────────────
   The app paints its live state green (--success / --success-bg in
   src/renderer/styles.css). On this site that fill is --sage, which is
   a shared token; the matching green *ink* is --sage-ink, which
   styles.css ships in all three theme states but which is not on the
   agreed token list — so it is used through a fallback, and the
   fallback below is the only colour this file defines. It follows the
   same three-state pattern styles.css uses, so the theme toggle and
   the system preference both keep working. Everything else here is a
   shared token.
   ─────────────────────────────────────────────────────────────── */
:root {
  --lt-green-fallback: #356a46;   /* 5.6:1 on --sage */
  --lt-green: var(--sage-ink, var(--lt-green-fallback));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lt-green-fallback: #79c48c; }
}
:root[data-theme="dark"] { --lt-green-fallback: #79c48c; }

/* ─── 2. Shell ──────────────────────────────────────────────── */
.lt-demo { position: relative; }

.lt-win {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.lt-win p { margin: 0; }
.lt-win ul { margin: 0; padding: 0; list-style: none; }
.lt-win code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--code-bg);
  border-radius: 4px;
  padding: .08em .34em;
}
.lt-win :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lt-body { display: flex; min-height: 0; }

/* ─── 3. Toolbar ────────────────────────────────────────────── */
.lt-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.lt-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.lt-brand-mark { display: inline-flex; color: var(--accent); }
.lt-brand-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--code-bg);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ─── 4. Sidebar ────────────────────────────────────────────── */
.lt-sidebar {
  width: 214px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
}

.lt-side-head {
  padding: 13px 15px 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lt-count { font-weight: 400; }

.lt-side-search {
  margin: 4px 10px 2px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-3);
}

.lt-project-list { flex: 1; padding: 6px 8px; }

/* The app fills the selected row with --accent and then paints its live dot
   --on-accent. On this palette that would bury the green the demo is meant to
   show, so the row wears the app's other real "this is the current one" fill
   (its hover surface) and the dot keeps the plain .dot.live green. */
.lt-project-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--ink);
}

.lt-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: .45;
  transition: background-color .22s var(--ease), opacity .22s var(--ease),
              box-shadow .22s var(--ease);
}
.lt-project-row[data-live="true"] .lt-dot {
  background: var(--lt-green);
  opacity: 1;
  box-shadow: 0 0 6px var(--lt-green);
}

.lt-project-row .lt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-port-chip { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.lt-side-add { display: flex; gap: 6px; margin: 8px; }
.lt-fake-btn {
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.lt-side-add .lt-fake-btn:first-child { flex: 1; text-align: center; }

.lt-side-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-3);
}
.lt-version::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

/* ─── 5. Detail ─────────────────────────────────────────────── */
.lt-detail {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 20px;
}

.lt-detail-head { display: flex; align-items: center; gap: 10px; }
.lt-project-title {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-pill {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  background: var(--code-bg);
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.lt-pill[data-live="true"] { color: var(--lt-green); background: var(--sage); }

.lt-path { margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.lt-path code { background: none; padding: 0; }

/* ─── 6. Tabs ───────────────────────────────────────────────── */
.lt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 15px;
  border-bottom: 1px solid var(--rule);
}

.lt-tab {
  padding: 7px 13px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.lt-tab:hover:not(:disabled) { color: var(--ink); }
.lt-tab[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.lt-tab:disabled { opacity: .42; cursor: default; }

.lt-panels { min-height: 236px; }
.lt-panel[hidden] { display: none; }

/* ─── 7. Cards ──────────────────────────────────────────────── */
.lt-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 13px 15px;
  margin-top: 15px;
}

.lt-win .lt-card-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 11px;
}

/* ─── 8. Deploy row ─────────────────────────────────────────── */
.lt-deploy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lt-port-label,
.lt-cmd-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  font-weight: 500;
}
.lt-cmd-label { margin-top: 12px; flex-wrap: wrap; }

.lt-input {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 8px;
}
.lt-input::placeholder { color: var(--ink-3); opacity: 1; }
.lt-input:disabled { opacity: .55; }
.lt-port-input { width: 88px; }
.lt-cmd-input { flex: 1; min-width: 200px; }

.lt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), opacity .15s var(--ease);
}
.lt-btn:hover { background: var(--code-bg); }
.lt-btn-small { padding: 3px 10px; font-size: 12px; }

.lt-action { font-weight: 600; padding: 8px 22px; }
.lt-action[data-state="idle"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.lt-action[data-state="idle"]:hover { filter: brightness(.93); }
.lt-action[data-state="live"]:hover { background: var(--blush); border-color: var(--ink-3); }
.lt-action[data-state="starting"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  opacity: .55;
  cursor: progress;
}

.lt-svg-i { flex: none; }

.lt-win .lt-muted { margin-top: 11px; color: var(--ink-3); }
.lt-muted strong { color: var(--ink); font-weight: 600; }

/* ─── 9. Live block ─────────────────────────────────────────── */
.lt-live-block {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lt-green);
  border-radius: 8px;
  background: var(--sage);
}
.lt-js .lt-live-block { transition: opacity .24s var(--ease), transform .24s var(--ease); }
.lt-js .lt-live-block[data-enter="true"] { opacity: 0; transform: translateY(-4px); }

.lt-win .lt-live-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lt-green);
  margin-bottom: 6px;
}
.lt-live-msg code { background: none; padding: 0; font-weight: 500; }

.lt-live-url-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.lt-live-url {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
}
.lt-live-url:hover { text-decoration: underline; }

.lt-win .lt-lan-row { margin-top: 7px; font-size: 12px; color: var(--ink-3); }

/* ─── 10. Activity & stats ──────────────────────────────────── */
.lt-stat-row { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.lt-stat { display: flex; flex-direction: column; }
.lt-stat-num { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink); }
.lt-stat-label { font-size: 11px; color: var(--ink-3); }

.lt-activity {
  max-height: 210px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.lt-activity li { display: flex; gap: 12px; padding: 2.5px 0; }
.lt-activity time { flex: none; opacity: .72; }
.lt-activity .lt-line { overflow-wrap: anywhere; }
.lt-activity-empty { font-style: italic; }

/* ─── 11. Toast ─────────────────────────────────────────────── */
.lt-toasts {
  position: absolute;
  top: 78px;
  right: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
.lt-toast {
  max-width: 320px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--ink);
  animation: lt-toast-in .18s var(--ease);
}
.lt-toast-success { border-left-color: var(--lt-green); }

@keyframes lt-toast-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ─── 12. Caption, motion, narrow screens ───────────────────── */
.lt-demo figcaption { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.lt-demo figcaption p { margin: 0; }
.lt-status { color: var(--ink-2); }
.lt-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--ink-3);
  vertical-align: 1px;
}
.lt-status[data-live="true"]::before { background: var(--lt-green); }

.lt-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lt-demo *,
  .lt-demo *::before,
  .lt-demo *::after {
    transition: none !important;
    animation: none !important;
  }
  .lt-js .lt-live-block[data-enter="true"] { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .lt-body { flex-direction: column; }
  .lt-sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .lt-side-head { padding-bottom: 0; }
  .lt-side-search,
  .lt-side-add,
  .lt-side-foot { display: none; }
  .lt-project-list { flex: none; padding: 6px 8px 8px; }
  .lt-detail { padding: 14px 15px 18px; }
}

@media (max-width: 460px) {
  .lt-win { font-size: 12.5px; }
  .lt-tab { padding: 7px 9px 8px; }
  .lt-project-title { font-size: 17px; }
  .lt-stat-row { gap: 10px 20px; }
  .lt-deploy-row { align-items: stretch; }
  .lt-action { flex: 1; justify-content: center; }
}