/* ============================================================================
   BW_UI · Bitword reservation site · shared UI layer · FABLE · July 13, 2026
   NEW FILE: safe to deploy, nothing references it until Opus adds
     <link rel="stylesheet" href="fable_ui_jul13/bw_ui.css?v=1">
   Palette law: indigo #2f3150, mint #69dcb0, teal #54bcc3, ice #d7ffff, bg #f2f2f2.
   No gold, no purple. All motion under 350ms and disabled by reduced-motion.
   ========================================================================== */

:root{
  --bw-navy:#2f3150; --bw-mint:#69dcb0; --bw-teal:#54bcc3; --bw-ice:#d7ffff;
  --bw-bg:#f2f2f2; --bw-paper:#ffffff; --bw-ink:#2c3154; --bw-muted:#6a7086;
  --bw-line:#e4e6ee; --bw-mintt:#e6faf2; --bw-cyt:#e0f7f8;
  --bw-mintd:#17805e; --bw-teald:#22757b; --bw-warn:#c0432a;
}

/* ---------- 1 · SHARED TOPBAR (one header, every page · punch list H1) ----- */
.bw-topbar{background:var(--bw-navy);color:#fff;display:flex;align-items:center;gap:12px;
  padding:10px 18px;position:sticky;top:0;z-index:50;font-family:inherit}
