/* The home page's screens (site.css holds the PET's pieces). */

/* the PET's main screen: SELECT, the picture, the numbers */
.hero { padding: 36px 0 8px; }
.pet-main { display: grid; grid-template-columns: minmax(230px, 1fr) 510px minmax(170px, 0.7fr); gap: 24px; align-items: center; }
.select .label { display: block; margin: 0 0 12px; font-size: 1.2rem; }
.select .plate { font-size: 1.1rem; }
.status { display: grid; gap: 6px; }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 12px solid transparent; border-image: url(ui/slot.png) 4 fill / 12px; padding: 0 4px; }
.stat b { font: 700 1.6rem/1 var(--caps); color: var(--gold); text-shadow: 3px 3px 0 #10364a; }
.intro { margin-top: 28px; }
@media (max-width: 1100px) {
	.pet-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hero-screen { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}
@media (max-width: 620px) { .pet-main { grid-template-columns: minmax(0, 1fr); } }

/* text boxes that follow a picture or a band */
section .who { margin-top: 24px; }
.steps { margin-bottom: 4px; }
.steps > div { display: grid; justify-items: start; gap: 12px; }
.steps .frame { width: 100%; }
.steps .textbox { width: 100%; font-size: 1rem; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }

/* the folder: rows on the left, the chosen one as a Library card */
.folder { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .folder { grid-template-columns: minmax(0, 1fr); } .list { order: 2; } .chip { position: static; } }
.list-head { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; }
.list .rows { counter-reset: chip; }
.list .row { grid-template-columns: 30px 1fr 27px; counter-increment: chip; }
.list .row::before { content: counter(chip, decimal-leading-zero); font: 700 0.75rem/1 var(--caps); color: #6bdeff; text-shadow: none; }
.list .row::after { content: attr(data-code); display: grid; place-items: center; width: 27px; height: 27px; background: #292929; box-shadow: inset 0 0 0 var(--u) #f7f7f7; font: 700 0.9rem/1 var(--caps); text-shadow: none; }
.chip { justify-self: center; width: min(100%, 544px); position: sticky; top: 84px; }
.chip-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.chip-top b { font: 700 1.5rem/1 var(--caps); letter-spacing: 0.04em; }
.chip .frame { margin: 0 auto; }
.chip-text { margin: 10px 2px 0; min-height: 3em; font-size: 1.1rem; }

/* the areas, two by three, each with its name */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
.areas .frame { position: relative; }
.areas figcaption { position: absolute; left: -9px; bottom: -24px; line-height: 1; }
@media (max-width: 900px) { .areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }

/* jack in */
.jack { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; padding-bottom: 12px; }
.keys { margin-top: 16px; }
.keys dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin: 0 0 8px; }
.keys dt { font: 700 0.9rem/1 var(--caps); color: var(--white); text-shadow: var(--edge); text-transform: uppercase; }
.keys dd { margin: 0; }
.keys p { margin: 0; font-size: 1rem; }

/* the Net Dealer */
.shop .release { margin: 2px 4px 12px; font: 700 0.95rem/1.3 var(--caps); color: var(--white); text-shadow: var(--edge); }
.shop .row { grid-template-columns: 36px 1fr auto auto; cursor: default; }
.shop .row:hover { border-image-source: url(ui/slot.png); }
.shop .what b { display: block; font: 700 1.15rem/1.3 var(--pixel); }
.shop .what small { display: block; font: 400 1rem/1.4 var(--pixel); color: #d6f4ff; }
.shop .what code { color: var(--gold); }
.shop .version { display: block; font: 700 0.75rem/1.4 var(--caps); color: var(--gold); }
.price { font: 700 1.2rem/1 var(--caps); color: var(--gold); }
.exit.small { font-size: 1rem; padding: 0 8px; }
@media (max-width: 640px) {
	.shop .row { grid-template-columns: 36px 1fr; }
	.shop .price { display: none; }
	.shop .exit { grid-column: 2; justify-self: start; }
}

/* the E-Mail list */
.mail .row { grid-template-columns: 36px 1fr auto; }
.mail small { font: 700 0.75rem/1 var(--caps); color: #6bdeff; text-shadow: none; text-transform: uppercase; }
@media (max-width: 560px) { .mail small { display: none; } .mail .row { grid-template-columns: 36px 1fr; } }