/* RealHens shared member-UI components.
   Extends the identity of index.htm (same palette, radii, shadows) - used by the
   stream page's community strip and by my.php. Members-only markup uses these. */

:root{
  --rh-bg:#ffffff; --rh-soft:#f3f8fc; --rh-line:#e3ebf2; --rh-text:#1f2b38; --rh-muted:#5b6b7b;
  --rh-accent:#16a3e0; --rh-accent-dk:#0d84c2;
  --rh-egg:#f5b301; --rh-egg-dk:#e0771f; --rh-egg-soft:rgba(245,179,1,.12);
  --rh-heart:#e0567a; --rh-good:#0a8f57;
}

/* ---------- primitives ---------- */
.rh-card{background:var(--rh-bg);border:1px solid var(--rh-line);border-radius:18px;padding:22px;
         box-shadow:0 6px 18px rgba(31,43,56,.05)}
.rh-card h3{font-size:1.02rem;font-weight:800;display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--rh-text)}
.rh-card h3 .grow{flex:1}
.rh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rh-muted{color:var(--rh-muted)}
.rh-empty{color:var(--rh-muted);font-size:.92rem;text-align:center;padding:18px 8px;line-height:1.5}
.rh-skel{position:relative;overflow:hidden;background:var(--rh-soft);border-radius:10px;min-height:16px}
.rh-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:rhshimmer 1.3s infinite}
@keyframes rhshimmer{100%{transform:translateX(100%)}}

