/* Social Media Post Generator v1 — layered on aiwa-paraphrase.css (shared app shell) and aiwa-email.css
   (details button, dialog, extras). Everything here is prefixed sm- so it cannot leak into the other tools. */
.social-page #smPlatformMenu { width: 640px; }
.sm-platform-list { grid-template-columns: 1fr 1fr; }
.sm-platform-list button[data-platform="all"] { grid-column: 1 / -1; border-top: 1px solid var(--aiwa-line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 11px; }
.sm-platform-list button[data-platform="all"] .aiwa-ui-icon { opacity: 1; }
.sm-platform-list button[data-platform="all"]::after { display: none; }
.sm-platform-note { margin: 4px 6px 2px; padding: 8px 10px 4px; border-top: 1px solid var(--aiwa-line); color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.45; }
.social-page #smFormatMenu { width: 420px; }
.social-page #ppModeMenu, .social-page #smGoalMenu { width: 360px; }
.social-page .pp-mode-btn-text b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-length .pp-synonyms-value { min-width: 62px; }
.social-page .aiwa-doc-head { min-width: 120px; }
.social-page .em-details-btn { max-width: 170px; }
.social-page .pp-bar-inner .pp-language select { width: 170px; }

/* ---- details dialog extras ---- */
.sm-dialog { width: min(640px, calc(100vw - 32px)); }
.sm-dialog-set { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.sm-dialog-set legend { float: left; margin-right: 6px; padding: 0; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sm-radio { position: relative; display: inline-flex; }
.sm-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sm-radio span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--aiwa-line); border-radius: 999px; background: #fff; color: var(--aiwa-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.sm-radio input:checked + span { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.sm-radio input:focus-visible + span { box-shadow: 0 0 0 3px rgba(19, 122, 61, 0.2); }
.sm-dialog-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-dialog .sm-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fbfcfb; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.sm-dialog .sm-radio { text-transform: none; letter-spacing: 0; }
.sm-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--aiwa-brand); flex: 0 0 auto; }
.sm-check span { display: grid; gap: 2px; }
.sm-check b { color: var(--aiwa-ink); font-size: 13.5px; font-weight: 750; }
.sm-check small { color: var(--aiwa-muted); font-size: 12px; line-height: 1.4; font-weight: 500; }
.sm-dialog .em-dialog-grid + .em-dialog-grid { margin-top: -2px; }
@media (max-width: 900px) { .sm-dialog-toggles { grid-template-columns: 1fr; } .sm-dialog-set { flex-wrap: wrap; } }
html[data-theme="dark"] .sm-radio span, html[data-theme="dark"] .sm-check { background: #131a16; border-color: var(--aiwa-line); color: var(--aiwa-text); }
html[data-theme="dark"] .sm-radio input:checked + span { background: rgba(47, 174, 99, 0.18); border-color: var(--aiwa-brand); color: #4cc47c; }

/* ---- output pane ---- */
.sm-output { padding: 0; display: flex; flex-direction: column; }
.sm-output.empty { display: grid; padding: 22px 26px; }
.sm-output:not(.empty) .result-empty { display: none; }
.sm-posts { flex: 1 1 auto; min-height: 0; padding: 50px 18px 34px; display: grid; gap: 14px; align-content: start; overflow: auto; }
.sm-posts[hidden] { display: none; }
.sm-post { min-width: 0; border: 1px solid var(--aiwa-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10, 40, 24, 0.04); }
.sm-post-skeleton { padding: 16px 18px; min-height: 140px; }
.sm-post-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--aiwa-line); background: #fbfcfb; border-radius: 14px 14px 0 0; }
.sm-post-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sm-post-title b { font-size: 14px; font-weight: 800; color: var(--aiwa-ink); }
.sm-post-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.sm-format { padding: 2px 8px; border-radius: 999px; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 11px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.sm-post-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sm-count { display: inline-flex; align-items: center; gap: 6px; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fae63; flex: 0 0 auto; }
.sm-count[data-state="warn"]::before { background: #e0a100; }
.sm-count[data-state="over"] { color: #b3261e; }
.sm-count[data-state="over"]::before { background: #d33a2f; }
.sm-count-main { font-size: 12px; }
.sm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 1px solid var(--aiwa-line); border-radius: 999px; background: #fff; color: var(--aiwa-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color 140ms, border-color 140ms, color 140ms; }
.sm-btn .aiwa-ui-icon { width: 13px; height: 13px; }
.sm-btn:hover { border-color: #9bc7aa; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.sm-copy .aiwa-ui-icon { opacity: .85; }
.sm-label { display: block; color: var(--aiwa-muted); font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.sm-hooks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px 0; }
.sm-hooks .sm-label { margin-right: 2px; }
.sm-hooks button { max-width: 100%; min-width: 0; min-height: 28px; padding: 4px 11px; border: 1px solid var(--aiwa-line); border-radius: 16px; background: #fff; color: var(--aiwa-text); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.sm-hooks button:hover { border-color: #9bc7aa; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.sm-hooks button.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand); color: #fff; }
.sm-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 16px 0; }
.sm-field > .sm-label { grid-column: 1; }
.sm-field > .sm-count { grid-column: 3; }
.sm-field-body { grid-template-columns: 1fr; padding-bottom: 4px; }
.sm-field-body > .sm-label { grid-column: 1; }
.sm-field-small { padding-top: 8px; }
.sm-title, .sm-body, .sm-thread-body, .sm-slide-title, .sm-slide-text, .sm-script-hook, .sm-script-cta, .sm-script td > div { min-width: 0; padding: 6px 9px; border: 1px solid transparent; border-radius: 9px; color: var(--aiwa-ink); outline: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sm-title { font-size: 15px; font-weight: 750; line-height: 1.4; }
.sm-taglist { font-size: 13.5px; font-weight: 600; }
.sm-body { grid-column: 1 / -1; font-size: 15px; line-height: 1.75; }
.sm-title:hover, .sm-body:hover, .sm-thread-body:hover, .sm-slide-title:hover, .sm-slide-text:hover, .sm-script-hook:hover, .sm-script-cta:hover, .sm-script td > div:hover { border-color: var(--aiwa-line); background: #fbfcfb; }
.sm-title:focus, .sm-body:focus, .sm-thread-body:focus, .sm-slide-title:focus, .sm-slide-text:focus, .sm-script-hook:focus, .sm-script-cta:focus, .sm-script td > div:focus { border-color: var(--aiwa-brand); background: #fff; box-shadow: 0 0 0 3px rgba(19, 122, 61, 0.14); }
.sm-thread { list-style: none; margin: 0; padding: 12px 16px 4px; display: grid; gap: 10px; counter-reset: none; }
.sm-thread > li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fbfcfb; }
.sm-thread-num { grid-row: 1 / span 2; width: 38px; padding: 4px 0; border-radius: 8px; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 11.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sm-thread-body { font-size: 15px; line-height: 1.7; }
.sm-thread > li > .sm-count { grid-column: 2; justify-self: end; }
.sm-slides { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; counter-reset: slide; }
.sm-slides > li { counter-increment: slide; position: relative; padding: 28px 10px 10px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fbfcfb; }
.sm-slides > li::before { content: counter(slide); position: absolute; top: 8px; left: 10px; width: 22px; height: 18px; border-radius: 6px; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.sm-slide-title { font-size: 14px; font-weight: 800; line-height: 1.35; }
.sm-slide-text { font-size: 13.5px; line-height: 1.55; color: var(--aiwa-text); }
.sm-script-hook { grid-column: 1 / -1; font-size: 15px; font-weight: 750; line-height: 1.45; }
.sm-script { grid-column: 1 / -1; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--aiwa-line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.sm-script th { padding: 8px 10px; background: #f3f6f4; color: var(--aiwa-muted); font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.sm-script td { padding: 4px 4px; border-top: 1px solid var(--aiwa-line); vertical-align: top; }
.sm-script td:first-child { width: 78px; white-space: nowrap; color: var(--aiwa-muted); font-weight: 650; }
.sm-script td:nth-child(2) { width: 30%; }
.sm-script td > div { line-height: 1.5; }
.sm-script-cta-wrap { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.sm-script-cta { font-size: 14px; font-weight: 650; }
.sm-script-meta { grid-column: 1 / -1; color: var(--aiwa-muted); font-size: 12px; font-weight: 650; }
.sm-tags { padding: 12px 16px 4px; display: grid; gap: 8px; }
.sm-tags-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sm-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sm-tag-row > span { min-width: 58px; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 700; }
.sm-chip { min-height: 26px; padding: 2px 10px; border: 1px dashed var(--aiwa-line); border-radius: 999px; background: #fff; color: var(--aiwa-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color 140ms, border-color 140ms, color 140ms; }
.sm-chip:hover { border-color: #9bc7aa; color: var(--aiwa-brand-dark); }
.sm-chip.is-on { border-style: solid; border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.sm-chip.is-on::before { content: "✓ "; font-weight: 800; }
.sm-flair { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #eef3ff; color: #2c4a9a; font-size: 12.5px; font-weight: 700; }
.sm-post > :last-child { padding-bottom: 14px; }
.sm-post > .sm-post-head:last-child { padding-bottom: 12px; }
.sm-stat b { color: var(--aiwa-brand-dark); }
.sm-stat-over { color: #b3261e; font-weight: 700; }
.sm-refine-menu { left: auto; right: 0; top: calc(100% + 6px); bottom: auto; min-width: 200px; }
.sm-output.is-working .sm-posts { padding-top: 50px; }

/* ---- explainer extras (limits table, platform grid) ---- */
.sm-limits .wx-table td:first-child, .sm-limits .wx-table th[scope="row"] { white-space: nowrap; }
.sm-limits .wx-table .aiwa-ui-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }
.sm-platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sm-platform-card { display: grid; gap: 6px; padding: 16px 16px 14px; border: 1px solid var(--aiwa-line); border-radius: 14px; background: var(--aiwa-card, #fff); }
.sm-platform-card .aiwa-ui-icon { width: 22px; height: 22px; }
.sm-platform-card h3 { margin: 4px 0 0; font-size: 15px; }
.sm-platform-card p { margin: 0; color: var(--aiwa-muted); font-size: 13.5px; line-height: 1.5; }
.sm-platform-card small { color: var(--aiwa-brand-dark); font-size: 12px; font-weight: 700; }
@media (max-width: 1100px) { .sm-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sm-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .sm-platform-grid { grid-template-columns: 1fr; } }

@media (max-width: 1500px) { .social-page .pp-mode-btn-text b { max-width: 120px; } .sm-length .pp-range { width: 90px; } .aiwa-app-shell.social-page .aiwa-doc-head { flex: 1 1 0; min-width: 0; overflow: hidden; } .aiwa-app-shell.social-page .aiwa-doc-kicker, .aiwa-app-shell.social-page .aiwa-doc-title { display: none; } .social-page .em-details-btn { max-width: 140px; } .social-page .pp-bar-inner .pp-language select { width: 150px; } }
@media (max-width: 1300px) and (min-width: 901px) { .social-page .pp-mode-btn-text b { max-width: 82px; } .social-page .em-details-btn span { display: none; } .social-page .em-details-btn { padding: 0 11px; max-width: none; } .social-page .pp-synonyms-label, .social-page .sm-length .pp-synonyms-value { display: none; } .social-page .pp-bar-inner .pp-language select { width: 112px; } .social-page .sm-extras { gap: 10px; } }
@media (max-width: 1100px) and (min-width: 901px) { .social-page .pp-bar-inner { gap: 8px; } .social-page .pp-mode-btn { padding: 0 8px 0 10px; gap: 8px; } .social-page .pp-mode-btn-text b { max-width: 64px; } .social-page .pp-bar-inner .pp-language select { width: 100px; } .social-page .aiwa-drafts-btn span { display: none; } .social-page .sm-length .pp-range { width: 70px; } }
@media (max-width: 900px) {
  .social-page #smPlatformMenu, .social-page #smFormatMenu, .social-page #ppModeMenu, .social-page #smGoalMenu { width: auto; }
  .sm-platform-list { grid-template-columns: 1fr; }
  .sm-platform-list button[data-platform="all"] { grid-column: auto; }
  .social-page .pp-mode-btn-text b { max-width: none; }
  .sm-posts { padding: 46px 10px 28px; gap: 10px; }
  .sm-post-head { padding: 10px 12px; }
  .sm-hooks, .sm-tags, .sm-thread { padding-left: 12px; padding-right: 12px; }
  .sm-field { grid-template-columns: 1fr auto; padding-left: 12px; padding-right: 12px; }
  .sm-field > .sm-count { grid-column: 2; }
  .sm-title { grid-column: 1 / -1; }
  .sm-body, .sm-thread-body { font-size: 14.5px; }
  .sm-script { display: block; overflow-x: auto; border-radius: 10px; }
  .sm-script table, .sm-script thead, .sm-script tbody, .sm-script tr { display: table; width: 100%; }
  .sm-script td:first-child { width: 64px; }
  .sm-script-cta-wrap { grid-template-columns: 1fr; }
  .sm-slides { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .sm-slides { grid-template-columns: 1fr; } .sm-post-tools { width: 100%; justify-content: space-between; } }

/* ---- dark theme (tokens come from aiwa-dark.css) ---- */
html[data-theme="dark"] .sm-post, html[data-theme="dark"] .sm-output { background: var(--aiwa-card); border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-post-head, html[data-theme="dark"] .sm-thread > li, html[data-theme="dark"] .sm-slides > li { background: #131a16; border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-btn, html[data-theme="dark"] .sm-hooks button, html[data-theme="dark"] .sm-chip { background: #1b241f; border-color: var(--aiwa-line); color: var(--aiwa-text); }
html[data-theme="dark"] .sm-btn:hover, html[data-theme="dark"] .sm-hooks button:hover, html[data-theme="dark"] .sm-chip:hover { background: rgba(47, 174, 99, 0.16); border-color: #2f4237; color: #4cc47c; }
html[data-theme="dark"] .sm-hooks button.is-on { background: var(--aiwa-brand); border-color: var(--aiwa-brand); color: #08120c; }
html[data-theme="dark"] .sm-chip.is-on { background: rgba(47, 174, 99, 0.18); border-color: var(--aiwa-brand); color: #4cc47c; }
html[data-theme="dark"] .sm-title:hover, html[data-theme="dark"] .sm-body:hover, html[data-theme="dark"] .sm-thread-body:hover, html[data-theme="dark"] .sm-slide-title:hover, html[data-theme="dark"] .sm-slide-text:hover, html[data-theme="dark"] .sm-script-hook:hover, html[data-theme="dark"] .sm-script-cta:hover, html[data-theme="dark"] .sm-script td > div:hover { background: #1b241f; border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-title:focus, html[data-theme="dark"] .sm-body:focus, html[data-theme="dark"] .sm-thread-body:focus, html[data-theme="dark"] .sm-slide-title:focus, html[data-theme="dark"] .sm-slide-text:focus, html[data-theme="dark"] .sm-script-hook:focus, html[data-theme="dark"] .sm-script-cta:focus, html[data-theme="dark"] .sm-script td > div:focus { background: #1b241f; border-color: var(--aiwa-brand); box-shadow: 0 0 0 3px rgba(47, 174, 99, 0.2); }
html[data-theme="dark"] .sm-script { border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-script th { background: #131a16; }
html[data-theme="dark"] .sm-script td { border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-count[data-state="over"], html[data-theme="dark"] .sm-stat-over { color: #ff8a80; }
html[data-theme="dark"] .sm-flair { background: rgba(92, 132, 224, 0.18); color: #9fb8ff; }
html[data-theme="dark"] .sm-refine-menu { background: var(--aiwa-card); border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-platform-card { background: var(--aiwa-card); border-color: var(--aiwa-line); }
html[data-theme="dark"] .sm-platform-list button[data-platform="all"], html[data-theme="dark"] .sm-platform-note { border-color: var(--aiwa-line); }

/* ---- explainer: the real brief → posts example ---- */
.wx-io .sm-io-out h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wx-io .sm-io-out h4:first-of-type { margin-top: 0; }
.wx-io .sm-io-out h4 small { color: var(--aiwa-muted); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sm-sample-body p { overflow-wrap: anywhere; }