/*
 * The Mediagram design system's components, as published (artifact Nem3s64YJNuJo4XpHQE3L6,
 * components/bundle.css), with one change: no Google Fonts import. This page names no other
 * site in its content policy, so Figtree comes from here once its files are added (see feed.css);
 * until then the system font stands in, as the token's fallback says.
 */

/*
 * Mediagram components. Every value comes from tokens.css (tokens.json); this file
 * only arranges them. Class prefix: mg-. The feed (mediagram-posts/social/web)
 * loads this same file.
 */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--brand-soft); color: var(--ink); }

.mg-btn:focus-visible,
.mg-icon-btn:focus-visible,
.mg-action:focus-visible,
.mg-weight:focus-visible,
.mg-follow:focus-visible,
.mg-tab:focus-visible,
.mg-send:focus-visible,
.mg-link:focus-visible,
.mg-handle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- icons and the mark ---------------------------------------------------------- */
.mg-icon {
  width: var(--size-icon);
  height: var(--size-icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mg-mark {
  display: block;
  width: auto;
  height: 28px;
  flex: none;
  fill: currentColor;
  color: var(--brand-ink);
}

/* ---- buttons --------------------------------------------------------------------- */
.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-hit);
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 600 15px/20px var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.15s ease-out;
}

.mg-btn:active { transform: scale(0.98); }
.mg-btn .mg-icon { width: 20px; height: 20px; }
.mg-btn-primary { background: var(--brand); color: var(--on-brand); }
.mg-btn-primary:hover { background: var(--brand-pressed); }
.mg-btn-secondary { border-color: var(--line-strong); }
.mg-btn-secondary:hover,
.mg-btn-ghost:hover { background: var(--surface); }
.mg-btn-danger { background: var(--danger); color: var(--on-danger); }
.mg-btn-sm { height: 36px; padding: 0 14px; font-size: 14px; line-height: 18px; }
.mg-btn-block { width: 100%; }

.mg-btn:disabled,
.mg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* a labelled on/off button (Follow): on is tinted, never brand-filled, whatever it was when off */
.mg-btn[aria-pressed="true"],
.mg-btn[aria-pressed="true"]:hover {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.mg-btn .when-on,
.mg-btn[aria-pressed="true"] .when-off { display: none; }
.mg-btn[aria-pressed="true"] .when-on { display: block; }

.mg-link {
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

/* ---- icon buttons ---------------------------------------------------------------- */
.mg-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-hit);
  height: var(--size-hit);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.mg-icon-btn:hover { background: var(--surface); }
.mg-icon-btn:active { background: var(--surface-strong); }

/* ---- avatar ---------------------------------------------------------------------- */
.mg-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-avatar);
  height: var(--size-avatar);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--ink);
  font: 700 13px/1 var(--font-sans);
  text-transform: uppercase;
  user-select: none;
}

.mg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.mg-avatar-lg { width: 72px; height: 72px; font-size: 28px; }

/* ---- the author row: avatar, handle, time, follow --------------------------------- */
.mg-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.mg-author-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mg-handle {
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-handle:hover { text-decoration: underline; }

.mg-time {
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  white-space: nowrap;
}

/* the follow toggle: an icon toggle in a tight row, 32px drawn, 44px to the touch */
.mg-follow {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.mg-follow::before { content: ""; position: absolute; inset: -6px; }
.mg-follow .mg-icon { width: 18px; height: 18px; }
.mg-follow:hover { background: var(--surface); }

.mg-follow[aria-pressed="true"] {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.mg-follow .when-on,
.mg-follow[aria-pressed="true"] .when-off { display: none; }
.mg-follow[aria-pressed="true"] .when-on { display: block; }

/* ---- the action bar: like, comment, share, and the post's weight ------------------ */
.mg-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: -10px;
}

.mg-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--size-hit);
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 14px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.mg-action .mg-icon { width: 26px; height: 26px; }
.mg-action:hover { background: var(--surface); }
.mg-action[aria-pressed="true"] { color: var(--brand-ink); }
.mg-action[aria-pressed="true"] .mg-icon { fill: currentColor; }
.mg-action[aria-pressed="true"] .mg-count { color: var(--ink); }
.mg-count:empty { display: none; }
.mg-action.is-popping .mg-icon { animation: mg-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4); }

