/* Minimal page styles on top of 98.css (MIT, https://github.com/jdan/98.css). */

body {
  font-family: "Pixelated MS Sans Serif", monospace;
  background: #008080; /* Win98 desktop teal */
  margin: 0;
  padding: 24px 12px;
}

.app-window {
  max-width: 780px;
  margin: 0 auto;
}

.sub {
  margin: 0 0 12px;
}

section {
  margin: 0 0 12px;
}

.row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step {
  font-weight: bold;
}

#pickFolder {
  font-weight: bold;
}

#render {
  font-weight: bold;
  font-variant: small-caps;
}

/* The selected save is bold; the placeholder ("no saves…") stays normal. */
#saveSelect.has-selection {
  font-weight: bold;
}

#saveSelect option:checked {
  font-weight: bold;
}

h2 {
  font-size: 12px;
  margin: 16px 0 6px;
}

.file {
  font-size: 11px;
  color: #444;
}

.status {
  font-size: 11px;
  margin-top: 6px;
}

.info {
  font-size: 11px;
  margin: 8px 0;
}

.hint {
  font-size: 11px;
  color: #444;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0 0;
}

#posterBox {
  margin-top: 8px;
}

#preview {
  display: block;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  image-rendering: pixelated;
}

.where p,
.printing p {
  margin: 0 0 6px;
}

.where ul {
  margin: 0;
  padding-left: 18px;
}

.where li {
  font-size: 11px;
}

footer {
  margin-top: 16px;
  border-top: 1px solid #808080;
  padding-top: 8px;
  font-size: 11px;
  color: #444;
}

footer p {
  margin: 0 0 4px;
}

/* The window controls are decorative. 98.css greys out only Maximize when
   disabled, so Minimize/Close get the same grey icons here. */
.title-bar-controls button[aria-label="Minimize"]:disabled {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
}

.title-bar-controls button[aria-label="Close"]:disabled {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='gray'/%3E%3C/svg%3E");
}

code {
  background: #fff;
  padding: 0 2px;
}

/* Print: only the poster, contain-fitted to the sheet (its width is set by the page in mm). */
@media print {
  body {
    background: #fff;
    margin: 0;
    padding: 0;
  }
  .window {
    background: #fff;
    box-shadow: none;
    padding: 0;
  }
  .window-body {
    margin: 0;
  }
  .title-bar,
  .sub,
  section,
  #render,
  #pickFolder,
  .status,
  .info,
  .actions,
  .hint,
  footer {
    display: none !important;
  }
  #result {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  #posterBox {
    border: none;
    box-shadow: none;
    margin: 0;
    overflow: visible;
    flex: none;
  }
  #preview {
    max-height: none;
    max-width: none;
  }
}