/* ---------- identity: egg balance + membership ---------- */
.eggchip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.82rem;
  color:#8a5b00;background:var(--rh-egg-soft);border:1px solid rgba(245,179,1,.45);
  padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tierbadge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem;
  color:var(--rh-accent-dk);background:rgba(22,163,224,.10);border:1px solid rgba(22,163,224,.35);
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.tierbadge.free{color:var(--rh-muted);background:var(--rh-soft);border-color:var(--rh-line)}
.rh-ident{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rh-ident .who{font-size:1.35rem;font-weight:800;letter-spacing:-.2px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-ident .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- chicken avatars ---------- */
.chk-avatar{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(135deg,#fdf3d8,#eaf5fd);border:1px solid var(--rh-line);overflow:hidden}
.chk-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chk-avatar.sm{width:46px;height:46px;font-size:1.4rem}
.chk-avatar.md{width:72px;height:72px;font-size:2.2rem}
.chk-avatar.lg{width:110px;height:110px;font-size:3.3rem}
.chk-photo{width:100%;aspect-ratio:16/10;max-height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--rh-line);
  background:linear-gradient(135deg,#fdf3d8,#eaf5fd);display:flex;align-items:center;justify-content:center;font-size:3.6rem}
.chk-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- favorite chicken ---------- */
.fav-flag{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;
  color:var(--rh-heart);background:rgba(224,86,122,.10);border:1px solid rgba(224,86,122,.35);
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.chk-tile{border:1px solid var(--rh-line);border-radius:14px;padding:14px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--rh-bg);transition:.15s}
.chk-tile:hover{border-color:rgba(22,163,224,.5);box-shadow:0 8px 20px rgba(22,163,224,.10)}
.chk-tile.fav{border-color:rgba(224,86,122,.55);background:linear-gradient(180deg,rgba(224,86,122,.06),var(--rh-bg))}
.chk-tile b{font-size:.98rem}
.chk-tile .coop{color:var(--rh-muted);font-size:.76rem}
.btn-fav{border:1px solid var(--rh-line);background:var(--rh-bg);color:var(--rh-text);font-weight:700;
  font-size:.8rem;padding:7px 13px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.15s}
.btn-fav:hover{border-color:var(--rh-heart);color:var(--rh-heart)}
.btn-fav.is-fav{background:rgba(224,86,122,.10);border-color:rgba(224,86,122,.45);color:var(--rh-heart);cursor:default}

/* ---------- streaks ---------- */
.streak-big{font-size:2rem;font-weight:800;letter-spacing:-.5px;line-height:1}
.streak-big small{font-size:.95rem;font-weight:700;color:var(--rh-muted);letter-spacing:0}
.streak-days{display:flex;gap:6px;margin-top:12px}
.streak-days .d{flex:1;text-align:center;font-size:.68rem;font-weight:700;color:var(--rh-muted)}
.streak-days .d .box{margin:4px auto 0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;background:var(--rh-soft);border:1px solid var(--rh-line);color:#b8c6d2}
.streak-days .d.hit .box{background:rgba(10,143,87,.10);border-color:rgba(10,143,87,.4);color:var(--rh-good)}
.streak-days .d.today.hit .box{background:rgba(245,179,1,.16);border-color:rgba(245,179,1,.55)}

/* ---------- feed allowance ---------- */
.allow-dots{display:flex;gap:7px;align-items:center;margin-top:10px}
.allow-dots i{width:14px;height:14px;border-radius:50%;background:var(--rh-soft);border:1px solid var(--rh-line)}
.allow-dots i.used{background:linear-gradient(120deg,var(--rh-egg),var(--rh-egg-dk));border-color:transparent}
.allow-bar{height:10px;border-radius:999px;background:var(--rh-soft);border:1px solid var(--rh-line);overflow:hidden;margin-top:10px}
.allow-bar b{display:block;height:100%;background:linear-gradient(120deg,var(--rh-egg),var(--rh-egg-dk));border-radius:999px}

/* ---------- chicken of the day ---------- */
.cotd-card{border-color:rgba(245,179,1,.5);background:linear-gradient(180deg,rgba(245,179,1,.07),var(--rh-bg))}
.cotd-card .reason{font-size:1.02rem;color:var(--rh-text);font-style:italic;line-height:1.5;margin:10px 0 2px}
.cotd-name{font-size:1.5rem;font-weight:800;letter-spacing:-.3px;margin-top:10px}

/* ---------- community vote ---------- */
.pollopt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 15px;margin-top:8px;
  border:1px solid var(--rh-line);border-radius:12px;background:var(--rh-bg);cursor:pointer;
  font-family:inherit;font-size:.94rem;font-weight:600;color:var(--rh-text);transition:.15s}
.pollopt:hover{border-color:rgba(22,163,224,.55);background:rgba(22,163,224,.04)}
.pollopt.sel{border-color:var(--rh-accent);background:rgba(22,163,224,.08)}
.pollopt .ring{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c3d2de;position:relative}
.pollopt.sel .ring{border-color:var(--rh-accent)}
.pollopt.sel .ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--rh-accent)}
.pollres{margin-top:10px}
.pollres .lbl{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;gap:10px}
.pollres .lbl .pct{color:var(--rh-muted);font-variant-numeric:tabular-nums}
.pollres .bar{height:9px;border-radius:999px;background:var(--rh-soft);border:1px solid var(--rh-line);overflow:hidden;margin-top:5px}
.pollres .bar b{display:block;height:100%;background:linear-gradient(120deg,var(--rh-accent),var(--rh-accent-dk));border-radius:999px}
.pollres.mine .lbl{color:var(--rh-accent-dk)}
.pollres.mine .bar b{background:linear-gradient(120deg,#16a3e0,#0d84c2)}
.myvote{margin-top:12px;font-size:.85rem;color:var(--rh-muted)}
.myvote b{color:var(--rh-text)}
.myvote a{color:var(--rh-accent);font-weight:700;cursor:pointer;text-decoration:none}

/* ---------- community goal ---------- */
.goal-count{font-size:1.7rem;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.goal-count small{font-size:1rem;color:var(--rh-muted);font-weight:700}
.goalbar{height:13px;border-radius:999px;background:var(--rh-soft);border:1px solid var(--rh-line);overflow:hidden;margin:12px 0 6px}
.goalbar b{display:block;height:100%;border-radius:999px;background:linear-gradient(120deg,var(--rh-egg),var(--rh-egg-dk));
  transition:width .6s ease}
.goal-ms{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.goal-ms span{font-size:.8rem;font-weight:700;color:var(--rh-muted);display:inline-flex;align-items:center;gap:5px}
.goal-ms span.done{color:var(--rh-good)}
.goal-ms span.active{color:#8a5b00}
.goal-party{margin-top:12px;background:rgba(10,143,87,.08);border:1px solid rgba(10,143,87,.35);color:#0a7a52;
  border-radius:12px;padding:11px 14px;font-size:.9rem;font-weight:700;text-align:center}

/* ---------- story cards ---------- */
.rh-storycard{display:flex;gap:14px;align-items:flex-start;background:var(--rh-bg);border:1px solid var(--rh-line);
  border-radius:14px;padding:14px;text-decoration:none;transition:.15s;color:var(--rh-text)}
.rh-storycard:hover{border-color:rgba(22,163,224,.5);box-shadow:0 8px 20px rgba(22,163,224,.10)}
.rh-storycard .simg{flex:none;width:86px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--rh-line);
  background:linear-gradient(135deg,#fdf3d8,#eaf5fd);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.rh-storycard .simg img{width:100%;height:100%;object-fit:cover;display:block}
.rh-storycard .stxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rh-storycard .schicken{font-size:.7rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--rh-accent)}
.rh-storycard b{font-size:.98rem;line-height:1.3}
.rh-storycard .sex{color:var(--rh-muted);font-size:.85rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rh-storycard .sdate{color:var(--rh-muted);font-size:.74rem;margin-top:2px}
/* favorite-chicken story banner on the dashboard */
.favstory{border-color:rgba(224,86,122,.45);background:linear-gradient(180deg,rgba(224,86,122,.06),var(--rh-bg))}
.favstory .fslabel{font-size:.74rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--rh-heart)}

/* ---------- toasts ---------- */
#rhToasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,92vw)}
.rh-toast{background:#1f2b38;color:#fff;border-radius:12px;padding:12px 18px;font-size:.92rem;font-weight:600;
  box-shadow:0 12px 32px rgba(31,43,56,.35);display:flex;align-items:center;gap:10px;max-width:100%;
  opacity:0;transform:translateY(8px);transition:.25s ease}
.rh-toast.in{opacity:1;transform:translateY(0)}
.rh-toast .sub{display:block;font-weight:500;font-size:.8rem;color:#b9c9d8}

/* ---------- small screens ---------- */
@media(max-width:640px){
  .rh-card{padding:18px 16px}
  .chk-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .rh-ident .who{font-size:1.15rem}
}