/* shares.css — «الان گوش می‌دم»: the 24h member strip at the top of the homepage.
   Instagram-story shape, paper-skin materials. Bubbles are potato circles
   (--pp-potato, P-03 "دایره‌ها = سیب‌زمینی"), rings are pencil graphite, every
   surface is cream. No dark panel and no rgba(255,255,255…) on paper (P-07).

   Written PAPER-FIRST (plain selectors, not html[data-ir2-skin="brutal"]
   overrides) because brutal is the only skin the site ships. paper.css loads
   after this file, so anything that must beat it is noted inline.

   Own file rather than an append to landing.css: separate concern, and its own
   ?v= so a tweak here doesn't bust the whole landing stylesheet. */

.shsec .shstrip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shsec .shstrip::-webkit-scrollbar { display: none; }

.shbub { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; position: relative;
  font: inherit; color: #1f1f1f; }
.shbub-ring { width: 66px; height: 66px; display: grid; place-items: center; padding: 3px;
  border: 2px solid #1f1f1f; border-radius: var(--pp-potato, 47% 53% 46% 54% / 54% 46% 55% 45%);
  box-shadow: 3px 4px 0 rgba(31,31,31,.14); background: #fbfaf5;
  transition: transform .13s ease, box-shadow .13s ease; }
.shbub:hover .shbub-ring { transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(31,31,31,.2); }
/* already-seen bubbles keep the frame but drop to a sketch outline (IG's grey ring) */
.shbub:not(.unseen):not(.shadd) .shbub-ring { border-style: dashed; border-color: rgba(31,31,31,.4); box-shadow: none; }
.shbub-cov { width: 100%; height: 100%; background: #efede3 center/cover no-repeat;
  border-radius: var(--pp-potato, 47% 53% 46% 54% / 54% 46% 55% 45%); }
.shbub-nm { font-size: .72rem; font-weight: 600; max-width: 74px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.shbub-n { position: absolute; top: -2px; inset-inline-start: -2px; min-width: 18px; height: 18px;
  padding: 0 5px; display: grid; place-items: center; background: #1f1f1f; color: #fbfaf5;
  font-size: .66rem; font-weight: 700; border-radius: var(--pp-wob-b, 10px); }
.shadd .shbub-ring { border-style: dashed; }
.shbub-plus { font-size: 1.7rem; font-weight: 300; line-height: 1; color: rgba(31,31,31,.6); }

/* ── overlay chrome (viewer + composer share it) ── */
body.sh-open { overflow: hidden; }
.shview { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; }
.shview[hidden] { display: none; }
.shview-bd { position: absolute; inset: 0; background: rgba(31,31,31,.55); }
.shview-card { position: relative; width: min(420px, 100%); max-height: 92vh; overflow-y: auto;
  background: #fbfaf5; border: 2px solid #1f1f1f;
  border-radius: var(--pp-wob-a, 14px 10px 16px 9px / 10px 15px 9px 16px);
  box-shadow: 6px 8px 0 rgba(31,31,31,.28); padding: 12px 14px 16px; }

.shview-bars { display: flex; gap: 4px; margin-bottom: 10px; }
.shbar { flex: 1; height: 3px; background: rgba(31,31,31,.18); border-radius: 2px; }
.shbar.done { background: rgba(31,31,31,.45); }
.shbar.on { background: #1f1f1f; }

.shview-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.shview-who { font-weight: 800; font-size: .95rem; }
.shview-ago { color: rgba(31,31,31,.55); font-size: .74rem; }
.shview-x { margin-inline-start: auto; background: none; border: 0; font-size: 1.05rem;
  color: #1f1f1f; cursor: pointer; padding: 4px 6px; line-height: 1; }

.shview-body { display: flex; align-items: center; gap: 6px; }
.shview-nav { flex: 0 0 auto; background: none; border: 1.6px solid rgba(31,31,31,.3);
  border-radius: var(--pp-wob-b, 10px); color: #1f1f1f; font-size: 1.2rem; line-height: 1;
  padding: 10px 8px; cursor: pointer; }
.shview-nav:hover { border-color: #1f1f1f; }
.shview-mid { flex: 1; min-width: 0; text-align: center; }
/* P-05: a cover is a pasted photo — pencil frame plus the permitted tilt */
.shview-cov { width: min(210px, 60vw); aspect-ratio: 1; margin: 0 auto 12px;
  background: #efede3 center/cover no-repeat; border: 1.6px solid #1f1f1f;
  border-radius: var(--pp-wob-b, 10px); box-shadow: 4px 5px 0 rgba(31,31,31,.18);
  transform: rotate(-.7deg); }
.shview-ti { font-weight: 800; font-size: 1.02rem; }
.shview-ar { color: rgba(31,31,31,.55); font-size: .82rem; margin-top: 2px; }
.shview-cap { margin-top: 10px; font-size: .9rem; line-height: 1.65;
  background: #f1efe6; border: 1.5px solid rgba(31,31,31,.22);
  border-radius: var(--pp-wob-b, 10px); padding: 8px 10px; overflow-wrap: anywhere; }

.shview-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.shact { background: none; border: 1.5px solid rgba(31,31,31,.3); border-radius: var(--pp-wob-b, 10px);
  color: rgba(31,31,31,.65); font: inherit; font-size: .78rem; padding: 6px 12px; cursor: pointer; }
.shact:hover { border-color: #1f1f1f; color: #1f1f1f; }
.shact.armed { border-color: #d23c3c; color: #d23c3c; }   /* the one sanctioned red (P-02) */

/* ── composer ── */
.shcomp-pick { display: flex; align-items: center; gap: 10px; background: #f1efe6;
  border: 1.5px solid rgba(31,31,31,.22); border-radius: var(--pp-wob-b, 10px);
  padding: 9px 10px; margin-bottom: 10px; min-height: 56px; }
.shcomp-cov { width: 44px; height: 44px; flex: 0 0 auto; background: #efede3 center/cover no-repeat;
  border: 1.5px solid #1f1f1f; border-radius: var(--pp-wob-b, 10px); }
.shcomp-meta { min-width: 0; display: flex; flex-direction: column; }
.shcomp-meta b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shcomp-meta i { font-style: normal; font-size: .76rem; color: rgba(31,31,31,.55); }
.shcomp-empty { font-size: .82rem; color: rgba(31,31,31,.55); line-height: 1.6; }
.shcomp-q, .shcomp-cap { width: 100%; background: #fbfaf5; border: 1.5px solid rgba(31,31,31,.3);
  border-radius: var(--pp-wob-b, 10px); padding: 9px 11px; font: inherit; font-size: .88rem;
  color: #1f1f1f; margin-bottom: 10px; }
.shcomp-q:focus, .shcomp-cap:focus { outline: none; border-color: #1f1f1f; }
.shcomp-cap { resize: none; line-height: 1.6; }
.shcomp-res { margin: -4px 0 10px; display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; }
.shres { display: flex; align-items: center; gap: 9px; background: none; border: 1.5px solid transparent;
  border-radius: var(--pp-wob-b, 10px); padding: 5px 7px; cursor: pointer; font: inherit;
  color: #1f1f1f; text-align: start; }
.shres:hover { border-color: rgba(31,31,31,.3); background: #f1efe6; }
.shres-cov { width: 34px; height: 34px; flex: 0 0 auto; background: #efede3 center/cover no-repeat;
  border: 1.4px solid rgba(31,31,31,.35); border-radius: var(--pp-wob-b, 10px); }
.shres-m { min-width: 0; display: flex; flex-direction: column; }
.shres-m b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shres-m i { font-style: normal; font-size: .73rem; color: rgba(31,31,31,.55); }
.shcomp-foot { display: flex; align-items: center; gap: 10px; }
.shcomp-note { font-size: .73rem; color: rgba(31,31,31,.55); }
.shcomp-go { margin-inline-start: auto; background: #1f1f1f; color: #fbfaf5; border: 0;
  border-radius: var(--pp-wob-a, 14px 10px 16px 9px / 10px 15px 9px 16px);
  padding: 9px 20px; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 3px 4px 0 rgba(31,31,31,.2); }
.shcomp-go:disabled { opacity: .5; cursor: default; }

/* paper toast — the shell's own toast() is a dark pill and is not exported (P-08) */
.sh-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5000;
  background: #fbfaf5; color: #1f1f1f; border: 2px solid #1f1f1f;
  border-radius: var(--pp-wob-a, 14px 10px 16px 9px / 10px 15px 9px 16px);
  box-shadow: 4px 5px 0 rgba(31,31,31,.22); padding: 11px 18px; font-size: .88rem;
  max-width: 88vw; text-align: center; }

/* P-10 readability step-up on tablet/desktop */
@media (min-width: 768px) {
  .shbub { width: 84px; }
  .shbub-ring { width: 76px; height: 76px; }
  .shbub-nm { font-size: .78rem; max-width: 84px; }
}