/* Confirmation bias lesson. All rules scoped under .cb-* */

.cb-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the game */
.cb-rule { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 18px; background: var(--surface); border: 2px solid var(--mint); }
.cb-trip { font: 800 23px var(--mono); color: var(--text); letter-spacing: .02em; }
.cb-yes { font-size: 13px; font-weight: 800; color: var(--mint); text-transform: uppercase; letter-spacing: .06em; }
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; width: calc(100% - 16px); max-width: 340px; }
.cb-tile { position: relative; min-height: 50px; border-radius: 14px; background: var(--raised); border: 2px solid var(--line-strong); box-shadow: 0 4px 0 var(--line-strong); color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 10px; }
.cb-tile b { font: 800 19px var(--mono); }
.cb-tile i { font-style: normal; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.cb-tile i:empty { display: none; }
.cb-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-strong); }
.cb-tile.cb-y { border-color: var(--mint); box-shadow: 0 4px 0 color-mix(in srgb, var(--mint) 50%, #070a14); background: rgba(63, 214, 154, .12); }
.cb-tile.cb-y i { color: var(--mint); }
.cb-tile.cb-n { border-color: var(--red); box-shadow: 0 4px 0 color-mix(in srgb, var(--red) 50%, #070a14); background: rgba(216, 85, 85, .12); }
.cb-tile.cb-n i { color: #F07A7E; }
.cb-shut .cb-tile:not(.done) { opacity: .35; pointer-events: none; }
.cb-tile.done { pointer-events: none; }

/* your tests */
.cb-cap { font-size: 13px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cb-mine { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
.cb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cb-row b { font: 800 17px var(--mono); }
.cb-row span { font-size: 13px; color: var(--dim); }
.cb-row i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--mint); text-transform: uppercase; }
.cb-risk { border-color: var(--gold); }
.cb-risk span { color: var(--gold); }

.cb-guess { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 2px dashed var(--line-strong); text-align: center; }
.cb-guess small { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.cb-guess b { font: 700 24px var(--serif); line-height: 1.2; }

/* the name */
.cb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.cb-pan { display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; min-height: 130px; justify-content: center; border-radius: 18px; background: var(--surface); border: 2px solid var(--mint); text-align: center; }
.cb-pan b { font-size: 16px; line-height: 1.25; }
.cb-pan span { font-size: 14px; color: var(--dim); }
.cb-pan-n { border: 2px dashed var(--line-strong); opacity: .75; }

/* the two studies */
.cb-studies { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.cb-study { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.cb-study small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cb-study b { font-size: 15px; line-height: 1.25; min-height: 57px; }
.cb-marks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cb-mk { display: block; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.cb-mk i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.cb-mk-for i { background: var(--violet-bright); }
.cb-mk-ag i { background: var(--gold); }
.cb-rated .cb-pro .cb-mk-for i, .cb-rated .cb-con .cb-mk-ag i { width: 85%; }
.cb-rated .cb-pro .cb-mk-ag i, .cb-rated .cb-con .cb-mk-for i { width: 30%; }
.cb-who { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--dim); align-self: flex-start; }
.cb-who span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; }
.cb-for::before { background: var(--violet-bright); }
.cb-ag::before { background: var(--gold); }

/* the search box */
.cb-search { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.cb-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: var(--raised); border: 2px solid var(--line-strong); }
.cb-glass { width: 16px; height: 16px; border: 3px solid var(--dim); border-radius: 50%; flex: none; }
.cb-q { font-size: 16px; font-weight: 600; }
.cb-hits { display: flex; flex-direction: column; gap: 8px; }
.cb-hits i { display: block; font-style: normal; font-size: 15px; font-weight: 700; padding: 9px 12px; border-radius: 12px; background: var(--surface); border-left: 5px solid var(--mint); }

/* pictures */
.cb-pic { width: 100%; display: flex; justify-content: center; }
.cb-pic img { height: 120px; max-width: 100%; object-fit: contain; display: block; }
@media (max-height: 700px) { .cb-pic img { height: 84px; } }
@media (max-height: 700px) { .cb-sc .clip.v { height: 40vh; } }

/* the four cards */
.cb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.cb-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cb-card b { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 2 / 3; max-height: 120px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line-strong); font: 800 34px var(--mono); transition: border-color .4s, opacity .4s; }
.cb-card span { font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--dim); opacity: 0; transition: opacity .4s .3s; }
.cb-flip .cb-card span { opacity: 1; }
.cb-flip .cb-key b { border-color: var(--gold); }
.cb-flip .cb-key span { color: var(--gold); }
.cb-flip .cb-card:not(.cb-key) b { opacity: .45; }