/* सटीक Shorts (/shorts): one card per screen, swiped up like Inshorts. Colours come from site.css, so
   phones follow the reader's dark mode and the desktop page stays white. The same cards show in the
   newsroom's live preview (public/css/admin-shorts.css loads this file's card rules). */
.sh-html { --sh-head: 56px; scroll-snap-type: y mandatory; scroll-padding-top: var(--sh-head); }
.sh-page { margin: 0; background: var(--bg); }

/* ---------- Top bar ---------- */
.sh-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: var(--sh-head);
  padding: 0 12px;
  background: var(--header-bg);
  box-shadow: var(--stuck-shadow);
}
.sh-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.sh-back svg { width: 24px; height: 24px; }
.sh-back:focus-visible, .sh-masthead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-masthead { line-height: 1; color: var(--ink); white-space: nowrap; }
.sh-masthead .mh-hi { font-size: 25px; }
.sh-masthead .mh-en { font-size: 23px; margin-left: 5px; }
.sh-label {
  margin-left: 2px; padding: 3px 10px 4px;
  border-radius: 999px;
  background: var(--purple); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

/* ---------- Cards ---------- */
.sh-feed { display: block; }
.sh-card {
  position: relative;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--sh-head));
  height: calc(100svh - var(--sh-head));
  overflow: hidden;
  background: var(--card);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-bottom: 1px solid var(--card-border);
}
.sh-media { position: relative; flex: none; aspect-ratio: 16 / 11; max-height: 44%; overflow: hidden; background: var(--skeleton); }
.sh-media img, .sh-media video { width: 100%; height: 100%; object-fit: cover; }
.sh-media video { background: #000; }
.sh-credit {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; line-height: 1.6;
}

/* The two tabs sitting on the photo's lower edge, as in a news card */
.sh-bar { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; margin-top: -40px; padding: 0 14px; pointer-events: none; }
.sh-brand, .sh-share { pointer-events: auto; background: var(--card); border-radius: 14px 14px 0 0; }
.sh-brand { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 10px; color: var(--ink); font-size: 15px; white-space: nowrap; }
.sh-brand b { color: var(--purple); font-weight: 700; }
.sh-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--purple); color: #fff; font-family: "Rozha One", serif; font-size: 17px; line-height: 1; }
.sh-share { display: grid; place-items: center; width: 52px; height: 40px; border: 0; color: var(--ink); cursor: pointer; }
.sh-share svg { width: 22px; height: 22px; }
.sh-share:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.sh-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 20px 18px; }
.sh-title { margin: 0 0 10px; color: var(--ink); font-size: 21px; font-weight: 700; line-height: 1.45; }
.sh-title a { color: inherit; }
.sh-text { margin: 0; color: var(--muted); font-size: 17.5px; line-height: 1.66; }
.sh-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 12px 0 0; color: var(--faint); font-size: 13px; }
.sh-meta > * + *::before { content: "·"; margin-right: 8px; }
.sh-more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--band);
  color: var(--purple);
  font-size: 15px; font-weight: 600;
}
.sh-more small { margin-left: 4px; color: var(--faint); font-size: 12.5px; font-weight: 500; }
.sh-more svg { flex: none; width: 20px; height: 20px; }
.sh-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-ph { color: var(--faint); font-weight: 400; }

/* Short phones (iPhone SE and the like): a slimmer photo and slightly smaller text so 60 words fit */
@media (max-height: 700px) {
  .sh-media { aspect-ratio: 16 / 9; max-height: 38%; }
  .sh-title { font-size: 19px; margin-bottom: 6px; }
  .sh-text { font-size: 16px; line-height: 1.6; }
  .sh-body { padding: 12px 16px 14px; }
}

/* ---------- The end of the feed ---------- */
.sh-end {
  display: grid; place-items: center; gap: 10px;
  min-height: 40vh; padding: 40px 20px;
  color: var(--muted); text-align: center;
  scroll-snap-align: end;
}
.sh-end a { color: var(--purple); font-weight: 600; }
.sh-end .spinner { width: 26px; height: 26px; border: 3px solid var(--skeleton); border-top-color: var(--purple); border-radius: 50%; animation: sh-spin .8s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-empty { padding: 80px 20px; color: var(--muted); text-align: center; }

.sh-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* ---------- Desktop: one card in a column, on the white page ---------- */
@media (min-width: 721px) {
  .sh-html { --sh-head: 64px; }
  .sh-head { justify-content: center; }
  .sh-back { position: absolute; left: 24px; }
  .sh-masthead .mh-hi { font-size: 30px; }
  .sh-masthead .mh-en { font-size: 28px; }
  .sh-feed { padding: 0 16px; }
  .sh-card {
    width: 100%; max-width: 460px;
    height: min(calc(100vh - var(--sh-head) - 32px), 860px);
    margin: 16px auto;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--pop-shadow);
    scroll-snap-align: center;
  }
  .sh-more:hover { background: var(--frame); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-html { scroll-behavior: auto; }
}