.mg-weight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mg-weight .mg-icon { width: 16px; height: 16px; }
.mg-weight:hover { background: var(--surface); color: var(--ink); }

/* ---- the feed: one slide to a screen, snapping --------------------------------------- */
.mg-feed {
  container-type: inline-size;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.mg-feed::-webkit-scrollbar { display: none; }

.mg-feed > .mg-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---- a feed item: the post, and what is said about it ----------------------------- */
.mg-item {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

/* The post is as large as the room left, at its own shape. --w and --h are its canvas. */
.mg-stage {
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

.mg-frame {
  --w: 4;
  --h: 5;
  position: relative;
  overflow: hidden;
  width: min(100cqw, 100cqh * var(--w) / var(--h));
  aspect-ratio: var(--w) / var(--h);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: 0 0 0 1px var(--line);
}

.mg-frame > img,
.mg-frame > .mgp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mg-frame > img { object-fit: cover; }

.mg-frame > .mg-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.mg-meta {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.mg-caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mg-caption.is-open { display: block; }
.mg-paid { font-weight: 600; }

.mg-hold {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

.mg-hold .mg-icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* comments open: the post moves up and shrinks; the panel takes the rest. Nothing covers the post. */
.mg-item.is-talking {
  grid-template-rows: minmax(0, 36%) minmax(0, 1fr);
  padding-bottom: 0;
}

.mg-item.is-talking > .mg-comments {
  margin-inline: calc(-1 * var(--space-3));
}

/* The wide layout follows the width the feed has, not the window's: a feed in a narrow
   column stays a phone feed. The feed's scroller (.mg-feed) is the container. */
@container (min-width: 960px) {
  .mg-item {
    grid-template-columns: minmax(0, 1fr) var(--size-meta-column);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-6);
    max-width: 1100px;
    padding: var(--space-6);
  }

  .mg-item > .mg-meta,
  .mg-item > .mg-comments {
    align-self: end;
  }

  .mg-item.is-talking {
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: var(--space-6);
  }

  .mg-item.is-talking > .mg-comments {
    align-self: stretch;
    margin-inline: 0;
    border-radius: var(--radius-lg);
  }
}

/* ---- the player's prompt: Mediagram asking, under the post ------------------------ */
.mg-prompt {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mg-prompt-from {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

.mg-prompt-from .mg-mark { height: 13px; }

.mg-prompt-q {
  margin: 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
  text-wrap: pretty;
}

.mg-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* a way out (Skip, Not now): text, so it is never mistaken for an answer */
.mg-choice-quiet {
  padding: 0 var(--space-2);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- About this post ------------------------------------------------------------- */
.mg-about {
  display: grid;
  gap: var(--space-3);
}

.mg-about-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mg-about-weight {
  margin: 0;
  color: var(--ink);
  font: 700 20px/26px var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.mg-about-weight span {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.mg-about-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-about-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font: 400 15px/21px var(--font-sans);
  overflow-wrap: anywhere;
}

.mg-about-list .mg-icon {
  width: 20px;
  height: 20px;
  margin-top: 0.5px;
  color: var(--ink-muted);
}

.mg-id {
  color: var(--ink-muted);
  font: 400 12px/16px var(--font-mono);
}

.mg-about-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---- comments --------------------------------------------------------------------- */
.mg-comments {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.mg-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-1) var(--space-4);
}

.mg-comments-title {
  margin: 0;
  font: 700 17px/23px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-comments-list {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-4);
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.mg-comment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.mg-comment-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mg-comment-head .mg-handle { font-size: 14px; line-height: 18px; }

.mg-comment-text {
  margin: 2px 0 0;
  font: 400 15px/21px var(--font-sans);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.mg-comment .mg-icon-btn {
  width: 36px;
  height: 36px;
  margin: -6px -8px 0 0;
  color: var(--ink-muted);
}

.mg-comment .mg-icon-btn .mg-icon { width: 18px; height: 18px; }

.mg-comments-empty {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-muted);
  text-align: center;
}

.mg-composer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.mg-composer-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  outline: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/22px var(--font-sans);
}

.mg-composer-input::placeholder { color: var(--ink-muted); }
.mg-composer-input:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); }

.mg-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
}

.mg-send:hover { background: var(--brand-pressed); }
.mg-send .mg-icon { width: 20px; height: 20px; stroke-width: 2.25; }

.mg-send:disabled {
  background: var(--surface-strong);
  color: var(--ink-muted);
  cursor: default;
}

.mg-composer-signin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1;
  color: var(--ink-muted);
  font: 500 14px/18px var(--font-sans);
}

/* ---- the top bar and its tabs ----------------------------------------------------- */
/* three columns, so the tabs sit in the true centre on any common phone. On the very
   narrowest the right side (post, you) keeps its width and the M's side gives way. */
.mg-topbar {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-2);
  height: var(--size-topbar);
  padding: 0 var(--space-1) 0 var(--space-3);
  background: var(--canvas);
}

.mg-topbar-start { display: flex; align-items: center; justify-self: start; min-width: 0; }
.mg-topbar .mg-mark { height: 28px; }
.mg-topbar-end { display: flex; align-items: center; justify-self: end; }

.mg-tabs {
  display: flex;
  justify-content: center;
}

.mg-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--size-hit);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font: 600 15px/20px var(--font-sans);
  text-decoration: none;
}

