/* finesse · register=product · A=warm-paper+sage+mist-blue · B=editable-CJK-handwriting
 * C=responsive-post-feed · D=feedback-only · E=pencil-and-paper · SOUL=7 SPECTACLE=2 DENSITY=7
 * Approved reference styling; existing website/post structure retained. */
@font-face {
  font-family: "Social Handwriting";
  src: url("./social-assets/WenKai-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --social-paper: #f6f3e9;
  --social-card: #fcfaf4;
  --social-ink: #554131;
  --social-muted: #766959;
  --social-line: #c5bba9;
  --social-line-soft: #ded7c9;
  --social-sage: #dce1cc;
  --social-sage-ink: #4f6049;
  --social-blue: #dce9eb;
  --social-blue-ink: #3f616a;
  --social-heart: #a36150;
  --social-focus: #789096;
  --social-shadow: rgba(81, 62, 44, .09);
  --social-font: "Social Handwriting", "LXGW WenKai", cursive;
}

body.paper-theme {
  color: var(--social-ink);
  background: var(--social-paper) url("./social-assets/paper-fibers.png") repeat;
  background-size: 560px 560px;
  font-family: var(--social-font);
  font-synthesis: none;
}

body.paper-theme .app-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); box-shadow: none; }
.page-content.page-content--social { width: min(100%, 1040px); padding: 16px 28px 28px; }
.social-theme .social-page { gap: 16px; padding-top: 0; }
.paper-theme :is(button, select, textarea) { font-family: var(--social-font); font-weight: 400; }
.paper-theme :is(button, a) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.paper-theme :is(button, a, select, textarea):focus-visible { outline: 2px solid var(--social-focus); outline-offset: 4px; }
.paper-theme button { transition: background-color 140ms, transform 140ms; }
.paper-theme button:active { transform: translateY(1px); }
.sketch-icon { width: 24px; height: 26px; flex: 0 0 auto; overflow: visible; }

