/* Shared by the feed and the branch page: the vote bar, the account control, the
   replies list. Tokens come from whichever page hosts it (same names in both). */
.votebar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vote{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font:inherit; font-size:13.5px; line-height:1; cursor:pointer; font-variant-numeric:tabular-nums; }
.vote svg{ width:15px; height:15px; fill:currentColor; }
.vote.dislike svg{ transform:scaleY(-1); }
.vote b{ color:var(--ink); font-weight:600; }
.vote:hover{ border-color:var(--ink-soft); }
.vote.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.vote.on b{ color:inherit; }
.vote.dislike.on{ background:var(--danger); border-color:var(--danger); }
.votemsg{ color:var(--danger); font-size:12.5px; }
.acct{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.acct .me{ color:var(--ink); font-weight:500; font-family:"IBM Plex Mono",monospace; }
.acct form.signin{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
.acct form.signin input{ font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px; min-width:0; width:200px; max-width:100%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.acct form.signin input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.acct form.signin button{ font:inherit; font-size:13.5px; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
.acct form.signin button:disabled{ opacity:.6; cursor:default; }
.acct form.signin .hint{ flex-basis:100%; color:var(--ink-soft); font-size:12.5px; }
.acct form.codeform .hint{ color:var(--ink); }
.acct form.codeform .hint b{ font-weight:600; }
.acct form.codeform input{ width:170px; font-family:"IBM Plex Mono",monospace; letter-spacing:2px; }
.acct form.codeform .hint2{ flex-basis:100%; color:var(--danger); font-size:12.5px; }
.acct form.codeform .hint2:empty{ display:none; }
.acct .linkbtn{ font:inherit; font-size:13px; background:none; border:0; padding:0; color:var(--ink-soft);
  text-decoration:underline; cursor:pointer; }
.acct .autherr{ color:var(--danger); font-size:12.5px; }
.replies h4{ margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.replies .none{ color:var(--ink-soft); font-size:13.5px; }
.reply{ display:flex; flex-direction:column; gap:2px; text-decoration:none; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); margin:6px 0; text-align:left; }
.reply:hover{ border-color:var(--ink-soft); }
.reply .t{ color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.reply .w{ color:var(--ink-soft); font-size:12.5px; }
/* ---- the account button + panel (2026-09-20): the silhouette, top right ---- */
.headbtns{ display:flex; gap:8px; align-items:center; }
.acctbtn{ width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); }
.acctbtn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.acctbtn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.acctover{ position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start; justify-content:flex-end;
  padding:64px 16px 16px; background:rgba(0,0,0,.35); }
.acctcard{ width:min(440px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:14px; color:var(--ink); }
.accthead{ display:flex; align-items:center; gap:12px; }
.accthead .av{ width:44px; height:44px; border-radius:50%; background:var(--surface2); display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); flex:0 0 auto; }
.accthead .av svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.accthead .name{ font-weight:600; font-size:15px; }
.accthead .role{ color:var(--ink-soft); font-size:12.5px; }
.acctcard .acctacts{ display:flex; gap:10px; }
.acctcard .acctacts button{ flex:1; font:inherit; font-weight:600; font-size:13.5px; padding:11px 12px; border-radius:9px;
  cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
.acctcard .acctacts button.alt{ background:transparent; color:var(--ink); border-color:var(--line); }
.acctout:empty{ display:none; }
.acctout .lead{ font-weight:600; font-size:13.5px; margin-bottom:8px; }
.acctout .sub{ color:var(--ink-soft); font-size:12.5px; line-height:1.45; }
.acctout .linkrow{ display:flex; gap:6px; margin-bottom:10px; }
.acctout .linkrow input{ flex:1; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:12px; padding:7px 9px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
.acctout .linkrow button, .acctrow button{ font:inherit; font-size:12.5px; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.acctout .qr{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.acctout .qr img, .acctout .qr canvas{ background:#fff; padding:8px; border-radius:10px; }
.acctrow{ display:flex; justify-content:flex-end; }
/* Import branch = the camera (scan.js) */
.scanbox{ display:flex; flex-direction:column; gap:8px; }
.scanvid{ display:block; width:100%; max-height:260px; object-fit:cover; border-radius:10px; background:#000; }
.scanhint{ color:var(--ink-soft); font-size:12.5px; line-height:1.45; }
.scanmsg{ color:var(--ink); font-size:12.5px; font-weight:600; }
.scanmsg:empty{ display:none; }
.scanpaste{ display:flex; gap:6px; margin:0; }
.scanpaste input{ flex:1; min-width:0; font:inherit; font-size:12.5px; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink); }
.scanpaste button{ font:inherit; font-size:12.5px; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
/* the branch page footer (built by the cloud shim) */
.cloudfoot{ max-width:640px; margin:0 auto; padding:10px 16px 28px; display:flex; flex-direction:column; gap:12px;
  text-align:left; font-size:13px; color:var(--ink-soft); }
.cloudfoot .whoby b{ color:var(--ink); font-weight:600; }
.cloudfoot .whoby a{ color:inherit; }
.cloudfoot .inreply a{ color:var(--ink); }
.cloudfoot .replyhow{ font-size:12.5px; border-top:1px solid var(--line); padding-top:10px; }
.cloudfoot .replyhow code{ font-family:"IBM Plex Mono",monospace; font-size:12px; background:var(--surface2); padding:1px 5px; border-radius:4px; }