/* 1999.LOC — the image tool's face.
 *
 * MS PAINT, which shipped on every one of these machines and is the program
 * anybody who was there will recognise instantly. Grey chrome, a title bar in
 * the Windows blue, and the two things that made it Paint: a tool palette of
 * sunken square buttons down the left, and a colour box of small swatches
 * along the bottom, both drawn with the same raised-then-sunken bevel
 * everything had.
 *
 * The canvas is the point of it: a white rectangle in a sunken well with a
 * grey mat around it, so the picture reads as a thing sitting on a surface
 * rather than a background-image. Paint drew a checkerboard behind
 * transparency and so does this, because a transparent PNG on white is a lie
 * about what you are about to save.
 *
 * Scoped entirely under [data-app="image"] like every other app face here.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="image"] .app-window > .mp-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  /* Stated rather than inherited: outside the panels, so it would otherwise
     come out in the page's serif. */
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #000000;
}
[data-app="image"] .app-window > .mp-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  min-height: 26px;
}

/* ---- the body ------------------------------------------------------ */
[data-app="image"] .app-body {
  /* The mat the canvas sits on. Darker than Paint's own grey on purpose:
     the notes printed over it are a light grey, and at #808080 that pair
     came to 2.99:1, which is a caption you squint at. */
  background: #6e6e6e;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #000000;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="image"] .desk-shell .app-window > .app-body { padding: 8px 14px; }

[data-app="image"] .app-body h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #ffffff;
  margin: 12px 0 6px 0;
}
[data-app="image"] .app-body p,
[data-app="image"] .app-body label,
[data-app="image"] .app-body li,
[data-app="image"] .app-body legend {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #ffffff;
}
[data-app="image"] .app-body .note { color: #f4f4f4; }
[data-app="image"] .app-body > p,
[data-app="image"] .app-body > div > p { max-width: 620px; }

/* What to do on this screen. */
[data-app="image"] .app-body .mp-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px 0;
  padding: 6px 9px;
  background: #ffffe1;
  border: 1px solid #404040;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 820px;
}
[data-app="image"] .app-body .mp-hint,
[data-app="image"] .app-body .mp-hint * { color: #000000; }
[data-app="image"] .app-body .mp-hint > .mp-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000080;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- the tool palette ---------------------------------------------
   Paint's controls were square sunken buttons in a raised tray. The
   fieldsets this page already uses are the trays; giving them the bevel
   is most of the resemblance. */
[data-app="image"] fieldset {
  background: #d4d0c8;
  border: 2px outset #d4d0c8;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  max-width: 620px;
}
[data-app="image"] fieldset legend {
  color: #000000;
  font-weight: bold;
  padding: 0 4px;
  /* Its own ground, so the 2px raised border does not run through the top of
     the letters. */
  background: #d4d0c8;
}
/* .app-body in the selector because the body rule sets white ink for the
   grey mat, and a plainer `fieldset label` loses to it: the tray would come
   out white on light grey. */
[data-app="image"] .app-body fieldset p,
[data-app="image"] .app-body fieldset label,
[data-app="image"] .app-body fieldset legend,
[data-app="image"] .app-body fieldset span,
[data-app="image"] .app-body fieldset .note { color: #000000; }

[data-app="image"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  color: #000000;
  cursor: pointer;
}
[data-app="image"] button:not(.notice-x):active { border-style: inset; }
[data-app="image"] select,
[data-app="image"] input[type="text"],
[data-app="image"] input[type="number"] {
  border: 2px inset #d4d0c8;
  background: #ffffff;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}

/* The drop target, as the empty canvas well. */
[data-app="image"] .dropzone {
  background: #ffffff;
  border: 2px inset #d4d0c8;
  color: #000000;
}
[data-app="image"] .dropzone span { color: #404040; }

/* ---- THE CANVAS ----------------------------------------------------
   A white page in a sunken well, with the checkerboard behind it that
   Paint used for transparency, drawn as two gradients rather than an
   image because it is four lines and no request. */
[data-app="image"] #preview {
  display: inline-block;
  padding: 6px;
  background:
    repeating-conic-gradient(#ffffff 0% 25%, #cccccc 0% 50%) 0 0 / 16px 16px;
  border: 2px inset #d4d0c8;
  max-width: 100%;
}
[data-app="image"] #preview img {
  display: block;
  max-width: 100%;
  height: auto;
  /* A hairline so a white picture on the checkerboard still has an edge. */
  outline: 1px solid #404040;
}

[data-app="image"] .status { color: #b8ffb8; }
[data-app="image"] .error { color: #ffb0b0; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="image"] .desk-shell .app-window > .app-body { padding: 6px 10px; }
  [data-app="image"] .app-window > .mp-menu span { padding: 2px 5px; }
}