.social-brand { position: relative; min-height: 196px; display: flex; align-items: center; isolation: isolate; }
.social-brand__scenery { display: contents; }
.social-brand__continuation { display: none; }
.social-brand__copy { position: relative; z-index: 1; padding: 0 0 9px 3px; }
.social-toolbar__title::after { content: ""; position: absolute; right: 7%; bottom: 0; left: 0; height: 6px; background: url("./social-assets/pencil-underline.svg") center / 100% 100% no-repeat; }
.social-brand__tagline { margin: 8px 0 0; font-size: 18px; line-height: 1.3; letter-spacing: .04em; }
/* The scenery is a full-width paper backdrop; the brand stays live text above it. */
.social-brand__art {
  position: absolute; z-index: 0; left: 50%; top: -16px;
  width: 100vw; max-width: none; height: calc(100% + 24px);
  transform: translateX(-50%); object-fit: cover; object-position: center 53%;
  mix-blend-mode: multiply; opacity: .82; pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

.social-theme .social-toolbar { gap: 8px; padding-bottom: 9px; border-bottom: 1px dashed var(--social-line); }
.social-theme .social-toolbar__header { align-items: center; flex-direction: row; gap: 12px; }
.social-theme .social-toolbar__title { position: relative; width: fit-content; padding-bottom: 7px; color: var(--social-ink); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: .04em; }
.social-theme .social-toolbar__title::after { height: 4px; right: -4px; }
.social-theme .social-toolbar__stats { margin-top: 2px; color: var(--social-muted); font-size: 13px; line-height: 1.4; }
.social-theme .social-toolbar__ask-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 7px 17px; border: 1px solid var(--social-line);
  border-radius: 19px 23px 20px 17px / 21px 19px 24px 20px;
  box-shadow: 1px 2px 0 var(--social-shadow);
  background: var(--social-blue) url("./social-assets/paper-grain.svg");
  color: var(--social-ink); font-size: 17px; font-weight: 400; white-space: nowrap;
}
.social-theme .social-toolbar__ask-button .sketch-icon { width: 20px; height: 24px; }
.social-theme .question-filters { gap: 5px; }
.social-theme .question-filters__toggle { display: none; }
.social-theme .question-filters__select-row { gap: 12px; }
.social-theme .question-filters__select-label { color: var(--social-muted); font-size: 14px; font-weight: 400; gap: 0; }
.social-theme .question-filters__select-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.social-theme .question-filters select {
  min-height: 44px; border: 1px solid var(--social-line); border-radius: 5px 7px 4px 6px;
  background-color: var(--social-card); color: var(--social-ink); font-size: 16px;
  padding: 7px 28px 7px 10px; appearance: none;
  background-image: url("./social-assets/select-chevron.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
}
.social-theme .question-filters__controls-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.social-theme .question-filters__sort,
.social-theme .question-filters__topics { gap: 7px; }
.social-theme .question-filters__sort-button,
.social-theme .question-filters__topic {
  min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 5px 8px 5px 7px;
  background: transparent; color: var(--social-muted); font-size: 15px; font-weight: 400; white-space: nowrap;
}
.social-theme .question-filters__sort-button[aria-pressed="true"] { background: var(--social-sage); border-color: var(--social-line); color: var(--social-sage-ink); }
.social-theme .question-filters__topic { border-color: var(--social-line-soft); background: var(--social-card); }
.social-theme .question-filters__topic[aria-pressed="true"] { background: var(--social-blue); border-color: var(--social-focus); color: var(--social-blue-ink); }

.social-theme .social-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; align-items: start; }
.social-theme .social-post {
  position: relative; overflow: visible;
  border: 1px solid var(--social-line); border-radius: 6px 9px 5px 8px / 9px 5px 8px 5px;
  background: var(--social-card) url("./social-assets/paper-fibers.png") center / 700px;
  box-shadow: 2px 3px 0 var(--social-shadow), 0 9px 16px -12px var(--social-shadow);
}
.social-theme .social-post::before {
  content: ""; position: absolute; z-index: 1; top: -9px; left: 17px; width: 46px; height: 18px;
  background: url("./social-assets/paper-tape.svg") center / 100% 100% no-repeat;
  transform: rotate(-13deg); pointer-events: none;
}
.social-theme .social-post:nth-child(2n)::before { left: auto; right: 18px; transform: rotate(12deg); filter: hue-rotate(47deg) saturate(.7); }
.social-theme .social-post__header { padding: 18px 15px 0; gap: 8px; }
.social-theme .social-post__topic { color: var(--social-muted); font-size: 13px; }
.social-theme .social-post__status { border-radius: 5px 8px 5px 7px; background: var(--social-blue); color: var(--social-blue-ink); font-size: 12px; font-weight: 400; padding: 3px 6px; }
.social-theme .social-post__status--answered { background: var(--social-sage); color: var(--social-sage-ink); }
.social-theme .social-post__content { padding: 12px 14px 0; }
.social-theme .social-post__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 3px; background: var(--social-card); }
.social-theme .social-post__footer { flex-direction: column; align-items: stretch; gap: 4px; padding: 9px 15px 10px; }
.social-theme .social-post__details { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.social-theme .social-post__author { color: var(--social-ink); font-size: 14px; max-width: 45%; }
.social-theme .social-post__detail { color: var(--social-muted); font-size: 13px; }
.social-theme .social-post__actions { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 6px; }
.social-theme .social-post__like-button { display: inline-flex; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 3px 0 0; color: var(--social-muted); font-size: 13px; }
.social-theme .social-post__like-button .sketch-icon { width: 21px; height: 22px; }
.social-theme .social-post__like-button.is-active { color: var(--social-heart); }
.social-theme .social-post__like-button.is-active path { fill: var(--social-heart); fill-opacity: .12; }
.social-theme .social-post__answer-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--social-ink); font-size: 15px; font-weight: 400; white-space: nowrap; text-decoration-color: var(--social-sage-ink); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.social-theme .social-feed__empty { color: var(--social-muted); font-size: 16px; padding: 36px 14px; border: 1px dashed var(--social-line); border-radius: 7px; }
.social-theme .social-feed-pagination { justify-content: center; gap: 12px; margin: 0; }
.social-theme .social-feed-pagination__button,
.social-theme .social-feed-pagination__current { width: 44px; height: 44px; border: 1px solid var(--social-line); border-radius: 8px 11px 9px 7px; background: var(--social-card); color: var(--social-ink); font: 20px var(--social-font); }
.social-theme .social-feed-pagination__current { color: var(--social-sage-ink); background: var(--social-sage); }

