/*
 * PlattformFinder.css — interactive Behnke platform finder (PlattformFinder.js).
 *
 * Static asset, independent of the Markdown→HTML build. Light theme, Behnke
 * blue (var --behnke-design, matching the wiki toolbar). Drives two modes that
 * share the same markup: an inline wizard ([data-plattform-finder]) and a modal
 * overlay ([data-plattform-finder-open]). All rules are scoped under .pf-.
 */

.pf{
  --pf-accent: var(--behnke-design, #0066cc);
  --pf-accent-fg:#fff;
  --pf-card:#ffffff;
  --pf-fg:#1b2532;
  --pf-muted:#5b6472;
  --pf-line:#dce1e8;
  --pf-soft:#f4f7fb;          /* soft blue-grey surface */
  --pf-hover:#eaf3fc;         /* light blue hover */
  --pf-ring:rgba(0,102,204,.30);
  --pf-badge-bg:#eaf2fc;
  color:var(--pf-fg);
}

.pf *{box-sizing:border-box}
.pf-card{
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:16px;
  padding:26px 26px 22px; box-shadow:0 1px 2px rgba(16,42,76,.05); max-width:660px;
}
.pf-step{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--pf-accent);
  font-weight:700; margin-bottom:.6rem;
}
.pf-q{font-size:1.18rem; line-height:1.5; margin:0 0 1.4rem; font-weight:600; color:var(--pf-fg)}
.pf-opts{display:flex; flex-direction:column; gap:.5rem}
.pf-opt{
  appearance:none; text-align:left; width:100%; cursor:pointer;
  background:var(--pf-card); color:var(--pf-fg); border:1px solid var(--pf-line);
  border-radius:11px; padding:.9rem 1.05rem; font:inherit; font-weight:500;
  transition:background .12s, border-color .12s, box-shadow .12s; display:flex; align-items:center; gap:.6rem;
}
.pf-opt:hover{background:var(--pf-hover); border-color:var(--pf-accent)}
.pf-opt:focus-visible{outline:none; box-shadow:0 0 0 3px var(--pf-ring); border-color:var(--pf-accent)}
.pf-opt .pf-chev{margin-left:auto; color:var(--pf-muted); font-size:1.15rem; opacity:.55; transition:color .12s, opacity .12s}
.pf-opt:hover .pf-chev{color:var(--pf-accent); opacity:1}

/* Example screenshots (from the original manuals). */
.pf-figs{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 1.1rem}
.pf-fig{flex:1 1 210px; margin:0}
.pf-fig img{
  width:100%; height:auto; display:block; border:1px solid var(--pf-line);
  border-radius:10px; background:var(--pf-soft);
}
.pf-fig figcaption{font-size:.8rem; color:var(--pf-muted); margin-top:.4rem; text-align:center; font-weight:600}
.pf-result-fig{margin:.9rem 0 0}
.pf-result-fig img{max-width:100%; height:auto; border:1px solid var(--pf-line); border-radius:10px; background:var(--pf-soft)}

/* Result. */
.pf-result{display:flex; align-items:center; gap:1rem; margin-bottom:.4rem}
.pf-badge{
  flex:none; width:64px; height:64px; border-radius:14px; background:var(--pf-badge-bg);
  color:var(--pf-accent); display:grid; place-items:center; font-size:1.5rem; font-weight:800;
  border:1px solid var(--pf-accent);
}
.pf-note{color:var(--pf-muted); margin:.2rem 0 0}

/* Controls. */
.pf-bar{display:flex; gap:.6rem; margin-top:1.3rem; flex-wrap:wrap}
.pf-bar button{
  appearance:none; cursor:pointer; font:inherit; border-radius:9px; padding:.55rem 1rem;
  border:1px solid var(--pf-line); background:var(--pf-card); color:var(--pf-fg); font-weight:500;
}
.pf-bar button:hover{background:var(--pf-hover); border-color:var(--pf-accent)}
.pf-bar .pf-primary{background:var(--pf-accent); color:var(--pf-accent-fg); border-color:var(--pf-accent)}
.pf-bar .pf-primary:hover{background:var(--pf-accent); color:var(--pf-accent-fg); border-color:var(--pf-accent); filter:brightness(1.08)}
.pf-bar button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--pf-ring)}
.pf-crumbs{margin-top:1rem; font-size:.8rem; color:var(--pf-muted)}

/* Trigger button (opens the modal from any page). */
.pf-trigger{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font:inherit;
  font-weight:600; border-radius:10px; padding:.6rem 1.1rem; border:1px solid var(--pf-accent);
  background:var(--pf-accent); color:var(--pf-accent-fg); text-decoration:none;
}
.pf-trigger:hover{filter:brightness(1.06)}
.pf-trigger:focus-visible{outline:none; box-shadow:0 0 0 3px var(--pf-ring)}

/* Modal overlay. */
.pf-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start;
  justify-content:center; padding:12vh 16px 24px; background:rgba(16,42,76,.45);
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.pf-overlay[hidden]{display:none}
.pf-modal{
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:16px;
  width:100%; max-width:620px; box-shadow:0 24px 64px rgba(16,42,76,.28);
  animation:pf-in .16s ease-out;
}
@keyframes pf-in{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.pf-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:15px 18px; border-bottom:1px solid var(--pf-line);
}
.pf-modal-title{font-weight:700; font-size:1.05rem; margin:0; color:var(--pf-accent)}
.pf-close{
  appearance:none; cursor:pointer; border:none; background:transparent; color:var(--pf-muted);
  font-size:1.5rem; line-height:1; padding:.15rem .4rem; border-radius:8px;
}
.pf-close:hover{background:var(--pf-hover); color:var(--pf-fg)}
.pf-close:focus-visible{outline:none; box-shadow:0 0 0 3px var(--pf-ring)}
.pf-modal-body{padding:18px}
.pf-modal-body .pf-card{border:none; box-shadow:none; padding:0; max-width:none}