/* Narcissism lesson. All rules scoped under .nar-* */

.nar-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.nar-note { font-size: 12px; color: var(--faint); text-align: center; }

.nar-face { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 800 15px var(--sans); font-style: normal; color: #1A1206; }

/* first meeting */
.nar-meet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nar-card { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 10px 11px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.nar-card:active { background: var(--raised); }
.nar-meet.done .nar-card { cursor: default; }
.nar-card.nar-chosen { border-color: var(--violet-bright); background: rgba(123, 92, 253, .12); }
.nar-who { display: flex; align-items: center; gap: 8px; }
.nar-who b { font-size: 15px; }
.nar-card p { margin: 0; font-size: 14px; line-height: 1.3; color: var(--dim); }
.nar-like { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; opacity: 0; transition: opacity .3s; margin-top: auto; }
.nar-like i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.nar-rated .nar-like { opacity: 1; }

/* seven weeks */
.nar-log small b { color: var(--gold); }
.nar-log { padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); min-height: 58px; }
.nar-log small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #E8835E; }
.nar-log p { margin: 2px 0 0; font-size: 15px; line-height: 1.3; }
.nar-rows { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.nar-row { display: grid; grid-template-columns: 30px 48px 1fr; align-items: center; gap: 8px; }
.nar-row b { font-size: 14px; }
.nar-track { position: relative; height: 12px; border-radius: 999px; background: var(--raised); }
.nar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mint); transition: width .35s cubic-bezier(.2, .8, .2, 1), background .35s; }
.nar-max .nar-fill { background: #E8835E; }
.nar-low .nar-max .nar-fill { background: var(--red); }
.nar-self { position: absolute; top: -6px; left: 0; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(252, 192, 80, .8); opacity: 0; transition: opacity .3s, left .6s cubic-bezier(.2, .8, .2, 1); }
.nar-self.on { opacity: 1; }
.nar-self span { position: absolute; right: 8px; top: -18px; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--gold); }

/* above average at what */
.nar-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 8px; }
.nar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nar-ctrack { position: relative; width: 38px; height: 170px; border-radius: 10px; background: var(--raised); overflow: hidden; }
.nar-ctrack i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--violet-bright); transition: height .8s cubic-bezier(.2, .8, .2, 1); }
.nar-a .nar-ctrack i { background: var(--gold); }
.nar-ctrack hr { position: absolute; left: -2px; right: -2px; bottom: 50%; margin: 0; border: 0; border-top: 2px dashed var(--text); opacity: .7; }
.nar-col span { font-size: 13px; font-weight: 700; color: var(--dim); }

/* the pairs */
.nar-pair { display: flex; flex-direction: column; gap: 8px; }
.nar-line { min-height: 64px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); font: 600 18px/1.3 var(--serif); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, opacity .2s; }
.nar-line:active { background: var(--raised); }
.nar-pair.done .nar-line { cursor: default; opacity: .5; }
.nar-pair.done .nar-line.nar-picked { opacity: 1; border-color: var(--violet-bright); background: rgba(123, 92, 253, .14); }
.nar-or { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nar-counted { display: flex; flex-direction: column; gap: 8px; }
.nar-cl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(252, 192, 80, .1); border: 1.5px solid rgba(252, 192, 80, .55); }
.nar-cl p { margin: 0; flex: 1; font: 600 16px/1.3 var(--serif); color: var(--gold); }
.nar-cl em { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--violet-bright); color: #fff; }

/* the spread */
.nar-curve { display: block; width: 100%; height: auto; max-height: 34vh; }
.nar-area { fill: rgba(123, 92, 253, .28); stroke: var(--violet-bright); stroke-width: 2; }
.nar-tail { fill: rgba(229, 72, 77, .15); stroke: none; transition: fill .3s; }
.nar-curve.nar-far .nar-tail { fill: rgba(229, 72, 77, .6); }
.nar-axis { stroke: var(--line-strong); stroke-width: 2; }
.nar-ax { font: 700 14px var(--sans); fill: var(--dim); }
.nar-mark line { stroke: var(--gold); stroke-width: 3; }
.nar-mark circle { fill: var(--gold); }
.nar-read { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-height: 48px; }
.nar-read b { font: 800 20px var(--serif); color: var(--gold); }
.nar-read span { font-size: 15px; color: var(--text); }
.nar-read.nar-far b { color: #F07A7E; }
.nar-read small { margin-top: 6px; font-size: 13px; color: var(--dim); }

/* asking directly */

/* self-esteem vs narcissism */
.nar-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nar-says { padding: 18px 12px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-align: center; min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.nar-says small { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.nar-says p { margin: 0; font: 700 20px/1.25 var(--serif); }
.nar-se { border-color: var(--mint); } .nar-se small { color: var(--mint); }
.nar-nc { border-color: #E8835E; } .nar-nc small { color: #E8835E; }

@media (max-height: 700px) {
  .nar-card { padding: 8px 9px; gap: 4px; }
  .nar-card p { font-size: 13px; }
  .nar-ctrack { height: 130px; }
  .nar-line { min-height: 54px; padding: 11px 14px; font-size: 17px; }
  .nar-log { min-height: 52px; }
  .nar-rows { gap: 8px; }
  .nar-says { min-height: 120px; }
}