.social-theme :is(.question-composer, .answer-composer) {
  margin: 0; padding: 23px; gap: 13px; border: 1px solid var(--social-line);
  border-radius: 7px 11px 7px 10px; background: var(--social-card) url("./social-assets/paper-grain.svg");
  box-shadow: 2px 3px 0 var(--social-shadow); scroll-margin-block: 24px 110px;
}
.social-theme :is(.question-composer__label, .answer-composer__label) { color: var(--social-ink); font-size: 21px; line-height: 1.5; font-weight: 400; }
.social-theme .answer-composer__target { margin: 0; padding: 0 0 12px; border-bottom: 1px dashed var(--social-line); color: var(--social-muted); font-size: 15px; font-weight: 400; line-height: 1.6; }
.social-theme :is(.question-composer, .answer-composer) textarea {
  display: block; width: 100%; min-height: 146px; padding: 13px 14px;
  border: 1px solid var(--social-line); border-radius: 5px 8px 6px 7px;
  background: var(--social-paper); color: var(--social-ink); font: 400 17px/1.8 var(--social-font); resize: vertical;
}
.social-theme textarea::placeholder { color: var(--social-muted); opacity: 1; }
.social-theme :is(.question-composer__submit, .answer-composer__submit) { min-height: 46px; justify-self: start; padding: 8px 23px; border: 1px solid var(--social-line); border-radius: 9px 13px 10px 12px; background: var(--social-blue); color: var(--social-ink); font: 400 17px/1.4 var(--social-font); cursor: pointer; white-space: nowrap; }
.social-theme :is(.answer-composer__preview, .answer-composer__status) { margin: 0; padding: 10px 12px; color: var(--social-sage-ink); background: var(--social-sage); border: 0; border-radius: 5px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.social-theme .question-composer__templates { gap: 11px; color: var(--social-muted); font-size: 16px; font-weight: 400; }
.social-theme .question-composer__template-choices { gap: 8px; }
.social-theme .question-composer__template-choice { min-height: 44px; gap: 6px; padding: 6px 9px; border: 1px solid var(--social-line-soft); border-radius: 7px; background: var(--social-paper); color: var(--social-ink); font-size: 15px; }
.social-theme .question-composer__template-choice:has(input:checked) { background: var(--social-sage); border-color: var(--social-line); }
.social-theme input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--social-sage-ink); }
.social-theme .question-composer__template-preview { border-color: var(--social-line); border-radius: 5px; }

.paper-theme .bottom-navigation {
  right: 14px; bottom: max(9px, env(safe-area-inset-bottom)); left: 14px; width: min(calc(100% - 28px), 730px);
  margin-inline: auto; padding: 0 5px; border: 1px solid var(--social-line);
  border-radius: 21px 25px 23px 20px / 24px 20px 26px 22px;
  background: var(--social-card) url("./social-assets/paper-grain.svg"); box-shadow: 1px 3px 0 var(--social-shadow);
}
.paper-theme .bottom-navigation__items { width: 100%; height: 73px; }
.paper-theme .bottom-navigation__item { align-content: center; gap: 3px; padding: 5px 0; color: var(--social-ink); font-size: 14px; font-weight: 400; }
.paper-theme .bottom-navigation__item .sketch-icon { position: relative; z-index: 1; width: 28px; height: 30px; }
.paper-theme .bottom-navigation__item[aria-current="page"]::before { content: ""; position: absolute; top: 5px; left: calc(50% - 25px); width: 50px; height: 43px; background: var(--social-sage); border-radius: 50% 43% 49% 47%; transform: rotate(-9deg); }
.paper-theme .bottom-navigation__label { position: relative; white-space: nowrap; }
.paper-theme .bottom-navigation__item[aria-current="page"] .bottom-navigation__label::after { content: ""; display: block; position: absolute; right: 0; left: 0; bottom: -4px; height: 3px; background: url("./social-assets/pencil-underline.svg") center / 100% 100% no-repeat; }
.paper-theme .bottom-navigation__badge { z-index: 2; top: 3px; right: calc(50% - 27px); color: var(--social-card); background: var(--social-heart); border-color: var(--social-card); font-size: 11px; }