.bw-topbar__logo{font-weight:900;font-size:19px;letter-spacing:-.02em;color:#fff;text-decoration:none}
.bw-topbar__pill{border:1px solid rgba(255,255,255,.33);border-radius:50px;font-size:9.5px;
  letter-spacing:.14em;font-weight:800;padding:2px 9px}
.bw-topbar__ctx{color:#c3c9de;font-size:13px}
.bw-topbar__right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.bw-idchip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:50px;padding:5px 14px;font-size:12.5px;font-weight:700;text-decoration:none;
  white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){
  .bw-topbar__ctx{display:none}                /* narrow: logo + identity only */
  .bw-idchip{max-width:130px}                  /* F1-5: never clip mid-word into "My dashboa" */
}

/* ---------- 2 · STICKY CONFIRMATION BAR (D1 · the result IS the screen) --- */
.bw-confirm{position:fixed;left:0;right:0;bottom:0;background:var(--bw-navy);color:#fff;
  display:flex;align-items:center;gap:10px;padding:11px 16px;z-index:60;flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(47,49,80,.28);animation:bw-rise .28s ease-out}
@keyframes bw-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.bw-confirm__check{background:var(--bw-mint);color:var(--bw-navy);border-radius:50%;
  width:26px;height:26px;min-width:26px;display:grid;place-items:center;font-weight:900;
  animation:bw-pop .35s cubic-bezier(.5,1.8,.6,1)}
@keyframes bw-pop{from{transform:scale(0)}to{transform:scale(1)}}
.bw-confirm__line{font-size:13.5px;font-weight:700;min-width:0}
.bw-confirm__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bw-confirm__btn{border-radius:50px;border:1px solid rgba(255,255,255,.45);background:none;
  color:#fff;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.bw-confirm__btn--first{background:var(--bw-mint);border:none;color:var(--bw-navy)}
.bw-confirm__btn:active{transform:scale(.97)}
.bw-confirm__close{background:none;border:none;color:#c3c9de;font-size:16px;cursor:pointer;padding:2px 6px}
.bw-confirm__name{border:none;border-radius:50px;padding:7px 12px;font-size:12.5px;min-width:150px}
@media(max-width:480px){.bw-confirm__acts{margin-left:0;width:100%;justify-content:flex-start}}

/* ---------- 3 · WORD CHIP STATES (F2-4 · one word never carries 3 truths) - */
.bw-chip{display:inline-flex;align-items:center;gap:6px;border-radius:50px;
  padding:7px 14px;font-size:13.5px;font-weight:700;border:1.5px solid var(--bw-line);
  background:var(--bw-paper);color:var(--bw-ink);transition:transform .15s ease}
.bw-chip--free{border-color:var(--bw-mint);color:var(--bw-mintd);background:var(--bw-mintt)}
.bw-chip--checking{color:var(--bw-muted);animation:bw-breathe .9s ease-in-out infinite alternate}
@keyframes bw-breathe{from{opacity:.55}to{opacity:1}}
.bw-chip--settled{animation:bw-settle .15s ease-out}          /* add for one frame when a verdict lands */
@keyframes bw-settle{from{transform:scale(.94)}to{transform:scale(1)}}
.bw-chip--taken{background:#f4f4f7;border-color:var(--bw-line);color:#9aa0b5}
.bw-chip--generic{background:var(--bw-cyt);border-color:var(--bw-teal);color:var(--bw-teald)} /* "held aside · generic word" */
.bw-chip--yours{background:var(--bw-mintt);border-color:var(--bw-mint);color:var(--bw-mintd)} /* "yours · held since {date}" */

/* ---------- 4 · PINNED ACTION BAR at narrow width (F2-1 / E accept fold) -- */
.bw-pinbar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bw-bg) 28%);
  padding:14px 0 10px;z-index:40}
.bw-pinbar .bw-btn{margin:0 auto}
.bw-btn{display:block;width:100%;max-width:680px;text-align:center;border:none;border-radius:50px;
  padding:14px 18px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;
  background:var(--bw-mint);color:var(--bw-navy);transition:transform .12s ease}
.bw-btn:active{transform:scale(.97)}
.bw-btn[disabled]{background:#e4e6ee;color:#9aa0b5;cursor:default}
.bw-btn--line{background:none;border:1.5px solid var(--bw-teal);color:var(--bw-teald)}

/* ---------- 5 · FRIENDLY ERROR (D4 · never blames, keeps what survived) --- */
.bw-error{background:#fdf0ec;border:1px solid #efc7ba;border-radius:12px;color:var(--bw-warn);
  padding:10px 14px;font-size:13px;margin:8px 0;display:flex;gap:8px;align-items:flex-start}
.bw-error a{color:var(--bw-warn);font-weight:800}

/* ---------- 6 · TICKET RIBBON + HERO GRID (dashboard rebuild · H2) -------- */
.bw-ribbon{background:var(--bw-navy);color:#fff;border-radius:12px;display:flex;align-items:center;
  gap:12px;padding:9px 16px;margin:10px 0;font-size:13px}
.bw-ribbon__memb{background:var(--bw-mint);color:var(--bw-navy);font-weight:800;border-radius:50px;
  padding:3px 12px;font-size:12px;white-space:nowrap}
.bw-ribbon__quiet{color:#c3c9de;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-ribbon__btn{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:50px;padding:6px 14px;font-size:12.5px;cursor:pointer;white-space:nowrap;font-family:inherit}
.bw-hero{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;margin:14px 0}
@media(max-width:760px){.bw-hero{grid-template-columns:1fr}}
.bw-card{background:var(--bw-paper);border:1px solid var(--bw-line);border-radius:16px;
  padding:16px 18px;transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){.bw-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(47,49,80,.10)}}
.bw-card--mine{border-top:5px solid var(--bw-mint)}
.bw-card--send{border-top:5px solid var(--bw-teal)}
.bw-card--res{border-top:5px solid var(--bw-navy)}
.bw-card__k{font-size:10.5px;letter-spacing:.09em;font-weight:800;margin-bottom:6px;color:var(--bw-muted)}
.bw-card--mine .bw-card__k{color:var(--bw-mintd)}
.bw-card--send .bw-card__k{color:var(--bw-teald)}
.bw-slogrow{background:var(--bw-paper);border:1px solid var(--bw-line);border-radius:14px;
  display:flex;align-items:center;gap:10px;padding:10px 16px;margin:6px 0;flex-wrap:wrap}
.bw-slogrow input{flex:1;min-width:180px;border:1px solid var(--bw-line);border-radius:50px;
  padding:8px 14px;font-size:13px;font-family:inherit}

/* ---------- 7 · MOTION OFF-SWITCH (always last, wins everything) ---------- */
@media(prefers-reduced-motion:reduce){
  .bw-confirm,.bw-confirm__check,.bw-chip,.bw-btn,.bw-card{animation:none!important;transition:none!important}
}