/* per-my-last.com: page layout only.
   Every colour, bevel, font and size comes from win98.css, which is a verbatim
   copy of prototype/assets/win98.css (see ../README.md). Components that the
   prototype defines on a page rather than in the stylesheet (the output page,
   the buzzword chip, the memo, the level chip) are copied here value for value.
   No JavaScript on this page, so nothing here depends on any. */

body {
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
}
/* The icon sprite defines symbols only: it draws nothing itself. */
.sprite { position: absolute; }
.sheet {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.window-body > * + * { margin-top: calc(var(--px) * 10); }
h1, h2, h3 { font: inherit; margin: 0; }
p { margin: 0; }
.stack { display: grid; gap: calc(var(--px) * 8); }
.row { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 8); align-items: center; }

/* Pixel icons. The prototype's script sizes each <i> from its grid; here the
   grid is a symbol in the sprite and the size is a variable, so --s is the
   whole-pixel scale and --w / --h are the grid, 16 by 16 unless the icon says
   otherwise. Never a fractional scale. */
.ico {
  width: calc(var(--px) * var(--w, 16) * var(--s, 1));
  height: calc(var(--px) * var(--h, 16) * var(--s, 1));
}
.ico.is-2x { --s: 2; }
.ico.is-4x { --s: 4; }
.ico.is-min { --w: 8; --h: 8; }
.ico.is-max { --w: 9; --h: 8; }
.ico.is-close { --w: 8; --h: 7; }

/* Links that are buttons. The chrome is the button; the link decoration is not. */
a.btn { text-decoration: none; color: var(--c-text); }
a.btn:visited { color: var(--c-text); }
.cta-row { display: grid; gap: calc(var(--px) * 6); justify-items: start; }
.cta-row .btn { width: 100%; }

/* Title-bar buttons that are decoration, not controls: drawn, never pressed. */
.tb-deco { pointer-events: none; }

/* The lockup on the desktop it actually sits on (brand board, section 4). */
.stage {
  background: var(--c-desktop);
  box-shadow: var(--bevel-sunken);
  padding: 40px 16px;
  display: grid;
  justify-items: center;
  gap: calc(var(--px) * 8);
  color: var(--c-hilight);
  text-align: center;
}
.stage .oneliner { margin-top: 12px; color: var(--c-hilight); }

/* Translator: the plain sentence, the level, the output page. */
.said {
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  padding: calc(var(--px) * 5) calc(var(--px) * 6);
}
.level-title { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--px) * 6); }
.level-chip { background: var(--c-select); color: var(--c-select-text); padding: calc(var(--px) * 2) calc(var(--px) * 5); }
.notepad .titlebar { min-height: calc(var(--px) * 26); }
.np-page {
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  padding: calc(var(--px) * 6) calc(var(--px) * 7);
  margin-top: calc(var(--px) * 2);
}
.np-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.np-text mark { background: var(--c-select); color: var(--c-select-text); }
.terms { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 4); }
.term {
  background: var(--c-window);
  border: var(--px) solid var(--c-dkshadow);
  padding: calc(var(--px) * 2) calc(var(--px) * 5);
}

/* The Corporate Fluency card, as the app renders it before it is shared. */
.memo {
  position: relative;
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  padding: 16px 16px 92px;
}
.memo .stamp { position: absolute; right: 18px; bottom: 18px; }
.memo .cap { color: var(--c-gray-text); }
.score { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.score .num { font-size: calc(var(--fs-chrome-xl) * 2); line-height: 1; }
.memo .label { font-family: var(--font-content); font-size: 18px; font-weight: 700; margin-top: 10px; -webkit-font-smoothing: auto; }
.memo .meta { color: var(--c-gray-text); margin-top: 4px; max-width: 58%; }
.share-card .statusbar > * { flex: 1; }

/* The feature list reuses the File Open list view, so it never scrolls here. */
.features { max-height: none; min-height: 0; }
.features .fname { white-space: normal; }
.features .fmeta { -webkit-line-clamp: 4; }

/* The 404: one message box, at dialog width, centred on the desktop. */
.notfound {
  width: min(100%, 380px);
  margin: 6dvh auto 0;
}
.notfound .dialog-body { overflow: visible; }

/* Footer: the inline lockup on the desktop, outside the windows. */
.footer {
  display: grid;
  justify-items: center;
  gap: calc(var(--px) * 6);
  color: var(--c-hilight);
  text-align: center;
  padding: 8px 0 0;
}
.footer .lockup { display: flex; align-items: center; gap: calc(var(--px) * 8); }
.footer a { color: var(--c-hilight); }
.footer .fine { color: var(--c-light); max-width: 46ch; }

/* Phones: the windows keep their padding, the stage loses its luxury. */
@media (max-width: 420px) {
  body { padding: 8px 8px calc(20px + env(safe-area-inset-bottom)); }
  .sheet { gap: 12px; }
  .stage { padding: 28px 12px; }
  /* The stamp keeps its own band under the text, so it never covers a line. */
  .memo { padding: 12px 12px 104px; }
  .memo .meta { max-width: 100%; }
  .score .num { font-size: calc(var(--fs-chrome-xl) * 1.6); }
}