@media (max-width: 600px) {
  .page-content.page-content--social { padding: 16px 14px 25px; }
  .social-theme .social-page { gap: 8px; }
  .social-brand { min-height: clamp(96px, 27vw, 112px); }
  .social-brand__copy { padding: 0 0 4px 6px; }
  .social-brand__last-character { display: inline-block; margin-left: -.14em; }
  .social-brand__tagline { margin-top: 7px; font-size: 13px; line-height: 1.2; letter-spacing: 0; }
  .social-brand__continuation { display: block; position: absolute; left: 0; top: -4px; width: 100%; height: calc(100% + 18px); pointer-events: none; }
  .social-brand__art {
    left: auto; right: -2px; top: -4px; width: 57%; height: calc(100% + 18px);
    transform: none; object-fit: contain; object-position: center; opacity: .7;
    mask-image: linear-gradient(110deg, transparent 1%, #000 22%, #000 82%, transparent 99%);
  }
  .social-theme .social-toolbar { gap: 5px; padding-bottom: 7px; }
  .social-theme .social-toolbar__title { font-size: 21px; padding-bottom: 3px; }
  .social-theme .social-toolbar__title::after { height: 3px; }
  .social-theme .social-toolbar__stats { font-size: 11px; line-height: 1.3; margin-top: 1px; }
  .social-theme .social-toolbar__ask-button { gap: 4px; padding: 7px 10px; min-height: 44px; font-size: 15px; }
  .social-theme .social-toolbar__ask-button .sketch-icon { width: 18px; height: 21px; }
  .social-theme .question-filters__select-row { gap: 8px; }
  .social-theme .question-filters { display: flex; flex-direction: column; }
  .social-theme .question-filters__select-row { order: 1; }
  .social-theme .question-filters:not(.is-expanded) :is(.question-filters__select-row, .question-filters__topics) { display: none; }
  .social-theme .question-filters__select-label { font-size: 13px; gap: 0; }
  .social-theme .question-filters select { padding-left: 7px; padding-right: 22px; background-position: right 7px center; font-size: 16px; }
  .social-theme .question-filters__controls-row { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
  .social-theme .question-filters__sort { grid-column: 1; grid-row: 1; }
  .social-theme .question-filters__topics { grid-column: 1 / -1; grid-row: 2; }
  .social-theme .question-filters__toggle {
    display: inline-flex; align-items: center; grid-column: 2; grid-row: 1;
    position: relative; isolation: isolate;
    min-height: 44px; padding: 7px 25px 7px 10px; border: 0;
    border-radius: 5px 8px 5px 7px; color: var(--social-ink); font-size: 14px; cursor: pointer; background: none;
  }
  /* The paper labels are slim; their transparent touch targets stay 44px tall. */
  .social-theme .question-filters__toggle::before,
  .social-theme .question-filters__sort-button::before {
    content: ""; position: absolute; z-index: -1; inset: 6px 1px;
    border: 1px solid transparent; border-radius: 4px 6px 4px 5px;
  }
  .social-theme .question-filters__toggle::before { background: var(--social-card); border-color: var(--social-line-soft); }
  .social-theme .question-filters__toggle::after { content: ""; position: absolute; right: 9px; top: calc(50% - 3px); width: 9px; height: 6px; background: url("./social-assets/select-chevron.svg") center / contain no-repeat; }
  .social-theme .question-filters__toggle[aria-expanded="true"]::before { background: var(--social-blue); border-color: var(--social-focus); }
  .social-theme .question-filters__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .social-theme .question-filters__sort,
  .social-theme .question-filters__topics { flex-wrap: nowrap; gap: 3px; }
  .social-theme .question-filters__sort-button,
  .social-theme .question-filters__topic { padding: 7px 6px; font-size: 13px; }
  .social-theme .question-filters__sort-button[aria-pressed] { position: relative; isolation: isolate; padding-inline: 5px; border-color: transparent; background: none; }
  .social-theme .question-filters__sort-button[aria-pressed="true"]::before { background: var(--social-sage); border-color: var(--social-line); }
  .social-theme .social-feed { gap: 18px 12px; margin-top: 4px; }
  .social-theme .social-post::before { width: 33px; height: 15px; top: -8px; left: 10px; }
  .social-theme .social-post:nth-child(2n)::before { left: auto; right: 10px; }
  .social-theme .social-post__header { padding: 14px 9px 0; gap: 3px; }
  .social-theme .social-post__topic { font-size: 12px; }
  .social-theme .social-post__status { padding: 3px 5px; font-size: 12px; }
  .social-theme .social-post__content { padding: 8px 7px 0; }
  .social-theme .social-post__footer { padding: 8px 9px 4px; gap: 0; }
  .social-theme .social-post__details { flex-direction: column; align-items: start; gap: 4px; }
  .social-theme .social-post__author { max-width: 100%; font-size: 13px; }
  .social-theme .social-post__detail { font-size: 12px; }
  .social-theme .social-post__answer-link { font-size: 13px; }
  .social-theme .social-post__like-button { gap: 3px; font-size: 12px; }
  .social-theme .social-post__like-button .sketch-icon { width: 18px; height: 20px; }
  .social-theme :is(.question-composer, .answer-composer) { padding: 18px 15px; gap: 12px; }
  .social-theme :is(.question-composer, .answer-composer) textarea { font-size: 16px; }
  .social-theme :is(.question-composer__label, .answer-composer__label) { font-size: 21px; }
  .social-theme .answer-composer__target { font-size: 14px; }
  .social-theme .question-composer__template-choice { font-size: 13px; padding: 6px 8px; }
  .social-theme .question-composer__template-choices { gap: 6px; }
  .paper-theme .bottom-navigation { right: 18px; left: 18px; width: calc(100% - 36px); border-radius: 18px 21px 19px 18px / 21px 18px 22px 19px; }
  .paper-theme .bottom-navigation__items { height: 60px; }
  .paper-theme .bottom-navigation__item { gap: 2px; padding: 3px 0; font-size: 12px; }
  .paper-theme .bottom-navigation__item .sketch-icon { width: 25px; height: 27px; }
  .paper-theme .bottom-navigation__item[aria-current="page"]::before { top: 4px; left: calc(50% - 21px); width: 42px; height: 36px; }
  .paper-theme .bottom-navigation__badge { top: 1px; right: calc(50% - 24px); }
}

@media (max-width: 350px) {
  .page-content.page-content--social { padding-inline: 10px; }
  .social-brand { min-height: 90px; }
  .social-brand__tagline { font-size: 12px; }
  .social-theme .social-feed { column-gap: 10px; }
  .social-theme .social-toolbar__ask-button { padding-inline: 8px; font-size: 14px; }
  .social-theme .social-toolbar__ask-button .sketch-icon { display: none; }
  .social-theme .question-filters__sort-button,
  .social-theme .question-filters__topic { padding-inline: 4px; font-size: 12px; }
  .social-theme .social-post__header { padding-inline: 7px; }
  .social-theme .social-post__footer { padding-inline: 7px; }
  .social-theme .social-post__answer-link { font-size: 12px; }
}

@media (min-width: 900px) {
  .social-theme .social-toolbar__title-group { display: flex; align-items: baseline; gap: 14px; }
  .social-theme .question-filters { display: flex; align-items: center; gap: 18px; }
  .social-theme .question-filters__select-row { flex: 1 1 0; gap: 10px; }
  .social-theme .question-filters__controls-row { flex: 0 0 auto; gap: 18px; flex-wrap: nowrap; }
}

@media (max-width: 600px) and (max-height: 600px) {
  .page-content.page-content--social { padding-top: 12px; }
  .social-theme .social-page { gap: 6px; }
  .social-brand { min-height: 76px; }
  .social-brand__copy { padding-bottom: 2px; }
  .social-brand__tagline { margin-top: 4px; font-size: 12px; }
  .social-theme .social-toolbar { gap: 4px; padding-bottom: 5px; }
  .social-theme .question-filters { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-theme *, .paper-theme *::before, .paper-theme *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}