/* The Random Number Lock's demo: a .demo (demo.css) printed in the Projects terminal (.term in style.css).
   What's here is the keypad and its readout, and the panels in its documentation, scoped to .rl. */

/* the readout: twenty slots for the digits, and under each digit the interval that led to it, as a bar */
.rl .rl-slots,.rl .rl-bars{display:grid;grid-template-columns:repeat(20,1fr);max-width:44ch;column-gap:0}
.rl .rl-slots>*{text-align:center;font-style:normal;font-weight:400}
.rl .rl-slots i{color:var(--muted)}
.rl .rl-bars{align-items:end;padding-bottom:3px}
.rl .rl-bars i{display:block;width:5px;min-height:2px;background:var(--ink);justify-self:start;margin-left:-2px}
.rl .rl-bars i.off{background:#555}
.rl.is-open #rl-state{background:var(--ink);color:var(--bg);padding:0 .5ch;margin-left:-.5ch}

/* the keypad: three by four, like a phone's. Each key is a frame drawn in text (lock.js), three lines
   tall, with its digit printed large over the middle. A press lights the key for as long as it's held;
   the whole pad lights when the lock opens, and dims when it doesn't */
.rl .rl-krow{display:grid;grid-template-columns:repeat(3,9ch);column-gap:1ch;justify-content:start;align-items:start;height:calc(3 * var(--lh))}
.rl .rl-key{position:relative;display:block;color:var(--ink);transition:background-color .12s,color .12s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.rl .rl-key .fr{display:block;white-space:pre;line-height:var(--lh);color:var(--muted);transition:color .12s}
.rl .rl-key .d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.rl .rl-key:hover .fr{color:var(--ink)}
.rl .rl-key:focus{outline:none}
.rl .rl-key:focus-visible .fr{color:var(--ink)}
.rl .rl-key[aria-pressed=true],.rl.is-open .rl-key{background:var(--ink);color:var(--bg)}
.rl .rl-key[aria-pressed=true] .fr,.rl.is-open .rl-key .fr{color:var(--bg)}
.rl .rl-key .kb{position:absolute;right:1.4ch;bottom:calc(var(--lh) + 2px);font-size:10px;line-height:1;color:var(--muted)}
.rl .rl-key[aria-pressed=true] .kb,.rl.is-open .rl-key .kb{color:var(--bg)}
.rl .rl-key[data-key="0"]{grid-column:2}
.rl.is-denied .rl-key{color:var(--muted)}
.rl.is-denied .rl-key .fr{color:#4a4a4a}
/* during a try a press only brightens the frame, so a watcher can't read the digits off the pad */
.rl.trying .rl-key[aria-pressed=true]{background:none;color:var(--ink)}
.rl.trying .rl-key[aria-pressed=true] .fr{color:var(--ink)}
.rl.trying .rl-key[aria-pressed=true] .kb{color:var(--muted)}
/* a horizontal bar in a kv3 row */
.rl .kv3 .bar{align-self:center;height:8px;position:relative}
.rl .kv3 .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}

/* the panels in the documentation */
.rl .row{display:grid;grid-template-columns:3ch 5ch 9ch 9ch minmax(0,1fr);column-gap:1ch}
.rl .cols{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:4px;align-items:end;height:calc(3 * var(--lh));padding-top:4px}
.rl .cols.b12{grid-template-columns:repeat(12,minmax(0,1fr))}
.rl .cols i{display:block;min-height:1px;background:var(--ink)}
.rl .cols.lab{height:var(--lh);align-items:baseline;padding:0}
.rl .cols b,.rl .mrow b{font-weight:400;color:var(--muted);text-align:center}
.rl .mrow{display:grid;grid-template-columns:3ch repeat(10,minmax(0,1fr));column-gap:3px;align-items:center}
.rl .mrow i{display:block;height:12px;background:var(--ink);border-radius:1px}

/* on a phone the frames are drawn larger, for thumbs */
@media (max-width:860px),(max-width:1180px) and (max-aspect-ratio:4/5){
  .rl .rl-krow{font-size:14px}
}