/* ── SHARE A STORY ────────────────────────────────────────────────────────
 * Taufik, 14 October 2026: "Can we make a share here to share via whatsapps
 * of any channel … then we have a list". The button and the list it opens;
 * the behaviour is public/assets/js/share.js and the markup _share.ejs.
 *
 * Loaded by every page that has a story on it — the front page (timeline and
 * constellation), every chapter page, the gallery and a story's own page —
 * and before arrive.css, which stays last everywhere.
 */
.share { position: relative; display: inline-block; }
.share[hidden] { display: none; }

.share__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 2rem; padding: 0 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #dde3ec; background: #fff; color: #16202e;
  font: 700 0.78rem 'Inter', sans-serif; line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.share__btn:hover { border-color: #b9d2ff; background: #eef4ff; color: #0b63ff; }
.share__btn:focus-visible { outline: 2px solid #0b63ff; outline-offset: 2px; }
.share.is-open .share__btn { background: #0b63ff; border-color: #0b63ff; color: #fff; }

/* the list drops from the button, over what is under it, inside the box it
   belongs to — never a second panel or scrim: a popup has exactly one */
.share__list {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 6;
  width: min(19rem, calc(100vw - 2.5rem));
  background: #fff; color: #16202e; border-radius: 16px; padding: 0.7rem;
  border: 1px solid #e6eaf0;
  box-shadow: 0 24px 60px -18px rgba(6, 12, 22, 0.45);
  text-align: left;
}
/* the rule every toggled thing on this site needs: `hidden` alone loses to the
   display a class gives it */
.share__list[hidden] { display: none; }

.share__row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.55rem; }
.share__url {
  flex: 1 1 auto; min-width: 0;
  font: 500 0.7rem/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #4a5668; background: #f3f6fa; border-radius: 8px; padding: 0.35rem 0.5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share__copy {
  flex: none; border: 1.5px solid #dde3ec; background: #fff; color: #16202e;
  border-radius: 9px; padding: 0.32rem 0.6rem; cursor: pointer;
  font: 700 0.72rem 'Inter', sans-serif;
}
.share__copy:hover { background: #eef4ff; color: #0b63ff; border-color: #b9d2ff; }
.share__copy.is-done { background: #17b26a; border-color: #17b26a; color: #fff; }
.share__copy.is-bad  { background: #e5484d; border-color: #e5484d; color: #fff; }

.share__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.share__ch {
  min-width: 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem; border-radius: 10px; border: 0; background: none;
  color: #16202e; text-decoration: none; cursor: pointer;
  font: 600 0.84rem 'Inter', sans-serif; text-align: left;
}
.share__ch:hover, .share__ch:focus-visible { background: #f3f6fa; text-decoration: none; outline: none; }
/* a dot in each channel's own colour — a colour, not a logo: nobody's mark is
   copied onto this site */
.share__ch i {
  flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #8b97a8;
}
.share__ch--wa i   { background: #25d366; }
.share__ch--tg i   { background: #229ed9; }
.share__ch--fb i   { background: #1877f2; }
.share__ch--x i    { background: #111; }
.share__ch--in i   { background: #0a66c2; }
.share__ch--mail i { background: #e0a100; }

/* ── WHERE IT SITS ── */

/* the timeline's popup: beside the ×, and the date and headline keep clear
   of both */
.mdet__share { position: absolute; top: 0.7rem; right: 3.1rem; z-index: 2; }
/* the list hangs LEFT from a button that sits 3.1rem in from the box's edge,
   so it may be no wider than the box less that — on a 320px phone the
   viewport-based width ran it off the left of the box, where nothing can
   scroll to it */
.mdet__share .share__list { width: min(19rem, calc(min(38rem, 100vw - 2rem) - 3.9rem)); }
/* and a short milestone's box grows to hold the list rather than cutting off
   its last row, where a press would land on the scrim and close everything */
.mdet__box:has(.mdet__share.is-open) { min-height: min(20rem, 86vh); }
.mdet__box .mdet__when { padding-right: 7.5rem; min-height: 2rem; }

/* the chapter popup: beside its ×, on the picture, in the same dark glass */
/* above the "View image" pill (z-index 3, later in the page), which on a
   narrow phone reaches the list's last row and took the press meant for it */
.pop__share { position: absolute; top: 0.85rem; right: 3.35rem; z-index: 4; }
.pop__share .share__list { width: min(19rem, calc(min(30rem, 94vw) - 4rem)); }
.pop__share .share__btn {
  height: 2.1rem; border: 0;
  background: color-mix(in srgb, var(--black, #000) 45%, transparent); color: var(--white, #fff);
  backdrop-filter: blur(6px);
}
.pop__share .share__btn:hover,
.pop__share.is-open .share__btn { background: var(--black, #000); color: #fff; }
/* a story with no picture has a short panel — room enough for the list */
.pop__panel:has(.pop__share.is-open) { min-height: min(24rem, 88vh); }
/* and the title keeps clear of the two buttons when there is no picture over
   which they float */
.pop__media[hidden] + .pop__scroll .pop__kicker,
.pop__media[hidden] + .pop__scroll .pop__title { padding-right: 7.5rem; }

/* the gallery and a story's own page: the list opens IN the card, pushing
   what is under it down. A gallery card clips what overhangs it (it has to,
   for its rounded picture), so a list hanging off it would be cut in half. */
/* a block no wider than the card, so the list inside is sized by the card
   and the long address truncates rather than pushing past the card's edge */
.galcard__share, .story__share { display: block; align-self: stretch; max-width: 22rem; margin-top: 0.5rem; }
.galcard__share .share__list, .story__share .share__list {
  position: static; width: 100%; margin-top: 0.5rem; box-shadow: none;
}
.galcard__h { color: inherit; text-decoration: none; }
.galcard__h:hover { color: var(--blue, #0b63ff); text-decoration: underline; text-underline-offset: 3px; }
a.galcard__pillar { text-decoration: none; }
a.galcard__pillar:hover { text-decoration: underline; }

/* ── A STORY'S OWN PAGE (/news/<id>) ── the timeline's box, on a page */
.story__wrap { max-width: 42rem; }
.story__card {
  background: #fff; color: #16202e; border-radius: 22px;
  border: 1px solid rgba(13, 27, 42, 0.09);
  padding: 1.5rem 1.6rem 1.7rem; margin-top: 0.6rem;
  box-shadow: 0 30px 70px -40px rgba(6, 12, 22, 0.55);
  display: flex; flex-direction: column;
}
.story__card .mdet__h { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.story__card .mdet__body + .mdet__body { margin-top: 0.7rem; }
.story__more { margin-top: 1.2rem; font-weight: 700; }
.story__more a { color: var(--blue, #0b63ff); text-decoration: none; }
.story__more a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .story__card { padding: 1.2rem 1.1rem 1.4rem; border-radius: 18px; }
}

/* ── A LINK YOU CAN FOLLOW OR TAKE AWAY ──────────────────────────────────
 * Taufik: "those with link, make it have link can be click or/and copy [the
 * url]. [something like the whatapps]". Two controls, because they are two
 * different intentions: reading it now, and sending it to somebody else.
 *
 * Moved here from milestones.css on 14 October 2026, when the chapter popup
 * and a story's own page started showing write-ups the timeline's way
 * ("the information is not complete as (2). With the link to the news"):
 * one set of rules for the three places, not three that drift.
 */
/* ── AND USUALLY MORE THAN ONE OF THEM ──
 * "some card have more than 1 link". They wrap rather than scroll: on a card
 * this narrow a row of four outlets that runs off the edge loses the fourth
 * one exactly as completely as not storing it did. */
.mlinks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; }
.mlink { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pop__srcs .mlink__go { font-size: 0.86rem; font-weight: 700; color: var(--blue, #0b63ff); text-decoration: none; }
.pop__srcs .mlink__go:hover { text-decoration: underline; }
.mlink__copy {
  border: 1.5px solid #dde3ec; background: #fff; border-radius: 9px;
  width: 26px; height: 26px; cursor: pointer; font-size: 0.8rem; line-height: 1;
  color: #6b7686; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.mlink__copy:hover { background: #eef4ff; color: #0b63ff; border-color: #b9d2ff; }
/* IT SAYS WHAT HAPPENED. A copy button that does nothing visible is the
   reason people go back to selecting the text by hand for ever after. */
.mlink__copy.is-done { background: #17b26a; border-color: #17b26a; color: #fff; }
.mlink__copy.is-bad  { background: #e5484d; border-color: #e5484d; color: #fff; }
.mlink--wide { width: 100%; margin-top: 0.5rem; }
.mlink__url {
  flex: 1 1 100%; font: 500 0.72rem/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: #6b7686; background: #f3f6fa; border-radius: 8px; padding: 0.3rem 0.5rem;
  overflow-wrap: anywhere;
}

/* ── WHO IT WAS WITH, AND WHICH CHAPTERS IT IS IN ──
 * Taufik: "is link to the respective chapters in NEUTalents, NEUCity and
 * etc". Same in all three places: a small label, then one way to each
 * chapter's page. */
.mdet__with { font: 600 0.84rem 'Inter', sans-serif; color: #4a5668; margin-top: 0.7rem; }
.mdet__chaps, .pop__chaps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem;
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid #e6eaf0;
}
.pop__chaps[hidden] { display: none; }
.mdet__chapsk {
  font: 800 0.66rem 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8b97a8; margin-right: 0.15rem;
}
.mdet__chap {
  display: inline-flex; align-items: center;
  border: 1.5px solid #dde3ec; border-radius: 999px; padding: 0.22rem 0.65rem;
  font: 700 0.76rem 'Inter', sans-serif; color: #16202e; text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.mdet__chap:hover { border-color: #b9d2ff; background: #eef4ff; color: #0b63ff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .share__btn, .share__copy, .mlink__copy, .mdet__chap { transition: none; }
}

/* the narrowest phones: the channel names keep to their column */
@media (max-width: 360px) {
  .share__list { padding: 0.55rem; }
  .share__ch { font-size: 0.78rem; padding: 0.45rem 0.4rem; gap: 0.4rem; }
}

/* the NEUStory ring's popup (dark): Share under the big button, list in flow */
.reelopen__share { display: block; margin-top: 0.7rem; }
.reelopen__share .share__list { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; }