.mg-tab:hover { color: var(--ink); }

/* a bar narrower than 360px (the smallest phones): tighter tabs */
@container (max-width: 359px) {
  .mg-tab { padding: 0 var(--space-2); }
  .mg-tab[aria-current]::after { right: var(--space-2); left: var(--space-2); }
}

/* the tab you are on: darker, heavier, underlined. Never by colour alone. */
.mg-tab[aria-current] {
  color: var(--ink);
  font-weight: 750;
}

.mg-tab[aria-current]::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  bottom: 6px;
  left: var(--space-3);
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

/* a page's own bar: back, the page's title in the centre, one action */
.mg-topbar-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 17px/23px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the one tab row of a page that is not the feed (Followers | Following) */
.mg-pagetabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.mg-pagetabs .mg-tab { font-variant-numeric: tabular-nums; }

/* ---- a profile ---------------------------------------------------------------------- */
.mg-profile {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.mg-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.mg-profile-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mg-profile-name {
  margin: 0;
  color: var(--ink);
  font: 750 28px/34px var(--font-sans);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.mg-profile-handle {
  margin: 0;
  color: var(--ink-muted);
  font: 500 15px/21px var(--font-sans);
}

.mg-profile-bio {
  margin: 0;
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.mg-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-profile-stats a { color: inherit; text-decoration: none; }
.mg-profile-stats a:hover { text-decoration: underline; }
.mg-profile-stats a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.mg-profile-stats strong { color: var(--ink); font-weight: 700; }

.mg-profile-actions {
  display: flex;
  gap: var(--space-2);
}

.mg-profile-actions .mg-btn { flex: 1; }
.mg-profile-actions .mg-icon-btn { border: 1.5px solid var(--line-strong); }

/* their posts: pictures in a tight grid, each opening the post in the feed */
.mg-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 2px;
}

.mg-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-strong);
}

.mg-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-tile:focus-visible {
  z-index: 1;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- followers and following ------------------------------------------------------- */
.mg-people {
  display: grid;
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-4);
  list-style: none;
}

.mg-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) 0;
}

