/* TC/OS welcome screen — the front door to the desktop OS.
   Deliberately an extension of the existing TC/OS styling: shared tokens
   (visual/tokens.css) plus the boot-screen button/logo from
   visual/boot.css. This file only adds the screen frame, the system
   strip, and the terminal transcript. */

/* tokens.css locks the OS body to a fixed, non-scrolling viewport and
   disables text selection; this screen is a normal document. */
body.lp {
  position:static;
  width:auto;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  padding:26px 14px;
  background:var(--bg);
  user-select:text;
  -webkit-user-select:text
}

.lp-screen {
  width:min(620px,100%);
  margin:auto;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:6px;
  box-shadow:var(--shadow);
  overflow:hidden
}

/* ---------- system strip (title bar) ---------- */

.lp-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 12px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint)
}

.lp-bar b {
  color:var(--accent);
  font-weight:500
}

/* ---------- boot header ---------- */

.lp-boot {
  padding:20px 18px;
  text-align:center;
  border-bottom:1px solid var(--line)
}

.lp-boot .boot-logo {
  margin-bottom:6px;
  font-family:var(--mono)
}

.lp-boot p {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint)
}

.lp-boot .lp-port {
  margin-top:4px;
  letter-spacing:.12em
}

.lp-boot .lp-port b {
  color:var(--accent);
  font-weight:500
}

/* ---------- terminal transcript ---------- */

.lp-term {
  padding:16px 18px 18px;
  background:#0d0e10;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.75;
  color:#d3d4d6
}

.lp-block + .lp-block {
  margin-top:13px
}

.lp-cmd {
  font:inherit;
  font-weight:400;
  color:#f5f5f5;
  white-space:pre-wrap;
  word-break:break-word
}

.lp-ps1 {
  color:var(--accent)
}

.lp-out {
  white-space:pre-wrap;
  word-break:break-word
}

.lp-out strong {
  color:#f5f5f5;
  font-weight:500
}

.lp-skills {
  color:#b1b3b8
}

.lp-rows {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1px 14px
}

.lp-rows .k {
  color:var(--text-faint);
  text-align:right;
  white-space:nowrap
}

.lp-rows a,
.lp-rows button {
  color:#f5f5f5;
  text-decoration:none;
  overflow-wrap:anywhere;
  text-align:left;
  cursor:pointer
}

.lp-rows button {
  background:none;
  border:0;
  padding:0
}

.lp-rows a:hover,
.lp-rows button:hover {
  color:var(--accent)
}

.lp-rows .hint {
  color:var(--accent)
}

/* ---------- enter action ---------- */

.lp-idle {
  padding:0 18px 16px;
  background:#0d0e10;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.75
}

.lp-cta {
  padding:16px 18px 18px;
  border-top:1px solid var(--line)
}

.lp-cta .boot-continue {
  display:block;
  width:100%;
  margin-top:0;
  line-height:1.5;
  text-decoration:none
}

.lp-caret {
  display:inline-block;
  width:7px;
  height:12px;
  margin-left:2px;
  background:var(--accent);
  vertical-align:-1px;
  animation:lp-blink 1.1s steps(1) infinite
}

@keyframes lp-blink {
  0%,50% {
    opacity:1
  }
  50.01%,100% {
    opacity:0
  }
}

@media (max-width:640px) {
  /* Mobile: same terminal identity, geometry adapted for narrow
     viewports and thumbs. Desktop rules above are untouched. */
  body.lp {
    padding:16px 10px;
    padding-top:calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    padding-left:max(10px, env(safe-area-inset-left, 0px));
    padding-right:max(10px, env(safe-area-inset-right, 0px))
  }

  .lp-screen {
    min-width:0;
    border-radius:4px
  }

  /* Stack the title strip so the two halves never collide. */
  .lp-bar {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding-top:8px;
    padding-bottom:8px
  }

  .lp-boot {
    padding:18px 14px 15px
  }

  .lp-term {
    padding:14px 14px 15px;
    font-size:12px;
    line-height:1.8
  }

  .lp-block + .lp-block {
    margin-top:15px
  }

  /* Contact rows become comfortable tap targets; the two-column
     label/value grid is kept so it still reads as terminal output. */
  .lp-rows {
    gap:2px 10px
  }

  .lp-rows .k {
    align-self:center;
    padding:10px 0
  }

  .lp-rows a,
  .lp-rows button {
    min-height:44px;
    display:flex;
    align-items:center;
    -webkit-tap-highlight-color:transparent
  }

  .lp-idle {
    padding:0 14px 14px
  }

  /* CTA: tall, centered, and clear of the gesture area. */
  .lp-cta {
    padding:16px 14px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))
  }

  .lp-cta .boot-continue {
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    -webkit-tap-highlight-color:transparent
  }
}

@media (prefers-reduced-motion:reduce) {
  .lp-caret {
    animation:none
  }
}