/* Community detail, writing, and profile surfaces from the updated mobile design. */
.screen.post-detail,.screen.compose,.screen.profile {
  --design-bg:#000;--design-card:#1b1c20;--design-inner:#2d2e32;
  --design-line:#34353a;--design-muted:#b4b5ba;--design-green:#00dca3;
  --design-action:#fff;--design-action-text:#050505;
  --bg:var(--design-bg);background:var(--design-bg);
}
.screen.post-detail { padding:0; }
:root[data-theme='light'] .screen.post-detail,:root[data-theme='light'] .screen.compose,:root[data-theme='light'] .screen.profile {
  --design-bg:#f7f6ff;--design-card:#fff;--design-inner:#fff;
  --design-line:#dedee4;--design-muted:#62636b;
  --design-action:#000;--design-action-text:#fff;
}
@media (prefers-color-scheme:light) {
  :root:not([data-theme]) .screen.post-detail,:root:not([data-theme]) .screen.compose,:root:not([data-theme]) .screen.profile {
    --design-bg:#f7f6ff;--design-card:#fff;--design-inner:#fff;
    --design-line:#dedee4;--design-muted:#62636b;
    --design-action:#000;--design-action-text:#fff;
  }
}

/* Floating navigation controls. */
.post-detail>.topbar,.profile:not(.pane-screen)>.topbar {
  position:absolute;top:0;left:0;right:0;z-index:8;
  padding:var(--status-gap) 20px 8px;justify-content:space-between;
  background:transparent;pointer-events:none;
}
.post-detail>.topbar .title,.profile:not(.pane-screen)>.topbar .title { display:none; }
.post-detail>.topbar>.slot,.profile:not(.pane-screen)>.topbar>.slot {
  display:flex;align-items:center;width:auto;height:54px;padding:0 4px;gap:0;
  border:1px solid var(--design-line);border-radius:999px;
  background:transparent;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  pointer-events:auto;corner-shape:round;
}
:root[data-theme='light'] .post-detail>.topbar>.slot,
:root[data-theme='light'] .profile:not(.pane-screen)>.topbar>.slot {
  background:color-mix(in srgb,#fff 80%,transparent);
}
@media (prefers-color-scheme:light) {
  :root:not([data-theme]) .post-detail>.topbar>.slot,
  :root:not([data-theme]) .profile:not(.pane-screen)>.topbar>.slot {
    background:color-mix(in srgb,#fff 80%,transparent);
  }
}
.post-detail>.topbar>.slot:first-child,.profile:not(.pane-screen)>.topbar>.slot:first-child {
  width:54px;padding:0;border-radius:50%;
}
.post-detail>.topbar .icon-btn,.profile:not(.pane-screen)>.topbar .icon-btn { width:46px;height:46px;padding:10px; }
.post-detail>.topbar>.slot:first-child .icon-btn,.profile:not(.pane-screen)>.topbar>.slot:first-child .icon-btn {
  width:52px;height:52px;
}
.post-detail .scroll { padding-top:calc(var(--status-gap) + 49px); }
.profile:not(.pane-screen)>.scroll { padding-top:calc(var(--status-gap) + 55px); }

/* Post and comments. */
.post-detail-body { padding:8px 20px 32px; }
.post-skeleton,.comments-skeleton { display:flex;flex-direction:column;gap:12px; }
.post-skeleton-head { display:flex;align-items:center;gap:9px;margin-bottom:8px; }
.post-skeleton-lines { display:flex;flex-direction:column;gap:6px; }
.post-skeleton>.comments-skeleton { margin-top:32px; }
.comment-section>.comments-skeleton { margin-bottom:16px; }
.post-skeleton .skel,.comments-skeleton .skel,.profile-skeleton .skel,.profile-posts-skeleton .skel {
  max-width:100%;
}
.post-skeleton-head>.skel,.profile-skeleton-hero>.skel { flex:none;corner-shape:round; }
.post-detail-article { padding:0; }
.post-detail-article .post-head { gap:8px; }
.post-detail-article .post-head .who { min-width:0; }
.post-detail-article .post-head .t-label-lg { font-size:14px;line-height:19px;font-weight:700; }
.post-detail-article .post-head .t-label-md { font-size:12px;line-height:17px;color:var(--design-muted); }
.post-detail-article .chip,.comment-grade {
  padding:5px 10px;border-radius:999px;background:var(--design-action);
  color:var(--design-action-text);font-size:11px;line-height:15px;white-space:nowrap;
}
.post-detail-follow {
  flex:none;min-height:34px;padding:0 12px;border-radius:999px;
  background:var(--design-action);color:var(--design-action-text);
  font-size:12px;line-height:17px;corner-shape:superellipse(1.5);
}
.post-detail-follow.following { background:var(--design-card);color:var(--text-1); }
.post-detail-title { margin-top:9px;font-size:19px;line-height:25px;font-weight:700; }
.post-detail-text { margin-top:3px;font-size:16px;line-height:22px;color:var(--text-1); }
.post-detail-article .detail-images { margin-top:12px; }
.post-detail-article .detail-images img {
  width:auto;max-width:min(100%,220px);max-height:350px;
  border-radius:calc(24px * var(--r-k));object-fit:contain;corner-shape:superellipse(1.5);
}
.post-detail-article .post-foot { margin-top:16px;padding-bottom:0;color:var(--text-1); }
.post-detail-article .post-foot .stat.liked { color:var(--design-green); }
.post-detail-article .post-foot .t-label-md { font-size:12px;line-height:18px; }
.comment-section { margin-top:32px;padding:0;border:0; }
.comment-heading { padding:0 0 15px;font-size:20px;line-height:26px;font-weight:700; }
.comment-list { display:flex;flex-direction:column;gap:12px; }
.comment,.comment-group {
  border:1px solid var(--design-line);border-radius:calc(28px * var(--r-k));
  background:var(--design-card);corner-shape:superellipse(1.5);
}
.comment {
  display:grid;grid-template-columns:34px minmax(0,1fr);
  column-gap:8px;row-gap:12px;padding:15px;
}
.comment-group { display:flex;flex-direction:column; }
.comment-group>.comment { border:0;background:transparent; }
.comment-main { display:contents; }
.comment-author { display:flex;align-items:center;gap:7px;min-width:0; }
.comment-author-info { display:flex;flex-direction:column;min-width:0; }
.comment-author-name { color:var(--text-1);font-size:14px;line-height:18px;font-weight:700; }
.comment-author-handle { color:var(--design-muted);font-size:12px;line-height:16px; }
.comment-grade { padding:4px 8px; }
.comment-more { margin-left:auto;padding:7px;color:var(--design-muted); }
.comment-text {
  grid-column:1/-1;margin:0;color:var(--text-1);
  font-size:16px;line-height:23px;overflow-wrap:anywhere;
}
.comment-actions {
  grid-column:1/-1;display:flex;align-items:center;gap:12px;
  min-height:20px;margin:0;color:var(--design-muted);font-size:12px;
}
.comment-like,.comment-reply-action {
  display:inline-flex;align-items:center;gap:4px;min-height:28px;
  padding:0 3px;color:var(--text-1);font-size:12px;
}
.comment-like.liked { color:var(--design-green); }
.comment-like:disabled { opacity:.65; }
.comment-replies-action { color:var(--design-green);font-size:12px; }
.comment-time { margin-left:auto;white-space:nowrap; }
.reply-list { padding:0 12px 12px;gap:8px; }
.comment.reply { margin:0;padding:14px;border-radius:calc(22px * var(--r-k)); }
.comment-empty { padding:26px 0; }
.comment-composer {
  margin:0 20px calc(10px + var(--safe-bottom));padding:9px;
  border:1px solid var(--design-line);border-radius:999px;
  background:var(--design-card);corner-shape:round;
}
.comment-composer-row { display:flex;align-items:center;gap:10px; }
.comment-composer .field {
  min-height:48px;padding:13px 17px;border-radius:999px;
  background:var(--design-inner);box-shadow:none;corner-shape:round;
}
.comment-composer textarea { max-height:132px;font-size:15px;line-height:21px; }
.comment-composer textarea::placeholder { color:var(--design-muted); }
.comment-composer .send-btn {
  flex:none;width:64px;height:48px;padding:12px;border-radius:999px;
  background:var(--design-green);color:#fff;corner-shape:round;
}
.comment-composer .send-btn:disabled { opacity:.55;color:#fff; }

/* Writing screen. Native keyboards occupy the space below this toolbar. */
.compose>.topbar { justify-content:space-between;padding:var(--status-gap) 20px 0;background:transparent; }
.compose-back,.compose-submit { display:grid;place-items:center;width:54px;height:54px;border-radius:50%; }
.compose-back { border:1px solid var(--design-line);background:transparent; }
.compose-submit { background:var(--design-green);color:#fff;font-size:15px;font-weight:700; }
.compose-submit:disabled { opacity:1; }
.compose-inner { padding:30px 30px 24px;gap:18px; }
.compose-main { display:flex;align-items:flex-start;gap:10px;min-height:45vh; }
.compose-identity { flex:none;padding:0; }
.compose-body {
  flex:1;min-width:0;min-height:45vh;padding:12px 0;
  font-size:17px;line-height:26px;font-weight:500;color:var(--text-1);
}
.compose-body::placeholder { color:var(--design-muted); }
.compose-anon-notice { padding:12px 14px;background:var(--design-card); }
.compose-toolbar {
  position:relative;gap:12px;min-height:72px;
  padding:10px 16px calc(10px + var(--safe-bottom));
  border:0;background:var(--design-bg);
}
.compose-tool {
  display:grid;place-items:center;flex:none;width:38px;height:38px;padding:7px;
  border-radius:calc(11px * var(--r-k));color:var(--design-green);
  corner-shape:superellipse(1.5);
}
.compose-poll-toggle.on { background:color-mix(in srgb,var(--design-green) 18%,transparent);color:var(--design-green); }
.compose-anon-toggle {
  position:relative;flex:none;width:64px;height:36px;border-radius:999px;
  background:#38393c;transition:background 160ms ease;
}
.compose-anon-toggle.on { background:#f4665b; }
.compose-anon-toggle:disabled { opacity:.65; }
.compose-anon-face {
  position:absolute;top:2px;left:2px;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:#fff;color:#000;
  font-size:22px;line-height:1;transition:transform 180ms var(--spring-soft);
}
.compose-anon-toggle.on .compose-anon-face { transform:translateX(28px); }
.compose-dest { display:block;flex:none;max-width:min(48vw,240px); }
.dest-chip {
  display:flex;align-items:center;gap:5px;min-height:36px;max-width:100%;
  padding:0 12px;border-radius:calc(11px * var(--r-k));
  background:var(--design-card);color:var(--text-1);
  font-size:12px;line-height:17px;font-weight:700;white-space:nowrap;
  corner-shape:superellipse(1.5);
}
.compose-target-label { overflow:hidden;text-overflow:ellipsis; }
.compose-target-popover {
  position:absolute;right:16px;bottom:calc(100% + 8px);z-index:10;
  width:min(340px,calc(100vw - 32px));max-height:min(55vh,460px);
  overflow-y:auto;padding:16px;border:1px solid var(--design-line);
  border-radius:calc(25px * var(--r-k));background:var(--design-card);
  box-shadow:0 12px 36px rgba(0,0,0,.25);corner-shape:superellipse(1.5);
}
.compose-target-popover .board-row { margin-bottom:12px; }
.compose-target-popover .dest-note { margin:8px 0 12px; }
.compose-counter { color:var(--design-muted);font-size:11px;white-space:nowrap; }

/* Profile header and its own post cards. */
.profile-hero { padding:6px 20px 8px; }
.profile-skeleton { display:flex;flex-direction:column;gap:14px;padding:10px 20px 24px; }
.profile-skeleton-hero { display:flex;justify-content:space-between;align-items:flex-start;gap:18px; }
.profile-skeleton-identity { display:flex;flex-direction:column;gap:10px;min-width:0; }
.profile-skeleton-actions { display:flex;gap:12px;margin:6px 0 12px; }
.profile-skeleton-actions>.skel { flex:1;min-width:0; }
.profile-posts-skeleton { padding-top:18px; }
.profile-hero-row { display:flex;align-items:flex-start;gap:18px; }
.profile-identity { flex:1;min-width:0; }
.profile-name { font-size:22px;line-height:26px;font-weight:800;overflow-wrap:anywhere; }
.profile-handle { color:var(--design-muted);font-size:16px;line-height:18px; }
.profile-badges { display:flex;flex-wrap:wrap;gap:7px;margin-top:3px; }
.profile-badge {
  padding:7px 11px;border-radius:999px;background:var(--design-action);
  color:var(--design-action-text);font-size:12px;line-height:16px;
  corner-shape:superellipse(1.5);
}
.profile-hero .profile-bio {
  margin-top:15px;color:var(--text-1);font-size:16px;
  line-height:22px;white-space:pre-line;
}
.profile-hero .profile-stats { display:flex;gap:20px;margin-top:10px; }
.profile-hero .profile-stats .row { gap:4px; }
.profile-hero .profile-stats .t-title-md { font-size:16px;line-height:21px; }
.profile-hero .profile-stats .t-body-md { color:var(--design-muted);font-size:15px;line-height:21px; }
.profile-hero .profile-actions { display:flex;gap:12px;margin-top:7px;padding:0; }
.profile-hero .profile-actions>.pill {
  flex:1;min-width:0;height:48px;border-radius:calc(16px * var(--r-k));
  background:var(--design-card);color:var(--text-1);
  font-size:16px;line-height:22px;corner-shape:superellipse(1.5);
}
.profile-hero .profile-actions>.pill:last-child { background:var(--design-action);color:var(--design-action-text); }
.profile-header>.divider { height:1px;margin:0 20px;background:var(--design-line); }
.profile-posts { gap:12px;padding:16px 20px 0; }
.profile-posts .post-card {
  padding:13px;border:1px solid var(--design-line);
  border-radius:calc(29px * var(--r-k));background:var(--design-card);
  corner-shape:superellipse(1.5);
}
.profile-posts .post-head { gap:8px; }
.profile-posts .post-head .t-label-lg { font-size:14px;line-height:19px;font-weight:700; }
.profile-posts .post-head .t-label-md { font-size:12px;line-height:17px;color:var(--design-muted); }
.profile-posts .post-head .chip {
  padding:4px 8px;border-radius:999px;background:var(--design-action);color:var(--design-action-text);
}
.profile-posts .post-title { margin-top:10px;font-size:18px;line-height:24px; }
.profile-posts .post-body { margin-top:3px;color:var(--text-1);font-size:16px;line-height:23px; }
.profile-posts .post-images.n1 { width:min(66%,280px);margin-top:10px;border-radius:calc(22px * var(--r-k)); }
.profile-posts .post-images.n1 img { height:auto;aspect-ratio:auto; }
.profile-posts .post-foot { margin-top:16px;color:var(--text-1); }
.profile-posts .post-foot .stat.liked { color:var(--design-green); }
.profile-posts .post-foot .t-label-md { font-size:12px;line-height:18px; }
.profile-posts .post-foot .more { display:none; }
.profile .qna-link { margin-top:20px;border-top:1px solid var(--design-line);border-bottom:0; }

@media (max-width:380px) {
  .compose-toolbar { gap:6px;padding-left:10px;padding-right:10px; }
  .compose-dest { max-width:42vw; }
  .profile-hero .profile-actions>.pill { font-size:14px; }
}
@media (min-width:1024px) {
  .profile.pane-screen .profile-posts { padding:0; }
  .profile.pane-screen .profile-posts .post-card { margin:0 35px 14px; }
}