.mg-person-id {
  display: grid;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.mg-person-id:hover .mg-person-name { text-decoration: underline; }
.mg-person-id:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.mg-person-name {
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-person-handle {
  overflow: hidden;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-person > .mg-btn { flex: none; }

.mg-person-you {
  flex: none;
  padding: 0 var(--space-3);
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

/* ---- fields ----------------------------------------------------------------------- */
.mg-field {
  display: grid;
  gap: 6px;
}

.mg-field-label {
  color: var(--ink);
  font: 600 14px/18px var(--font-sans);
}

.mg-field-box {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--canvas);
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.mg-field-box:focus-within {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 1px var(--brand-ink);
}

.mg-field-prefix {
  margin-right: 2px;
  color: var(--ink-muted);
  font: 600 16px/22px var(--font-sans);
}

.mg-field-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/22px var(--font-sans);
}

.mg-field-input::placeholder { color: var(--ink-muted); }

.mg-field-hint {
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

.mg-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--danger);
  font: 600 13px/18px var(--font-sans);
}

.mg-field-error .mg-icon { width: 16px; height: 16px; }
.mg-field.is-invalid .mg-field-box { border-color: var(--danger); }
.mg-field.is-invalid .mg-field-box:focus-within { box-shadow: 0 0 0 1px var(--danger); }

/* ---- sign-in ---------------------------------------------------------------------- */
.mg-signin {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.mg-signin-head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.mg-signin-head .mg-mark { height: 40px; }

.mg-signin-title {
  margin: 0;
  color: var(--ink);
  font: 750 28px/34px var(--font-sans);
  letter-spacing: -0.02em;
}

.mg-signin-lede {
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* where Google's own "G" goes: from Google's branding kit, never redrawn */
.mg-google-mark {
  width: 20px;
  height: 20px;
  flex: none;
}

.mg-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

.mg-divider::before,
.mg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.mg-signin-test {
  display: grid;
  gap: var(--space-3);
}

/* ---- toast ------------------------------------------------------------------------ */
.mg-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--canvas);
  font: 600 14px/18px var(--font-sans);
  box-shadow: var(--shadow-toast);
}

.mg-toast .mg-icon { width: 18px; height: 18px; }
.mg-toast.is-entering { animation: mg-rise 0.2s ease-out both; }

/* ---- empty state ------------------------------------------------------------------- */
.mg-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.mg-empty .mg-mark { height: 44px; color: var(--line-strong); }

/* an icon in a soft disc, when the empty state reports an outcome (sent, up to date, failed) */
.mg-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--ink);
}

.mg-empty-icon .mg-icon { width: 28px; height: 28px; }

.mg-empty-title {
  margin: 0;
  color: var(--ink);
  font: 700 20px/26px var(--font-sans);
  letter-spacing: -0.01em;
}

.mg-empty-text {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.mg-empty .mg-btn { margin-top: var(--space-2); }

/* ---- loader: the M, written left to right ----------------------------------------- */
.mg-loader { display: inline-grid; place-items: center; color: var(--brand-ink); }
.mg-loader .mg-mark { height: 32px; color: inherit; animation: mg-write 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

/* ---- pages that are not the feed ---------------------------------------------------- */
.mg-page {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.mg-page-title {
  margin: 0;
  color: var(--ink);
  font: 750 28px/34px var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mg-page-lede {
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* a group on a page: a short title, its content, an optional note under it */
.mg-section {
  display: grid;
  gap: var(--space-2);
}

.mg-section-title {
  margin: 0 var(--space-1);
  color: var(--ink-muted);
  font: 600 13px/18px var(--font-sans);
}

.mg-section-note {
  margin: 0 var(--space-1);
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  text-wrap: pretty;
}

/* ---- rows: settings, choices that lead somewhere ---------------------------------- */
.mg-rows {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  list-style: none;
}

.mg-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.mg-rows > .mg-row + .mg-row { border-top: 1px solid var(--line); }
a.mg-row, button.mg-row, label.mg-row { cursor: pointer; }
a.mg-row:hover, button.mg-row:hover, label.mg-row:hover { background: var(--surface-strong); }
a.mg-row:focus-visible, button.mg-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mg-row > .mg-icon { width: 22px; height: 22px; color: var(--ink-muted); }

.mg-row-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.mg-row-title {
  color: var(--ink);
  font: 500 15px/21px var(--font-sans);
}

.mg-row-sub {
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  overflow-wrap: anywhere;
}

.mg-row-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-muted);
  font: 500 14px/18px var(--font-sans);
}

.mg-row-end .mg-icon { width: 20px; height: 20px; }
.mg-row.is-danger .mg-row-title,
.mg-row.is-danger > .mg-icon { color: var(--danger); }

/* ---- switch: a setting that is on or off, taking effect at once --------------------- */
.mg-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 28px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color 0.15s ease-out;
  appearance: none;
}

.mg-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--on-brand);
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.24);
  transition: transform 0.15s ease-out;
}

