/* social.css — MANJI-036 makers social components (reviews, comments, maker card, maker section, message and
   report sheets). Scoped under .ms; the host page (the store's App page, MANJI-034's /@handle) can theme it
   by overriding the --ms-* tokens, or add .ms-dark. manji.ai's look: DIN 1451 Mittelschrift + EB Garamond. */
@font-face { font-family: "Alte DIN 1451 Mittelschrift"; src: url("/assets/fonts/din1451alt.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond12-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

.ms {
  --ms-ink: #04050d; --ms-green: #00bf63; --ms-indigo: #3D4AAA; --ms-teal: #2DA0B4; --ms-yellow: #FFCC03; --ms-danger: #d64545;
  --ms-bg: transparent; --ms-card: #ffffff; --ms-fg: var(--ms-ink); --ms-dim: rgba(4,5,13,.58); --ms-line: rgba(4,5,13,.10); --ms-veil: rgba(4,5,13,.04);
  --ms-sys: "Alte DIN 1451 Mittelschrift", "Helvetica Neue", Arial, sans-serif;
  --ms-text: "EB Garamond", Georgia, serif;
  color: var(--ms-fg); background: var(--ms-bg); font-family: var(--ms-sys); font-size: 15px; line-height: 1.45;
}
.ms.ms-dark { --ms-card: #0d0f1c; --ms-fg: #f3f1ec; --ms-dim: rgba(243,241,236,.6); --ms-line: rgba(255,255,255,.10); --ms-veil: rgba(255,255,255,.04); --ms-bg: var(--ms-ink); }
.ms *, .ms *::before, .ms *::after { box-sizing: border-box; }
.ms-section { margin: 0 0 28px; }
.ms-h { font-family: var(--ms-sys); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-dim); margin: 0 0 12px; font-weight: normal; }
.ms-card { background: var(--ms-card); border: 1px solid var(--ms-line); border-radius: 14px; padding: 16px; }
.ms-row { display: flex; gap: 12px; align-items: center; }
.ms-grow { flex: 1; min-width: 0; }
.ms-dim { color: var(--ms-dim); font-size: 13px; }
.ms-text { font-family: var(--ms-text); font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }
.ms-btn { font: inherit; font-size: 14px; border-radius: 999px; padding: 8px 16px; border: 1px solid var(--ms-indigo); background: var(--ms-indigo); color: #fff; cursor: pointer; }
.ms-btn:hover { filter: brightness(1.08); }
.ms-btn[disabled] { opacity: .5; cursor: default; }
.ms-btn.ms-ghost { background: transparent; color: var(--ms-indigo); }
.ms-dark .ms-btn.ms-ghost { color: #aab3ff; border-color: #6a75d6; }
.ms-btn.ms-go { background: var(--ms-green); border-color: var(--ms-green); color: var(--ms-ink); }
.ms-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ms-dim); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ms-link:hover { color: var(--ms-fg); }
.ms-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--ms-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; overflow: hidden; }
.ms-av.ms-av-lg { width: 64px; height: 64px; font-size: 22px; }
.ms-av.ms-av-sm { width: 28px; height: 28px; font-size: 12px; }
.ms-stars { color: var(--ms-yellow); letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.ms-stars .ms-off { color: var(--ms-line); }
.ms-dark .ms-stars .ms-off { color: rgba(255,255,255,.18); }
.ms-badge { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--ms-green); color: var(--ms-ink); vertical-align: 2px; }
.ms-badge.ms-review { background: var(--ms-yellow); }
.ms-badge.ms-down { background: var(--ms-danger); color: #fff; }
.ms-badge.ms-verified { background: transparent; color: var(--ms-teal); border: 1px solid var(--ms-teal); }
.ms-summary { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ms-big { font-size: 46px; line-height: 1; }
.ms-bars { display: grid; gap: 4px; }
.ms-bar { display: grid; grid-template-columns: 14px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; color: var(--ms-dim); }
.ms-bar i { display: block; height: 6px; border-radius: 3px; background: var(--ms-veil); overflow: hidden; }
.ms-bar i b { display: block; height: 100%; background: var(--ms-yellow); }
.ms-list { display: grid; gap: 12px; }
.ms-reply { margin: 12px 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--ms-green); background: var(--ms-veil); border-radius: 0 10px 10px 0; }
.ms-kids { margin: 10px 0 0 22px; display: grid; gap: 10px; border-left: 1px solid var(--ms-line); padding-left: 14px; }
.ms-actions { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.ms-form { display: grid; gap: 10px; }
.ms-form textarea, .ms-form select, .ms-form input { font: inherit; width: 100%; border: 1px solid var(--ms-line); border-radius: 10px; padding: 10px 12px; background: var(--ms-card); color: var(--ms-fg); }
.ms-form textarea { font-family: var(--ms-text); font-size: 17px; min-height: 90px; resize: vertical; }
.ms-pick { display: flex; gap: 4px; }
.ms-pick button { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ms-line); padding: 0 2px; }
.ms-pick button.ms-on { color: var(--ms-yellow); }
.ms-note { font-size: 13px; color: var(--ms-dim); padding: 10px 12px; border: 1px dashed var(--ms-line); border-radius: 10px; }
.ms-msg { font-size: 13px; min-height: 1em; }
.ms-msg.ms-err { color: var(--ms-danger); }
.ms-msg.ms-okay { color: var(--ms-green); }
.ms-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ms-app-name { font-size: 17px; }
.ms-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 14px; }
.ms-stat b { display: block; font-size: 22px; font-weight: normal; }
.ms-sheet-back { position: fixed; inset: 0; background: rgba(4,5,13,.55); z-index: 9990; display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 640px) { .ms-sheet-back { align-items: center; } }
.ms-sheet { width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.ms-more { margin-top: 12px; }