/* ═══════════════════════════════════════════════════════════════════
   WAVE 4 - SOCIAL MEDIA TOOLS
   Namespace: .w4s-* (BEM-ish; underscores avoided in JS, hyphens here)
   - Post Schedule Heatmap (CSV)
   - Hashtag Banned/Shadowban Checker
   - Bio Link A/B Compare
═══════════════════════════════════════════════════════════════════ */

.w4s-form { display: grid; gap: 1.25rem; }

.w4s-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 1.25rem;
}
.w4s-card__title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text, #0F172A);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.w4s-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.w4s-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.w4s-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 720px) {
    .w4s-grid-2, .w4s-grid-3 { grid-template-columns: 1fr; }
}

.w4s-help { color: var(--color-text-muted, #64748B); font-size: .8125rem; margin: 0; }
.w4s-section-title {
    font-weight: 700;
    color: var(--color-text, #0F172A);
    font-size: 1rem;
    margin: 1.25rem 0 .5rem;
}

/* ─── Heatmap ─── */
.w4s-drop {
    border: 2px dashed var(--color-border, #CBD5E1);
    border-radius: var(--radius-lg, 12px);
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--color-bg, #F8FAFC);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.w4s-drop:hover, .w4s-drop.is-active {
    border-color: var(--color-primary, #4F46E5);
    background: rgba(79, 70, 229, .04);
}
.w4s-drop__icon { font-size: 2.25rem; color: var(--color-primary, #4F46E5); }
.w4s-drop__title { font-weight: 700; font-size: 1.0625rem; margin-top: .5rem; }
.w4s-drop__sub { color: var(--color-text-muted, #64748B); font-size: .875rem; margin-top: .25rem; }
.w4s-drop input[type=file] { display: none; }

.w4s-heatmap-wrap { overflow-x: auto; }
.w4s-heatmap {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: .75rem;
    width: 100%;
    table-layout: fixed;
}
.w4s-heatmap th, .w4s-heatmap td {
    text-align: center;
    padding: 0;
    height: 28px;
    min-width: 24px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.w4s-heatmap th {
    background: transparent;
    color: var(--color-text-muted, #64748B);
    font-weight: 600;
    font-size: .6875rem;
}
.w4s-heatmap th.w4s-heatmap__day { text-align: right; padding-right: .5rem; min-width: 38px; }
.w4s-heatmap td {
    background: #F1F5F9;
    color: #0F172A;
    cursor: default;
}
.w4s-heatmap td.is-best { background: #16A34A; color: #fff; font-weight: 700; }
.w4s-heatmap td.is-good { background: #4ADE80; color: #052E16; }
.w4s-heatmap td.is-mid  { background: #FBBF24; color: #422006; }
.w4s-heatmap td.is-low  { background: #E2E8F0; color: #334155; }
.w4s-heatmap td.is-empty { background: #FAFAFA; color: #CBD5E1; }
.w4s-heatmap td:hover { outline: 2px solid var(--color-primary, #4F46E5); }

.w4s-legend {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .75rem;
    color: var(--color-text-muted, #64748B);
    margin-top: .5rem;
}
.w4s-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.w4s-legend__swatch {
    width: 14px; height: 14px; border-radius: 3px; display: inline-block;
}

.w4s-best-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .375rem;
}
.w4s-best-list li {
    display: flex;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--color-bg, #F8FAFC);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border, #E5E7EB);
}
.w4s-best-list__rank {
    font-weight: 700;
    color: var(--color-primary, #4F46E5);
    min-width: 1.5rem;
}
.w4s-best-list__slot { flex: 1; }
.w4s-best-list__val { font-weight: 700; font-variant-numeric: tabular-nums; }

.w4s-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}
.w4s-stat {
    background: var(--color-bg, #F8FAFC);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: .75rem 1rem;
}
.w4s-stat__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--color-text-muted, #64748B);
}
.w4s-stat__value {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-text, #0F172A);
    margin-top: .125rem;
}

/* ─── Hashtag Checker ─── */
.w4s-tag-textarea {
    min-height: 140px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: .9375rem;
}
.w4s-stats-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.w4s-stats-banner .w4s-stat__value { font-size: 1.5rem; }
.w4s-stat--banned .w4s-stat__value { color: #B91C1C; }
.w4s-stat--shadow .w4s-stat__value { color: #B45309; }
.w4s-stat--safe   .w4s-stat__value { color: #15803D; }

.w4s-tag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.w4s-tag-table thead th {
    text-align: left;
    padding: .5rem .75rem;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #64748B);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}
.w4s-tag-table tbody td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    vertical-align: middle;
}
.w4s-tag-table tbody tr:last-child td { border-bottom: 0; }
.w4s-tag-name {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-weight: 700;
    color: var(--color-text, #0F172A);
}
.w4s-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .125rem .5rem;
    border-radius: 999px;
    line-height: 1.4;
}
.w4s-tag-pill--safe { background: #DCFCE7; color: #15803D; }
.w4s-tag-pill--shadow { background: #FEF3C7; color: #B45309; }
.w4s-tag-pill--banned { background: #FEE2E2; color: #B91C1C; }
.w4s-tag-pill--restricted { background: #FFE4E6; color: #BE123C; }
.w4s-tag-toggle {
    background: none;
    border: 1px solid var(--color-border, #E5E7EB);
    padding: .125rem .5rem;
    font-size: .75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted, #64748B);
}
.w4s-tag-toggle:hover { background: var(--color-bg, #F8FAFC); }
.w4s-tag-why {
    background: var(--color-bg, #F8FAFC);
    padding: .75rem 1rem;
    font-size: .875rem;
    color: var(--color-text, #0F172A);
    border-left: 3px solid var(--color-primary, #4F46E5);
}

/* ─── Bio Link A/B Compare ─── */
.w4s-bio-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.w4s-bio-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 980px) {
    .w4s-bio-stage { grid-template-columns: 1fr; }
}

.w4s-bio-col__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.w4s-bio-col__label {
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--color-text, #0F172A);
}
.w4s-bio-col__label .badge {
    font-size: .6875rem;
    margin-left: .25rem;
    background: var(--color-primary, #4F46E5);
    color: #fff;
    padding: .125rem .375rem;
    border-radius: 4px;
    vertical-align: middle;
}

/* Phone preview frame */
.w4s-phone {
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 18;
    border: 12px solid #111827;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .15);
    position: relative;
    background: #fff;
}
.w4s-phone__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    background: #111827;
    border-radius: 0 0 12px 12px;
    z-index: 5;
}
.w4s-phone__inner {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 36px 18px 24px;
    box-sizing: border-box;
    transition: background .2s ease, color .2s ease;
}

/* Bio inner content base */
.w4s-bio {
    text-align: center;
    color: #0F172A;
}
.w4s-bio__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto .75rem;
    object-fit: cover;
    background: #E2E8F0;
    border: 3px solid rgba(255, 255, 255, .8);
}
.w4s-bio__name {
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.2;
}
.w4s-bio__tagline {
    font-size: .8125rem;
    opacity: .82;
    margin-top: .25rem;
    padding: 0 .5rem;
}
.w4s-bio__links {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
}
.w4s-bio__link {
    display: block;
    padding: .625rem .75rem;
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
    color: inherit;
    transition: transform .12s ease;
    text-align: center;
    word-break: break-word;
}
.w4s-bio__link:hover { transform: translateY(-1px); }

/* Theme: Light (default) */
.w4s-theme-light .w4s-phone__inner { background: #ffffff; color: #0F172A; }
.w4s-theme-light .w4s-bio__link { background: #F1F5F9; color: #0F172A; }

/* Theme: Dark */
.w4s-theme-dark .w4s-phone__inner { background: #0F172A; color: #F8FAFC; }
.w4s-theme-dark .w4s-bio__link { background: #1E293B; color: #F8FAFC; }
.w4s-theme-dark .w4s-bio__avatar { border-color: rgba(255,255,255,.15); }

/* Theme: Gradient */
.w4s-theme-gradient .w4s-phone__inner {
    background: linear-gradient(160deg, #6366F1 0%, #EC4899 100%);
    color: #fff;
}
.w4s-theme-gradient .w4s-bio__link { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); }
.w4s-theme-gradient .w4s-bio__avatar { border-color: rgba(255,255,255,.4); }

/* Theme: Brutalist */
.w4s-theme-brutalist .w4s-phone__inner {
    background: #FAFAF5;
    color: #111;
    font-family: "Courier New", ui-monospace, monospace;
}
.w4s-theme-brutalist .w4s-bio__link {
    background: #FFFF00;
    color: #111;
    border: 2px solid #111;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #111;
}
.w4s-theme-brutalist .w4s-bio__avatar {
    border: 2px solid #111;
    border-radius: 0;
}
.w4s-theme-brutalist .w4s-bio__name { letter-spacing: -.02em; }

/* Theme: Bento */
.w4s-theme-bento .w4s-phone__inner {
    background: #F4F4F5;
    color: #18181B;
}
.w4s-theme-bento .w4s-bio__links { gap: .5rem; grid-template-columns: 1fr 1fr; }
.w4s-theme-bento .w4s-bio__links > .w4s-bio__link:first-child { grid-column: span 2; }
.w4s-theme-bento .w4s-bio__link {
    background: #fff;
    border: 1px solid #E4E4E7;
    border-radius: 14px;
    padding: .875rem .5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Button styles (overrides on top of theme) */
.w4s-btnstyle-pill   .w4s-bio__link { border-radius: 999px; }
.w4s-btnstyle-square .w4s-bio__link { border-radius: 6px; }
.w4s-btnstyle-outline .w4s-bio__link {
    background: transparent;
    border: 1.5px solid currentColor;
}
.w4s-btnstyle-filled .w4s-bio__link { /* already filled by theme; no override */ }

/* Editor controls */
.w4s-bio-editor {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem;
    margin-top: .75rem;
}
.w4s-bio-editor h6 {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #64748B);
    margin: .75rem 0 .5rem;
    font-weight: 800;
}
.w4s-bio-editor h6:first-child { margin-top: 0; }
.w4s-bio-link-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto auto;
    gap: .375rem;
    align-items: center;
    margin-bottom: .375rem;
}
.w4s-bio-link-row .form-control { font-size: .8125rem; padding: .375rem .5rem; }
.w4s-bio-link-row .btn { padding: .25rem .5rem; }

.w4s-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    background: var(--color-bg, #F1F5F9);
    border-radius: var(--radius-md, 8px);
    padding: .25rem;
}
.w4s-segmented__btn {
    border: 0;
    background: transparent;
    padding: .25rem .625rem;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748B);
    cursor: pointer;
}
.w4s-segmented__btn.is-active {
    background: #fff;
    color: var(--color-text, #0F172A);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.w4s-suggest {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #78350F;
    padding: .75rem 1rem;
    border-radius: var(--radius-md, 8px);
    font-size: .875rem;
    margin-top: .75rem;
}
.w4s-suggest strong { color: #78350F; }
.w4s-suggest ul { padding-left: 1.1rem; margin: .375rem 0 0; }

/* Disclaimer */
.w4s-disclaimer {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E3A8A;
    padding: .625rem .875rem;
    border-radius: var(--radius-md, 8px);
    font-size: .8125rem;
}