/* Free online Johari window (views/seo/johariWindow.ejs, johariFriend.ejs, johariResult.ejs) */
.jw-narrow { max-width: 760px; margin: 0 auto; }
.jw-card { background: #fff; border: 1px solid #dfe6f0; border-radius: 14px; padding: 1.25rem; box-shadow: 0 2px 10px rgba(16, 42, 84, .05); }
.jw-name { max-width: 320px; }
.jw-picker { display: flex; flex-wrap: wrap; gap: .45rem; }
.jw-chip { display: inline-block; padding: .4rem .8rem; border: 1px solid #c9d6e8; border-radius: 999px; background: #f6f9fd; font-size: .95rem; cursor: pointer; user-select: none; line-height: 1.3; }
.jw-chip:hover { border-color: #0d6efd; }
.btn-check:checked + .jw-chip { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.btn-check:focus-visible + .jw-chip { outline: 3px solid rgba(13, 110, 253, .4); outline-offset: 2px; }
.btn-check:disabled + .jw-chip { opacity: .45; cursor: not-allowed; }
.jw-counter { color: #6c757d; }
.jw-counter.jw-done { color: #198754; font-weight: 600; }
.jw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.jw-area { border-radius: 12px; padding: 1rem; border: 1px solid transparent; }
.jw-open { background: #e8f6ee; border-color: #b9e3c8; }
.jw-blind { background: #fff4e0; border-color: #f5d49a; }
.jw-hidden { background: #eaf1fd; border-color: #bcd2f7; }
.jw-unknown { background: #f2f2f4; border-color: #dcdce2; }
.jw-tag { display: inline-block; margin: 0 .25rem .35rem 0; padding: .25rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .08); font-weight: 600; }
.jw-tag small { font-weight: 400; color: #6c757d; }
.jw-tag-muted { font-weight: 400; color: #555; }
.jw-insight p:last-child { margin-bottom: 0; }
.jw-cta { background: #f0f7f2; border: 1px solid #cfe8d7; border-radius: 14px; padding: 1.25rem; }
@media (max-width: 576px) {
    .jw-grid { grid-template-columns: 1fr; }
    .jw-chip { font-size: .9rem; padding: .35rem .7rem; }
}
.jw-live { color: #198754; display: flex; align-items: center; gap: .4rem; }
.jw-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #198754; display: inline-block; animation: jw-pulse 2s infinite; }
@keyframes jw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.jw-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: #198754; color: #fff; padding: .55rem 1rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); z-index: 1050; font-weight: 600; margin: 0; }
.jw-tag.jw-new { animation: jw-flash 2.5s ease-out; }
@keyframes jw-flash { 0% { background: #ffe58a; transform: scale(1.08); } 100% { background: rgba(255, 255, 255, .85); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .jw-dot, .jw-tag.jw-new { animation: none; } }
.jw-email { border-top: 1px solid #e5eaf1; padding-top: 1rem; }
.jw-card > .jw-email:first-child { border-top: 0; padding-top: 0; margin-top: 0 !important; }
.jw-email-row { max-width: 460px; }