/* Problematic smartphone use lesson. Everything scoped under .ps-*. */

.ps-cap { font: 600 13px var(--sans); color: var(--dim); text-align: center; margin-top: 8px; }

/* the day */
.ps-dayb { width: min(100%, 360px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ps-big { flex: 1; justify-content: center; }
.ps-day { width: 100%; height: auto; display: block; }
.ps-track { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.ps-t { font: 700 13px var(--sans); fill: var(--dim); dominant-baseline: middle; }
.ps-u rect { transition: opacity .35s; }
.ps-u.l rect { fill: var(--gold); }
.ps-u.q rect { fill: #FFE3A1; }
.ps-u.off rect { opacity: .1; }
.ps-rain .ps-u { animation: ps-drop .35s both; }
@keyframes ps-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.ps-dim .ps-u { opacity: .45; }
.ps-read { display: flex; align-items: baseline; gap: 10px; font: 600 14px var(--sans); color: var(--dim); padding: 7px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.ps-read b { font: 700 20px var(--mono); color: var(--text); min-width: 2ch; text-align: right; }
.ps-read.ps-hit, .ps-read.ps-you { border-color: var(--gold); }
.ps-read.ps-hit b, .ps-read.ps-you b { color: var(--gold); }

/* typing your count, above the day */
.ps-first { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ps-first .ps-dayb { flex: 1; }
.ps-type { width: min(100%, 340px); display: grid; grid-template-columns: 1fr auto; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ps-type.on { opacity: 1; pointer-events: auto; }
.ps-type input { width: 100%; box-sizing: border-box; height: 52px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 700 22px var(--mono); text-align: center; outline: none; min-width: 0; }
.ps-type input:focus { border-color: var(--violet-bright); }
.ps-type input::placeholder { color: var(--faint); font: 600 16px var(--sans); }
.ps-type .ps-lock { width: auto; min-width: 128px; height: 52px; margin: 0; padding: 0 16px; }
.ps-type .ps-lock:disabled { opacity: .45; }

/* two kinds of pickup */
.ps-kinds { width: min(100%, 340px); margin: 14px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px; }
.ps-kind { min-height: 92px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); padding: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.ps-kind i { display: block; height: 22px; border-radius: 3px; margin-bottom: 4px; }
.ps-kind.q i { width: 3px; background: #FFE3A1; box-shadow: 9px 0 0 #FFE3A1, -9px 0 0 #FFE3A1; }
.ps-kind.l i { width: 46px; background: var(--gold); }
.ps-kind b { font: 700 14px var(--sans); }
.ps-kind span { font: 500 12px/1.25 var(--sans); color: var(--dim); }
.ps-locked .ps-kind, .ps-locked .ps-who { pointer-events: none; }
.ps-locked > :not(.ps-chosen) { opacity: .45; }
.ps-chosen { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold); }

/* camera glasses */
.ps-gl { width: min(100%, 340px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ps-gl img { width: min(62%, 220px); display: block; }
.ps-dots { display: none; grid-template-columns: repeat(20, minmax(0, 11px)); gap: 4px; justify-content: center; }
.ps-gl.shown .ps-dots { display: grid; }
.ps-dots i { display: block; height: 11px; border-radius: 50%; background: var(--raised); transition: background .2s; }
.ps-dots i.b { background: var(--violet-bright); }
.ps-dots i.n { background: var(--gold); }
.ps-key { display: none; gap: 14px; flex-wrap: wrap; justify-content: center; font: 600 13px var(--sans); color: var(--dim); }
.ps-gl.shown .ps-key { display: flex; }
.ps-key span { display: inline-flex; align-items: center; gap: 6px; }
.ps-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ps-key i.b { background: var(--violet-bright); } .ps-key i.n { background: var(--gold); }
.ps-key b { font: 700 13px var(--mono); color: var(--text); }
.ps-gl.shown img { width: min(40%, 150px); }

/* Ana and Ben */
.ps-pair { width: min(100%, 340px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px; }
.ps-who { border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); padding: 14px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; text-align: left; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.ps-who b { font: 600 22px var(--serif); }
.ps-who span { font: 600 13px/1.25 var(--sans); color: var(--dim); padding-top: 7px; border-top: 1px solid var(--line); }

@media (max-height: 700px) {
  .ps-gl img { width: min(44%, 160px); }
  .ps-kind { min-height: 80px; }
  .ps-who { padding: 10px 10px; gap: 6px; }
}