.mg-switch:checked { background: var(--brand); }
.mg-switch:checked::after { transform: translateX(16px); }
.mg-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- option cards: one choice of several, each needing a sentence -------------------- */
.mg-options {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mg-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.mg-options > legend {
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
}

.mg-option input { position: absolute; opacity: 0; pointer-events: none; }
.mg-option:hover { background: var(--surface); }

.mg-option-title {
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
}

.mg-option-text {
  grid-column: 1;
  color: var(--ink-muted);
  font: 400 14px/20px var(--font-sans);
  text-wrap: pretty;
}

.mg-option-mark {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 2;
  place-items: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}

.mg-option:has(input:checked) {
  border-color: var(--brand-ink);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand-ink);
}

.mg-option:has(input:checked) .mg-option-mark { border-color: var(--brand-ink); background: var(--brand-ink); }
.mg-option:has(input:checked) .mg-option-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--canvas); }
.mg-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- longer text, read-only fields, counts --------------------------------------------- */
.mg-field-area {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/22px var(--font-sans);
  resize: vertical;
}

.mg-field-area::placeholder { color: var(--ink-muted); }
.mg-field-area:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); }

.mg-field-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.mg-field-count {
  margin: 0 0 0 auto;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-field-box.is-readonly { border-color: var(--line); background: var(--surface); }
.mg-field-box.is-readonly .mg-field-input { color: var(--ink-muted); }

/* ---- search ------------------------------------------------------------------------- */
.mg-searchbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--size-topbar);
  padding: 0 var(--space-3) 0 var(--space-1);
  background: var(--canvas);
}

.mg-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-1) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.mg-search:focus-within { box-shadow: 0 0 0 1.5px var(--brand-ink); }
.mg-search > .mg-icon { width: 20px; height: 20px; color: var(--ink-muted); }

.mg-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/22px var(--font-sans);
}

.mg-search-input::placeholder { color: var(--ink-muted); }
.mg-search-input::-webkit-search-cancel-button { display: none; }
.mg-search .mg-icon-btn { width: 36px; height: 36px; color: var(--ink-muted); }
.mg-search .mg-icon-btn .mg-icon { width: 18px; height: 18px; }

/* ---- menu: a short list of actions under the button that opened it ------------------- */
.mg-menu-anchor { position: relative; }

.mg-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-toast);
  list-style: none;
}

.mg-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-hit);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 500 15px/21px var(--font-sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.mg-menu-item:hover { background: var(--surface); }
.mg-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mg-menu-item .mg-icon { width: 20px; height: 20px; color: var(--ink-muted); }
.mg-menu-item.is-danger,
.mg-menu-item.is-danger .mg-icon { color: var(--danger); }

/* ---- callout: something the page must say, with what to do -------------------------- */
.mg-callout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mg-callout > .mg-icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: var(--ink-muted);
}

.mg-callout-title {
  margin: 0;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
}

