/* Teile-Brett (brett.html): a full-screen board for laying out parts around the Self.
   Uses the site tokens from styles.css (--ground, --card, --ochre …). */
html,body.brett-page{height:100%}
body.brett-page{
  display:grid;grid-template-rows:auto 1fr;height:100dvh;overflow:hidden;
  background:var(--ground);color:var(--ink);
}
.bb-top{
  display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;
  padding:.6rem max(16px,1.2rem);border-bottom:1px solid var(--line);background:var(--ground);
  padding-top:max(.6rem,env(safe-area-inset-top,0px));
}
.bb-top .logo{font-size:1.15rem;order:0;margin-right:0}
.bb-title{font-family:var(--font-head);font-weight:400;font-size:1.1rem;color:var(--ink-soft);margin:0;padding-left:1.1rem;border-left:1px solid var(--line);line-height:1.2}
.bb-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.bb-btn{
  display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.9rem;line-height:1.2;
  background:var(--card);color:var(--head);border:1px solid var(--line);border-radius:999px;
  padding:.45rem .95rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap
}
.bb-btn:hover{border-color:var(--ochre);background:var(--raised)}
.bb-btn:focus-visible,.bb-item:focus-visible,.bb-zoom button:focus-visible,.bb-kinds label:focus-within{outline:2px solid var(--ochre);outline-offset:2px}
.bb-btn.ghost{background:transparent;color:var(--ink-soft)}
.bb-btn.solid{background:var(--ochre);color:var(--on-accent);border-color:var(--ochre);font-weight:500}
.bb-btn.solid:hover{background:var(--ochre-dim)}
.bb-btn.danger{color:#f0a08a}
.bb-btn.confirm{background:#5a2a24;border-color:#E8866C;color:#ffd9cf}
.bb-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--ink-soft);flex:none}
.bb-live[data-state="connecting"] .bb-dot,.bb-live[data-state="waiting"] .bb-dot,.bb-live[data-state="lost"] .bb-dot,.bb-live[data-state="nohost"] .bb-dot{background:var(--ochre);animation:bbPulse 1.4s ease-in-out infinite}
.bb-live[data-state="connected"] .bb-dot{background:#8fd18a;box-shadow:0 0 0 3px rgba(143,209,138,.18)}
.bb-live[data-state="error"] .bb-dot{background:#E8866C}
.bb-live[data-state="connected"]{border-color:rgba(143,209,138,.5)}
@keyframes bbPulse{50%{opacity:.35}}

.bb-app{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0}

/* side panel */
.bb-side{background:var(--card);border-right:1px solid var(--line);overflow-y:auto;min-height:0;overscroll-behavior:contain}
.bb-side-in{padding:1rem 16px 2rem;display:flex;flex-direction:column;gap:1rem}
.bb-own{display:flex;flex-direction:column;gap:.55rem;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem}
.bb-own h2,.bb-group h3{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.bb-own input,.bb-search input,.bb-pop textarea,.bb-link-row input{
  font:inherit;font-size:.95rem;color:var(--head);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;width:100%;min-width:0
}
.bb-own input:focus,.bb-search input:focus,.bb-pop textarea:focus{outline:none;border-color:var(--ochre)}
.bb-own .bb-btn{align-self:flex-start}
.bb-kinds{display:flex;flex-wrap:wrap;gap:.35rem}
.bb-kinds label{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem .22rem .4rem;cursor:pointer;background:var(--card)}
.bb-kinds input{position:absolute;opacity:0;pointer-events:none}
.bb-kinds i{width:.75rem;height:.75rem;border-radius:50%;background:var(--kc);flex:none}
.bb-kinds label:has(input:checked){border-color:var(--kc);background:color-mix(in srgb,var(--kc) 16%,var(--card));color:var(--head)}
.bb-search{position:sticky;top:-1rem;z-index:2;background:var(--card);padding:.4rem 0}
.bb-list{display:flex;flex-direction:column;gap:1.1rem}
.bb-group{display:flex;flex-direction:column;gap:.15rem}
.bb-group h3{display:flex;align-items:center;gap:.45rem;margin-bottom:.3rem}
.bb-group h3 i{width:.6rem;height:.6rem;border-radius:50%;background:var(--kc)}
.bb-item{
  display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;font:inherit;font-size:.92rem;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:12px;padding:.3rem .45rem;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none
}
.bb-item:hover{background:var(--raised);border-color:var(--line);color:var(--head)}
.bb-thumb{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;box-shadow:inset 0 0 0 2px var(--kc);background:#1c1417;display:grid;place-items:center}
.bb-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;padding:2px}
.bb-thumb svg{width:22px;height:22px}
.bb-nm{flex:1;min-width:0}
.bb-count{font-size:.72rem;font-weight:700;color:var(--on-accent);background:var(--ochre);border-radius:999px;padding:.05rem .45rem;min-width:1.3rem;text-align:center}
.bb-count:empty{display:none}
.bb-hint{font-size:.82rem;color:var(--ink-soft);margin:0;line-height:1.5}
.bb-ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;opacity:.9;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.bb-ghost .bb-thumb{width:64px;height:64px}
.bb-ghost .bb-thumb svg{width:38px;height:38px}

/* stage */
.bb-stage{position:relative;overflow:hidden;min-height:0;max-width:none;margin:0;padding:0;background:var(--ground)}
#bb-svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#bb-svg.panning{cursor:grabbing}
#bb-svg text{font-family:var(--font-body);pointer-events:none}
.self{cursor:pointer}
.self .halo{animation:bbBreath 6s ease-in-out infinite;transform-origin:0 0;transform-box:fill-box}
@keyframes bbBreath{50%{opacity:.6;transform:scale(1.06)}}
.self-t{font-family:var(--font-head) !important;font-size:25px;fill:#2a1c10;text-anchor:middle}
.self-s{font-size:12.5px;fill:#c99a55;text-anchor:middle;letter-spacing:.06em}
.self.sel .self-c{stroke:#fff3d6;stroke-width:3}
.self.from .self-c,.tok.from .base{stroke-dasharray:6 5}
.tok{cursor:grab}
.tok .halo{fill:none;stroke:var(--ochre);stroke-width:2.5;stroke-dasharray:5 6;opacity:0}
.tok.sel .halo,.tok.from .halo{opacity:1}
.tok .nm{font-size:15px;font-weight:500;fill:var(--head);text-anchor:middle;paint-order:stroke;stroke:var(--ground);stroke-width:4px;stroke-linejoin:round}
.tok .nt{font-size:12.5px;font-style:italic;fill:var(--ink-soft);text-anchor:middle;paint-order:stroke;stroke:var(--ground);stroke-width:4px;stroke-linejoin:round}
.lnk{cursor:pointer}
.lnk .hit{stroke:transparent;stroke-width:20;fill:none}
.lnk .ln{fill:none;stroke-linecap:round}
.lnk .ln{stroke:#b39a8a;stroke-width:2.5}
.lnk.sel .ln{stroke:#e8a05a;filter:drop-shadow(0 0 4px rgba(239,166,36,.7))}
.lnk .lt{font-size:12.5px;fill:var(--head);text-anchor:middle;paint-order:stroke;stroke:var(--ground);stroke-width:5px;cursor:pointer}
.lnk .lt.ph{fill:var(--ink-soft);font-style:italic}
.cur circle{fill:none;stroke:#8fd18a;stroke-width:2.5}
.cur text{font-size:12px;fill:#8fd18a;paint-order:stroke;stroke:var(--ground);stroke-width:4px}

.bb-zoom{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.3rem}
.bb-zoom button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--head);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.bb-zoom button:hover{border-color:var(--ochre)}

.bb-pop{
  position:absolute;z-index:5;transform:translate(-50%,-100%);display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.4rem;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100% - 32px);white-space:nowrap
}
.bb-pop.below{transform:translate(-50%,0)}
.bb-pop .bb-btn{padding:.35rem .7rem;font-size:.84rem}
.bb-pop .bb-btn.on{border-color:var(--ochre);background:rgba(239,166,36,.16)}
.bb-pop .sep{width:1px;align-self:stretch;background:var(--line);margin:0 .1rem}
.bb-pop form{display:flex;flex-direction:column;gap:.4rem;width:min(300px,70vw);padding:.2rem}
.bb-pop textarea{resize:vertical;min-height:4.2rem;font-size:.9rem}
.bb-pop .row{display:flex;gap:.3rem;justify-content:flex-end}
.bb-pop form.lf{flex-direction:row;width:auto;padding:0}
.bb-pop form.lf input{font:inherit;font-size:.88rem;color:var(--head);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:.38rem .8rem;width:min(300px,52vw)}
.bb-pop form.lf input:focus{outline:none;border-color:var(--ochre)}
.bb-pop .sw{width:.7rem;height:.7rem;border-radius:50%;background:var(--kc);display:inline-block}

.bb-status{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;background:var(--raised);border:1px solid var(--ochre);color:var(--head);border-radius:999px;padding:.45rem 1rem;font-size:.88rem;max-width:calc(100% - 32px);text-align:center;z-index:4}
.bb-empty{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;max-width:min(520px,calc(100% - 120px));text-align:center;font-size:.92rem;color:var(--ink-soft);line-height:1.5;pointer-events:none}
.bb-empty[hidden]{display:none}
.bb-side-toggle{display:none}

/* live panel */
.bb-live-panel{
  position:fixed;z-index:30;top:calc(64px + env(safe-area-inset-top,0px));right:16px;width:min(420px,calc(100vw - 32px));
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.2rem 1rem;box-shadow:0 18px 50px rgba(0,0,0,.55)
}
.bb-live-panel h2{font-family:var(--font-head);font-weight:400;font-size:1.3rem;color:var(--head);margin:0 2rem .6rem 0}
.bb-live-lead,.bb-live-note,.bb-live-state{font-size:.9rem;line-height:1.55;margin:0 0 .8rem}
.bb-live-note{font-size:.8rem;color:var(--ink-soft)}
.bb-live-state{color:var(--head);display:flex;gap:.5rem;align-items:flex-start}
.bb-live-state:empty{display:none}
.bb-link-row{display:flex;gap:.4rem;margin-bottom:.8rem}
.bb-link-row input{font-size:.82rem;color:var(--sienna)}
.bb-live-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.bb-x{position:absolute;right:.6rem;top:.5rem;background:none;border:none;color:var(--ink-soft);font-size:1.5rem;cursor:pointer;line-height:1;padding:.2rem .4rem}
.is-guest #bb-clear,.is-guest #bb-live-host,.is-guest #bb-stop{display:none}

@media (max-width:860px){
  .bb-title{display:none}
  .bb-lbl{display:none}
}
@media (max-width:760px){
  .bb-pop{white-space:normal;max-width:min(380px,calc(100% - 32px))}
  .bb-top{gap:.5rem;padding-left:16px;padding-right:16px}
  .bb-top .logo span{display:none}
  .bb-actions{gap:.35rem}
  .bb-btn{padding:.4rem .7rem;font-size:.84rem}
  .bb-app{grid-template-columns:minmax(0,1fr)}
  .bb-side{
    position:fixed;z-index:20;left:0;right:0;bottom:0;height:min(62dvh,560px);border-right:none;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;transform:translateY(102%);visibility:hidden;transition:transform .28s ease,visibility 0s .28s;box-shadow:0 -14px 40px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom,0px)
  }
  .bb-side.open{transform:none;visibility:visible;transition:transform .28s ease}
  .bb-side-toggle{
    display:inline-flex;align-items:center;gap:.3rem;position:absolute;left:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:6;
    font:inherit;font-weight:500;background:var(--ochre);color:var(--on-accent);border:none;border-radius:999px;padding:.6rem 1.1rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)
  }
  .bb-empty{bottom:78px;max-width:calc(100% - 32px)}
  .bb-live-panel{top:auto;bottom:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){.self .halo{animation:none}.bb-side{transition:none}}