/* Johari · Styles */
.jo-count { font-size: 12px; font-weight: 700; color: var(--mk-muted); margin-bottom: 8px; } .jo-count.ok { color: #059669; } .jo-count.over { color: #dc2626; }
.jo-chips .mk-chip { font-size: 13px; padding: 5px 11px; } .jo-chips .mk-chip.mine:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--mk-accent); }
.jo-rtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .jo-rtab { font: inherit; font-size: 13px; font-weight: 600; border-radius: 99px; border: 1.5px solid var(--mk-line); background: var(--mk-surface-2); padding: 6px 12px; cursor: pointer; color: var(--mk-muted); display: inline-flex; gap: 6px; align-items: center; }
.jo-rtab small { background: var(--mk-line); border-radius: 99px; padding: 0 6px; font-size: 11px; } .jo-rtab.on { background: var(--mk-accent); color: #fff; border-color: transparent; } .jo-rtab.on small { background: rgba(255,255,255,.3); } .jo-rtab.add { padding: 6px 10px; }
.jo-rater { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 12px 14px; margin-bottom: 10px; }
.jo-axes { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mk-muted); text-align: center; margin-bottom: 6px; }
.jo-grid { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.jo-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mk-muted); text-align: center; }
.jo-q { border-radius: 12px; padding: 12px; min-height: 120px; position: relative; } .jo-q b { display: block; font-size: 14px; margin-bottom: 6px; } .jo-q > small { position: absolute; top: 10px; right: 12px; font-weight: 800; font-size: 18px; opacity: .5; } .jo-q > div { display: flex; flex-wrap: wrap; gap: 4px; }
.jo-q.open { background: rgba(16,185,129,.12); border: 1.5px solid #10b981; } .jo-q.blind { background: rgba(245,158,11,.12); border: 1.5px solid #f59e0b; } .jo-q.hidden { background: rgba(99,102,241,.1); border: 1.5px solid #6366f1; } .jo-q.unknown { background: var(--mk-surface-2); border: 1.5px dashed var(--mk-line); }
.jo-tag { display: inline-flex; gap: 3px; align-items: center; background: var(--mk-surface); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; } .jo-tag small { font-size: 10px; color: var(--mk-muted); } .jo-tag.strong { box-shadow: inset 0 0 0 1.5px currentColor; }
.jo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .jo-stats div { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 10px; text-align: center; } .jo-stats b { display: block; font-size: 22px; } .jo-stats span { font-size: 11px; color: var(--mk-muted); }
.jo-refl { border-radius: var(--mk-radius-sm); padding: 12px 14px; margin-bottom: 10px; } .jo-refl b { display: block; margin-bottom: 6px; } .jo-refl > div:not(.mk-faint) { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .jo-refl.blind { background: rgba(245,158,11,.1); } .jo-refl.hidden { background: rgba(99,102,241,.08); }
.jo-grow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .jo-grow-col { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 12px 14px; } .jo-grow-col b { display: block; } .jo-grow-col small { display: block; color: var(--mk-muted); font-size: 12px; margin-bottom: 6px; } .jo-grow-col ul { margin: 0; padding-left: 18px; font-size: 14px; } .jo-grow-col li { margin-bottom: 6px; }
.jo-grow-col.ask { border-top: 4px solid #f59e0b; } .jo-grow-col.show { border-top: 4px solid #6366f1; }
.jo-sum { display: grid; gap: 8px; font-size: 14px; } .jo-sum div { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 8px 12px; } .jo-sum b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mk-muted); margin-bottom: 2px; }
.jo-link { text-decoration: none; color: inherit; text-align: left; }
@media (max-width: 600px) { .jo-stats { grid-template-columns: 1fr 1fr; } .jo-grow { grid-template-columns: 1fr; } .jo-q { min-height: 90px; padding: 10px; } .jo-tag { font-size: 12px; padding: 2px 8px; } }