/* Install block: magic prompt panel, steps, terminal fallback. Shared by index.html and dashboard.html.
   Markup comes from install.js. Builds on style.css tokens (.codebox, .steps); see docs/DESIGN.md. */

/* ---------- Prompt panel ---------- */
.pbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--panel);
  color: var(--on-panel);
  border: 1px solid var(--ink);
}
.pbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--panel-line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-panel-2);
}
.pbox-tag { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* mono for the Latin, Plex Sans Hebrew (end of --font-mono) for the Hebrew */
.pbox-text {
  margin: 0;
  padding: 22px 20px 24px;
  font-family: var(--font-mono);
  font-size: clamp(0.88rem, 0.2vw + 0.82rem, 0.96rem);
  line-height: 2;
  direction: rtl;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  color: var(--on-panel);
  user-select: all;
}
.pbox-text::selection { background: var(--on-panel); color: var(--panel); }

.pbox-foot { padding: 0 20px 20px; }
.pbox-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 0 24px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, border-color, color, scale;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease);
}
@media (hover: hover) {
  .pbox-copy:hover { background: var(--on-panel); border-color: var(--on-panel); color: var(--panel); }
}
.pbox-copy:active { scale: 0.96; }
.pbox-copy:focus-visible { outline: 2px solid var(--on-panel); outline-offset: 3px; }
.pbox-copy[data-state="done"] { background: var(--on-panel); border-color: var(--on-panel); color: var(--panel); }
.pbox-copy[data-state="fail"] { background: transparent; border-color: var(--led); color: var(--on-panel); font-size: 1rem; line-height: 1.4; padding-block: 12px; }

/* copy icon swaps to a check: opacity + scale + blur, both icons stay in the DOM */
.pbox-ico { position: relative; flex: none; width: 22px; height: 22px; }
.pbox-i {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  transition-property: opacity, scale, filter;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease);
}
.pbox-i-done { opacity: 0; scale: 0.25; filter: blur(4px); color: var(--red); }
.pbox-copy[data-state="done"] .pbox-i-copy { opacity: 0; scale: 0.25; filter: blur(4px); }
.pbox-copy[data-state="done"] .pbox-i-done { opacity: 1; scale: 1; filter: blur(0); }
.pbox-copy[data-state="fail"] .pbox-ico { display: none; }

/* ---------- Requirement note ---------- */
.inst-note { max-width: 62ch; }
.inst-note-line { color: var(--ink-2); font-size: 0.86rem; line-height: 1.55; }
.inst-note-line strong { color: var(--ink); font-weight: 600; }

/* ---------- Terminal fallback ---------- */
.inst-cli { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.inst-cli > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}
.inst-cli > summary::-webkit-details-marker { display: none; }
.inst-cli > summary::before {
  content: "+";
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  transition-property: background-color, color;
  transition-duration: 0.12s;
  transition-timing-function: var(--ease);
}
.inst-cli[open] > summary::before { content: "−"; background: var(--ink); color: var(--paper); }
@media (hover: hover) { .inst-cli > summary:hover::before { background: var(--ink); color: var(--paper); } }
.inst-cli-body { display: grid; gap: 12px; padding-block: 4px 18px; }
.inst-cli-cmds { display: grid; }
.inst-cli-cmds .codebox { font-size: 0.86rem; }

@media (max-width: 640px) {
  .pbox-head, .pbox-text { padding-inline: 16px; }
  .pbox-foot { padding: 0 16px 16px; }
  .pbox-copy { min-height: 60px; }
}