.mg-callout-text {
  margin: 0;
  color: var(--ink-muted);
  font: 400 14px/20px var(--font-sans);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.mg-callout > .mg-choices { grid-column: 2; margin-top: var(--space-2); }
.mg-callout.is-danger > .mg-icon,
.mg-callout.is-danger .mg-callout-title { color: var(--danger); }

/* ---- posting a file ------------------------------------------------------------------ */
.mg-drop {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.mg-drop > .mg-icon { width: 32px; height: 32px; color: var(--ink-muted); }
.mg-drop.is-over { border-color: var(--brand-ink); background: var(--brand-soft); }

.mg-drop-title {
  margin: 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
}

.mg-drop-text {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.mg-filecard {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.mg-filecard-thumb {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  box-shadow: 0 0 0 1px var(--line);
}

.mg-filecard-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-filecard-body { display: grid; gap: var(--space-2); min-width: 0; }

.mg-filecard-title {
  margin: 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
  overflow-wrap: anywhere;
}

.mg-filecard-weight {
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-filecard .mg-about-list li { padding: 6px 0; font-size: 14px; line-height: 20px; }
.mg-filecard .mg-about-list .mg-icon { width: 18px; height: 18px; }

/* ---- activity ------------------------------------------------------------------------ */
.mg-activity {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) 0;
}

.mg-activity-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
  overflow-wrap: anywhere;
}

.mg-activity-text strong { font-weight: 600; }
.mg-activity-text .mg-time { margin-left: 2px; }

.mg-activity-thumb {
  flex: none;
  width: 40px;
  height: 50px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.mg-activity-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* something new: a dot, so it never rests on colour alone */
.mg-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-ink);
}

.mg-activity-item:not(.is-new) > .mg-dot { visibility: hidden; }

.mg-has-dot { position: relative; }

.mg-has-dot::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--canvas);
}

/* ---- long text: privacy, terms -------------------------------------------------------- */
.mg-prose {
  display: grid;
  gap: var(--space-3);
  max-width: 65ch;
}

.mg-prose h2 {
  margin: var(--space-4) 0 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
}

.mg-prose p,
.mg-prose li {
  margin: 0;
  color: var(--ink);
  font: 400 15px/23px var(--font-sans);
  text-wrap: pretty;
}

.mg-prose ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }

.mg-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mg-summary-title {
  margin: 0;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
}

/* ---- the welcome slide: Mediagram's own, before the first post ------------------------ */
.mg-welcome {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: var(--space-6);
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6);
}

.mg-welcome .mg-mark { height: 48px; }

.mg-welcome-title {
  margin: 0;
  color: var(--ink);
  font: 750 28px/34px var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mg-welcome-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-welcome-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
}

.mg-welcome-list .mg-icon { width: 22px; height: 22px; color: var(--brand-ink); }

.mg-welcome-next {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink-muted);
  font: 600 14px/18px var(--font-sans);
}

.mg-welcome-next .mg-icon { width: 18px; height: 18px; }

/* ---- moderation (the admin dashboard) -------------------------------------------------- */
.mg-queue {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.mg-report {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.mg-report-thumb {
  width: 48px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.mg-report-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-report-thumb .mg-icon { margin: 18px 12px; color: var(--ink-muted); }

.mg-report-what,
.mg-report-why {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mg-report-title {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-report-note {
  overflow: hidden;
  margin: 0;
  color: var(--ink-muted);
  font: 400 14px/20px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-report-actions { display: flex; gap: var(--space-2); }

.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- motion ----------------------------------------------------------------------- */
@keyframes mg-pop {
  0% { transform: scale(0.85); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes mg-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mg-write {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  55% { clip-path: inset(0 0 0 0); opacity: 1; }
  80% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-action.is-popping .mg-icon,
  .mg-toast.is-entering { animation: none; }
  .mg-loader .mg-mark { animation: none; opacity: 0.5; }
  .mg-btn, .mg-icon-btn, .mg-action { transition: none; }
}