/* ==========================================================================
   Home experience D: a Leica M8 (with a layered rear-LCD GUI) and a macOS
   iTerm window running m8tool, which drives the LCD live. Namespaced under
   .leica-desk / .lwin / .lcd. The traffic-light dots (.term-lights) are reused
   from terminals.css, which is always loaded on the home page.
   ========================================================================== */
.leica-desk {
  position: relative;
  margin: 18px 0 0 0;
  min-height: 440px;
  max-width: 1000px;
}
.lwin { position: absolute; }
.lwin * { box-sizing: border-box; }

/* desktop: camera on the left, terminal overlapping its lower-right and in front */
#lw-cam  { left: 0;    top: 26px; width: 636px; z-index: 1; }
#lw-term { left: 408px; top: 14px; width: 548px; z-index: 2; }

/* ---- macOS window chrome (terminal) ---- */
.lwin-bar {
  display: flex; align-items: center;
  height: 28px; padding: 0 10px;
  background: linear-gradient(#ececec, #d6d6d6);
  border: 1px solid #b0b0b0; border-bottom: none;
  border-radius: 7px 7px 0 0;
  cursor: grab; touch-action: none;
}
.lwin.is-dragging .lwin-bar { cursor: grabbing; }
.lwin-sp { width: 60px; }
.lwin-title {
  flex: 1; text-align: center;
  font-family: "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; color: #4a4a4a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============ 1. camera + layered LCD ============ */
.lcam { line-height: 0; }
.lcam-img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* overlay pinned to the rear LCD of the M8 photo (percentages of the camera
   image, calibrated against static/img/leica-m8.webp) */
.lcd {
  position: absolute;
  left: 27.2%; top: 39.45%; width: 34.8%; height: 41.0%;
  overflow: hidden; border-radius: 3px;
  background: #05070a;
  line-height: normal;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.lcd-screen { position: absolute; inset: 0; opacity: 0; transition: opacity .38s ease; }
.lcd[data-state="play"]  .lcd-play  { opacity: 1; }
.lcd[data-state="debug"] .lcd-debug { opacity: 1; }
.lcd[data-state="ptp"]   .lcd-ptp   { opacity: 1; }

/* playback: the captured frame with a faint info overlay */
.lcd-play { background: #000; }
.lcd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.28) contrast(1.02); }
.lcd-play-top, .lcd-play-bot {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 3px 6px; font-size: 9px; letter-spacing: .04em;
  color: #f2f2f2; text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.lcd-play-top { top: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
/* iOS Safari may auto-link number-like text (e.g. "100-0594"); keep it plain */
.lcd a { color: inherit !important; text-decoration: none !important; }
.lcd-play-bot { bottom: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }

/* DEBUG menu */
.lcd-debug { background: #0a0c0f; color: #e6e6e6;
  display: flex; flex-direction: column; justify-content: center; padding: 3% 0; }
.lcd-deb-top {
  position: absolute; top: 5%; left: 7%;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #cfd3d8;
}
.lcd-deb-title { text-align: center; font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6%; }
.lcd-menu { list-style: none; margin: 0; padding: 0; }
.lcd-menu li { position: relative; text-align: center; font-size: 11px; color: #d7d7d7; padding: 4% 0; }
.lcd-menu li.sel { color: #fff; }
.lcd-menu li.sel::after {
  content: ""; position: absolute; left: 27%; right: 27%; bottom: 8%;
  height: 2px; background: #d61f26;
}

/* PTP connection */
.lcd-ptp { background: #050608; display: flex; align-items: center; justify-content: center; }
.ptp-box {
  display: flex; flex-direction: column; align-items: center; gap: 6%;
  width: 66%; height: 72%;
  border: 2px solid #d61f26; border-radius: 3px;
  justify-content: center; color: #eaeaea;
}
.ptp-title { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.ptp-usb { width: 22%; height: auto; color: #eaeaea; }
.ptp-mode { font-size: 13px; font-weight: 700; letter-spacing: .06em; }

/* ============ 2. iTerm (m8tool) ============ */
.lterm { background: #000; border: 1px solid #0a0a0a; border-radius: 7px 7px 5px 5px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5); overflow: hidden; }
.lterm-body { background: #000; }
.lterm-scroll {
  height: 384px; overflow-y: auto; overflow-x: hidden;
  padding: 7px 10px 9px;
  color: #d0d0d0;
  font-family: "DejaVu Sans Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.34;
}
.lterm-scroll::-webkit-scrollbar { width: 10px; }
.lterm-scroll::-webkit-scrollbar-thumb { background: #2a2a2a; }
.lterm-scroll::-webkit-scrollbar-track { background: #000; }
.lterm-scroll .ln { white-space: pre-wrap; word-break: break-word; min-height: 1.34em; }
.p-m8 { color: #e0a83a; font-weight: bold; }         /* M8tool> prompt */
.lg-i { color: #7fd6b0; }                             /* I: info lines  */
.lg-d { color: #8f9aa6; }                             /* D: debug lines */
.lg-t { color: #d7b56a; }                             /* timestamps     */
.lg-id { color: #6fa8dc; }                            /* MesgIDs/hex     */
.lcur { display: inline-block; width: 7px; height: 1em; background: #e5e5e5;
  vertical-align: text-bottom; margin-left: 1px; animation: lcur-blink 1.05s steps(1) infinite; }
@keyframes lcur-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- tablet: stop overlapping, stack as a column (matches gmm.css) ---- */
@media (max-width: 1199px) {
  .leica-desk { min-height: 0; max-width: 620px; }
  .lwin { position: static !important; z-index: auto !important; width: auto !important;
    margin: 0 0 20px 0; }
  /* keep the LCD overlay pinned to the camera, but drop the desktop offset: on a
     relative box top/left would still nudge the photo out of its slot and onto
     the terminal below */
  #lw-cam { position: relative !important; top: 0 !important; left: 0 !important; }
  .lwin-bar { cursor: default; }
  .lterm-scroll { height: 300px; }
}