/* ============================================================================
   BW_UI2 · Bitword reservation site · round 2 styles · FABLE · July 13, 2026 (night)
   NEW FILE, additive. Deploy alongside bw_ui.css; nothing changes until a page
   includes it:  <link rel="stylesheet" href="fable_ui_jul13/bw_ui2.css?v=3">
   Requires bw_ui.css (topbar base, confirm bar, chips, errors live there).
   Palette law: indigo #2f3150 · mint #69dcb0 · teal #54bcc3 · ice #d7ffff · bg #f2f2f2.
   ========================================================================== */

/* ---------- topbar v2: nav links + identity chip that survives 390 ---------- */
.bw-topbar__nav{display:flex;gap:14px;align-items:center;margin-left:auto;margin-right:10px}
.bw-topbar__nav a{color:#d7ffff;text-decoration:none;font-size:12.5px;font-weight:700;opacity:.92}
.bw-topbar__nav a:hover{opacity:1;text-decoration:underline}
.bw-idchip{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:430px){
  .bw-topbar__nav a{display:none}
  .bw-topbar__nav a.bw-topbar__nav--keep{display:inline}      /* only "The board" survives */
  .bw-idchip{max-width:110px}                                  /* F1-5: chip never clips mid-word into "My dashboa…" */
}
/* the wizard step chips (claim) live BELOW the shared bar, same navy, no logo */
.bw-subbar{background:#2f3150;display:flex;gap:8px;justify-content:center;padding:8px 12px;flex-wrap:wrap}

@media print{.bw-topbar,.bw-subbar{display:none}}   /* report.html prints clean */

/* ---------- YOUR INVITES · the sender's return visit (punch list S2) -------- */
.bw-invites{background:#fff;border:1px solid #e4e6ee;border-top:5px solid #54bcc3;border-radius:16px;padding:14px 16px;margin:12px 0}
.bw-invites__lab{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#22757b;margin-bottom:8px}
.bw-invites table{width:100%;border-collapse:collapse;font-size:13px}
.bw-invites th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#6a7086;padding:4px 8px;border-bottom:1px solid #e4e6ee}
.bw-invites td{padding:8px;border-bottom:1px solid #f0f1f6;vertical-align:middle;color:#2c3154}
.bw-invites td b{color:#2f3150}
.bw-inv-state{display:inline-block;font-size:11.5px;font-weight:800;border-radius:50px;padding:2px 10px;background:#ececf2;color:#2f3150}
.bw-inv-state--accepted{background:#e6faf2;color:#17805e;border:1px solid #b5ecd6}
.bw-inv-state--pending{background:#e0f7f8;color:#22757b;border:1px solid #aee4e7}
.bw-inv-act{display:inline-block;border:1.5px solid #54bcc3;color:#22757b;background:#fff;border-radius:50px;
  padding:4px 12px;font-size:12px;font-weight:800;cursor:pointer;margin-left:6px;user-select:none}
.bw-inv-act:active{transform:scale(.97)}
.bw-inv-act--mint{background:#69dcb0;border-color:#69dcb0;color:#17364f}
.bw-invites__empty{font-size:13.5px;color:#6a7086;padding:10px 4px}
.bw-invites__empty a{color:#17805e;font-weight:800}
@media(max-width:430px){
  .bw-invites thead{display:none}
  .bw-invites tr{display:block;border-bottom:1px solid #e4e6ee;padding:8px 0}
  .bw-invites td{display:inline-block;border:none;padding:2px 6px 2px 0}
}

/* ---------- the feedback strip (punch list S3) ------------------------------ */
.bw-feedstrip{background:#fff;border:1px solid #e4e6ee;border-left:5px solid #69dcb0;border-radius:14px;
  padding:13px 16px;margin:12px 0;font-size:14px;line-height:1.55;color:#2c3154}
.bw-feedstrip b{color:#2f3150}
.bw-feedstrip__ill{color:#6a7086}
.bw-feedstrip__go{display:inline-block;margin-top:8px;background:#69dcb0;color:#17364f;border-radius:50px;
  padding:8px 16px;font-size:13.5px;font-weight:800;text-decoration:none}
.bw-feedstrip__go:active{transform:scale(.97)}

/* ---------- THE RULE OF TWO · pair-invite (spec: FABLE_RULE_OF_TWO_JUL13.md) - */
.bw-pair{background:#fff;border:1px solid #e4e6ee;border-left:5px solid #69dcb0;border-radius:14px;padding:13px 16px;margin:12px 0}
.bw-pair__head{font-size:14px;font-weight:800;color:#2f3150;margin-bottom:8px}
.bw-pair__slot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px dashed #e4e6ee}
.bw-pair__slot:first-of-type{border-top:0}
.bw-pair__name{border:1.5px solid #d9dbe6;border-radius:10px;padding:8px 11px;font-size:14px;font-weight:600;color:#2f3150;width:170px;max-width:45%}
.bw-pair__name:focus{outline:none;border-color:#69dcb0;box-shadow:0 0 0 3px rgba(105,220,176,.22)}
.bw-pair__verdict{font-size:13px;color:#6a7086}
.bw-pair__open{color:#17805e}
.bw-pair__sent{font-size:13.5px;font-weight:700;color:#22757b}
.bw-pair__kept{font-size:13.5px;font-weight:800;color:#17805e;background:#e6faf2;border:1px solid #b5ecd6;border-radius:50px;padding:4px 12px}
.bw-pair__slot--done{opacity:.95}

/* ---------- chips two-up at 390 (Opus holding item 6; reserve + compose) ----
   Targets the existing .freqs container on reserve.html and any wordchips list.
   Halves the chip stack height so the accept button shares the first screen. */
@media(max-width:430px){
  .freqs,.wordchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .freqs .chip,.wordchips .chip{width:100%;justify-content:flex-start;font-size:13px;padding:7px 11px;overflow-wrap:anywhere}
}

/* ===== APPENDED BY OPUS, JULY 13 NIGHT: FABLE v4 DELTA (F-1 home topbar 390, F-7 sub-bar pill) ===== */
/* FABLE-V4-DELTA */
@media(max-width:430px){
  .bw-topbar{gap:8px;padding:10px 12px}
  .bw-topbar__nav{margin-right:6px}
  .bw-topbar__nav a{white-space:nowrap}
  /* home only: when the language picker rides in the bar, the RESERVE
     wordmark pill yields its space. Everywhere else the pill stays. */
  .bw-topbar:has(#bwLangPick) .bw-topbar__pill{display:none}
  .bw-topbar #bwLangPick{max-width:92px;min-width:0;flex:0 1 auto}
  .bw-idchip{max-width:96px}
  /* claim sub-bar: pills ellipsize instead of hard-clipping mid-word */
  .bw-subbar>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
}


/* ===== APPENDED BY OPUS, JULY 15 2026: MOBILE FIXES (topbar crowding + long-word overflow) ===== */
@media(max-width:430px){
  /* HOME/BOARD topbar: with the language picker in the bar, the lone "The board" nav
     link just duplicates the logo and squeezes the picker into the dashboard chip.
     Drop the nav here so the two never collide, and let the chip show its full label. */
  .bw-topbar:has(#bwLangPick) .bw-topbar__nav{display:none}
  .bw-topbar:has(#bwLangPick) .bw-idchip{max-width:150px;min-width:0}
  .bw-topbar #bwLangPick{max-width:96px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Long @names, #hashtags and bitwords must WRAP in their card and clock, never run off-screen. */
.mark .mid{min-width:0}
.mark .at,.mark .hn,.mark .big,.mark .hash,.mark .bh,.mark .d{overflow-wrap:anywhere;word-break:break-word}
.clock{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.clock b{word-break:normal}