/* ==========================================================================
   APPS — what the windows of the portfolio contain: project windows, the
   Services / Process / Links documents and the Scrapbook. The window chrome
   itself (title bar, scroll bars, icons) lives in windows.css.
   ========================================================================== */

/* ---------- project windows: the token, the role, the story ---------- */
.pj { container: pj / inline-size; }
.pj-in { padding: 16px 18px 22px; font: 400 14px/1.55 var(--font-body); color: #000; }
.pj-top { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; }
/* 256 px = 8 x 32 = 4 x 64 = 2 x 128: every step of the glow-up lands on whole screen pixels */
.pj-coin { position: relative; flex: none; width: 256px; height: 256px; }
.pj-coin img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pj-coin img[hidden] { display: none; }
.pj-px { image-rendering: pixelated; }
.pj-head { min-width: 0; }
.pj-name { margin: 0 0 10px; font: 400 34px/1 var(--font-ui); overflow-wrap: anywhere; }
.pj-role { margin: 0 0 3px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.pj-meta { margin: 0; font-weight: 500; color: #333; }
.pj-text p { margin: 0 0 12px; }

/* the glow-up: the real picture waits behind the pixels, then takes their place */
.pj-coin.is-glow .pj-full { opacity: 0; }
.pj-coin.is-glow.is-lit .pj-full { opacity: 1; transition: opacity 0.16s steps(4); }
.pj-coin.is-glow.is-lit .pj-px { opacity: 0; transition: opacity 0.16s steps(4); }

@container pj (max-width: 520px) {
    .pj-top { flex-direction: column; gap: 12px; text-align: center; }
    .pj-name { font-size: 30px; }
}

/* ---------- documents made of cards (Services, Process) and the Links list ---------- */
.dc { container: dc / inline-size; }
.dc-in { padding: 14px 18px 22px; font: 400 14px/1.55 var(--font-body); color: #000; }
.dc h2 { margin: 0 0 8px; font: 400 26px/1.1 var(--font-ui); }
.dc-intro { margin: 0 0 8px; }
.dc-list { list-style: none; margin: 0; padding: 0; counter-reset: dc; }
.dc-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #000; counter-increment: dc; }
.dc-pic { flex: none; width: 104px; height: 104px; object-fit: cover; background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
.dc-text h3 { margin: 0 0 4px; font: 400 20px/1.15 var(--font-ui); }
.dc-text p { margin: 0; }
/* the steps of the process are numbered with small black tags */
ol.dc-list .dc-text h3::before {
    content: counter(dc);
    display: inline-block;
    min-width: 20px;
    margin-right: 8px;
    padding: 0 4px;
    text-align: center;
    color: #fff;
    background: #000;
}
@container dc (max-width: 420px) {
    .dc-item { flex-direction: column; gap: 10px; }
    .dc-pic { width: 112px; height: 112px; }
}

.dl-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid #000; }
.dl-list li { border-bottom: 1px solid #000; }
.dl-row { display: block; padding: 9px 6px 10px; color: #000; text-decoration: none; }
.dl-row:focus-visible { color: #fff; background: #000; outline: none; }
@media (hover: hover) { .dl-row:hover { color: #fff; background: #000; } }
.dl-label { display: block; font-weight: 700; }
.dl-url { display: block; font-size: 13px; font-weight: 400; color: #333; overflow-wrap: anywhere; }
.dl-row:focus-visible .dl-url { color: #fff; }
@media (hover: hover) { .dl-row:hover .dl-url { color: #fff; } }

/* ---------- the Scrapbook: eight pages, one reason on each ---------- */
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; container: sc / inline-size; }
.sc-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #000; }
.sc-title { flex: 1; min-width: 0; margin-left: 6px; font: 500 13px/1.2 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-count { flex: none; padding: 0 4px; font: 500 13px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.sc-view { position: relative; flex: 1; min-height: 0; }
.sc-scroll { position: absolute; inset: 0 16px 0 0; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; outline: none; }
.sc-scroll::-webkit-scrollbar { display: none; }
.sc-scroll:focus-visible { box-shadow: inset 0 0 0 2px #000; }
.sc-in { padding: 14px 18px 22px; font: 400 14px/1.55 var(--font-body); color: #000; }
.sc-intro { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: #333; }
.sc-page { display: flex; gap: 22px; align-items: flex-start; }
.sc-clip { flex: none; padding: 6px; background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #000; }
.sc-pic { display: block; width: 208px; height: 208px; object-fit: cover; }
.sc-text h2 { margin: 0 0 8px; font: 400 26px/1.1 var(--font-ui); }
.sc-text p { margin: 0; }
.sc-page.is-flip { animation: sc-flip 0.2s steps(3); }
@keyframes sc-flip { from { opacity: 0.15; } to { opacity: 1; } }
@container sc (max-width: 520px) {
    .sc-page { flex-direction: column; align-items: center; gap: 16px; }
    .sc-text { width: 100%; }
    .sc-clip { width: min(236px, 100%); }
    .sc-pic { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ---------- the Commands file: what the Terminal understands ---------- */
.cmd-h { margin: 18px 0 6px; font: 400 18px/1.2 var(--font-ui); }
.cmds { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; margin: 0; border-top: 1px solid #000; }
.cmds dt, .cmds dd { padding: 7px 0; border-bottom: 1px solid #d0d0d0; margin: 0; }
.cmds dt { padding-right: 12px; font: 600 13px/1.45 var(--font-term); overflow-wrap: anywhere; }
.cmds dd { font-size: 14px; line-height: 1.45; }
.cmd-alias { font-weight: 400; color: #444; }
.cmd-keys { margin: 18px 0 0; }
.cmd-secret { margin: 10px 0 0; font-weight: 700; }
@container dc (max-width: 420px) {
    .cmds { display: block; }
    .cmds dt { padding: 9px 0 0; border: 0; }
    .cmds dd { padding: 2px 0 8px; }
}

/* ---------- the Puzzle ---------- */
.pz { padding: 14px 15px 12px; background: #fff; }
.pz-board { position: relative; width: 288px; height: 288px; margin: 0 auto; background: #000; border: 1px solid #000; outline: none; touch-action: none; }
.pz-board:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.pz-tile {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    background-image: var(--pz-img);
    background-size: 288px 288px;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000;
    transition: transform 0.09s steps(3);
}
.pz.is-still .pz-tile { transition: none; }
.pz-tile.is-gap { visibility: hidden; }
.pz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pz-status { font: 500 13px/1.3 var(--font-body); }
@container screen (max-width: 560px) {
    /* the window fills the phone: the board sits in the middle of it instead of hugging the top */
    .win--puzzle .win-scroll { display: flex; flex-direction: column; justify-content: center; }
    .pz { padding-bottom: 40px; }
}

/* ---------- the Credits ---------- */
.cr-stage { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.cr { padding: 0 28px; text-align: center; font: 400 14px/1.5 var(--font-body); color: #000; }
.cr p { margin: 0 0 14px; }
.cr-head { margin: 0 0 18px; font: 400 26px/1.1 var(--font-ui); }
.cr-key { display: block; font: 400 15px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.cr-roll { position: absolute; left: 0; right: 0; top: 0; padding-top: 24px; animation: cr-roll 26s linear infinite; outline: none; }
.cr-roll:focus { animation-play-state: paused; }
@media (hover: hover) { .cr-roll:hover { animation-play-state: paused; } }
@keyframes cr-roll { from { transform: translateY(var(--cr-h, 300px)); } to { transform: translateY(-100%); } }
.cr--still { padding-top: 18px; }