/* ============================================================
   THE BOARD · focus.css — tap a pin → it expands in place,
   actions live inside the expanded item (no bottom sheet)
   ============================================================ */

.focus-layer{position:fixed;inset:0;z-index:78;display:none}
body.focus-open .focus-layer{display:block}
.focus-scrim{position:absolute;inset:0;background:rgba(10,10,10,.78);opacity:0;transition:opacity .22s}
body.focus-open .focus-scrim{opacity:1}

/* the expanded item rides from the pin's wall position to center */
.focus-item{position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;
  transition:transform .26s cubic-bezier(.32,.72,.28,1);will-change:transform;transform-origin:top left}
.focus-item .fi-pin{position:relative;display:grid;place-items:center}
.focus-item .pin-obj{cursor:default}

/* action panel — part of the expanded item, slides out beneath it */
.focus-panel{width:100%;max-width:300px;margin-top:14px;background:var(--char);color:var(--cream);
  border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.5);overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity .2s .12s, transform .2s .12s}
body.focus-open .focus-panel{opacity:1;transform:translateY(0)}
.focus-panel .fp-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(232,220,196,.12)}
.focus-panel .fp-head .av{width:30px;height:30px;border-radius:50%;background:var(--teal-2);display:grid;place-items:center;font-family:var(--f-head);font-weight:900;font-size:13px;color:var(--cream);flex:none}
.focus-panel .fp-head .av.anon{background:var(--char-3)}
.focus-panel .fp-head .who b{display:block;font-family:var(--f-head);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.focus-panel .fp-head .who span{font-family:var(--f-mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,220,196,.5);font-weight:500}
.focus-panel .fp-head .fp-close{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(232,220,196,.3);color:var(--cream);display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;background:none}

.focus-panel .fp-acts{display:flex}
.focus-panel .fp-acts button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px 12px;
  background:none;border:none;border-right:1px solid rgba(232,220,196,.12);cursor:pointer;color:var(--cream);
  font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .12s;-webkit-tap-highlight-color:transparent}
.focus-panel .fp-acts button:last-child{border-right:0}
.focus-panel .fp-acts button:active{background:rgba(232,220,196,.08)}
.focus-panel .fp-acts button .ico{width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:12px;font-family:var(--f-mono)}
.focus-panel .fp-acts button.danger{color:var(--terra-3)}
.focus-panel .fp-acts button.liked{color:var(--teal)}
.focus-panel .fp-acts button:disabled{opacity:.35;cursor:not-allowed}

.focus-panel .fp-link{display:block;width:100%;text-align:left;background:rgba(232,220,196,.06);border:none;border-top:1px solid rgba(232,220,196,.12);
  padding:9px 14px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;color:rgba(232,220,196,.55);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focus-panel .fp-link b{color:var(--teal);font-weight:600;letter-spacing:.16em;margin-right:8px}