/* 1999.LOC - the converter's face.
 *
 * WORD 97. A converter is not an editor, but what it produces is a document,
 * and Word is the program that word "document" meant on these machines. The
 * blue title bar it had, its grey chrome, and a preview drawn as a page: white
 * paper with a drop shadow on a grey desk, which is what Print Layout looked
 * like and what nothing else on this site looks like.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="convert"] .app-window > .wd-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  /* Stated rather than inherited: this sits 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="convert"] .app-window > .wd-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  /* A thumb needs a target. */
  min-height: 26px;
}
[data-app="convert"] .client-title { background: linear-gradient(90deg,#0a246a 0%,#1a3f7a 55%,#4a7ac0 100%); color: #ffffff; }

/* ---- the body ------------------------------------------------------ */
[data-app="convert"] .app-body {
  background: #d4d0c8;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
/* 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="convert"] .desk-shell .app-window > .app-body { padding: 8px 14px; }

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

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

/* ---- controls ------------------------------------------------------ */
[data-app="convert"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  cursor: pointer;
}
[data-app="convert"] button:not(.notice-x):active { border-style: inset; }
[data-app="convert"] select,
[data-app="convert"] input[type="text"],
[data-app="convert"] input[type="number"],
[data-app="convert"] textarea {
  border: 2px inset #d4d0c8;
  background: #ffffff;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="convert"] .dropzone {
  background: #ffffff;
  border: 2px inset #d4d0c8;
  color: #000000;
}
[data-app="convert"] fieldset {
  border: 2px groove #ffffff;
  background: #d4d0c8;
  color: #000000;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  max-width: 620px;
}
/* A fieldset is a light tray, even in a program whose chrome is dark, so
   everything inside it goes back to black. Said with .app-body in the
   selector on purpose: the body rule above sets a light ink for the dark
   chrome and is an attribute plus a class plus an element, so a plainer
   `fieldset label` loses to it and the tray comes out grey on grey. */
[data-app="convert"] .app-body fieldset p,
[data-app="convert"] .app-body fieldset label,
[data-app="convert"] .app-body fieldset legend,
[data-app="convert"] .app-body fieldset span,
[data-app="convert"] .app-body fieldset li,
[data-app="convert"] .app-body fieldset .note { color: #000000; }

/* The boxes the tool draws into. */
[data-app="convert"] .notice-box,
[data-app="convert"] .app-body details {
  background: #ffffe1;
  border: 1px solid #808080;
  max-width: 820px;
}
[data-app="convert"] .notice-box *,
[data-app="convert"] .app-body details * { color: #000000; }

/* ---- THE PAGE ------------------------------------------------------
   Print Layout: white paper with a shadow, sitting on the grey desk that
   Word put behind a document. The preview is the only thing on screen
   that is not chrome, so it gets to be the thing you look at. */
/* Only #preview is the grey desk. The heading and its caption used to sit
   inside the same #808080 well, where their inks fell to 2.6:1 and 2.2:1;
   they stay on the beige chrome now, where both clear AA. */
[data-app="convert"] #preview {
  background: #808080;
  border: 2px inset #d4d0c8;
  padding: 14px;
  overflow: auto;
  max-height: 62vh;
}
[data-app="convert"] #preview img,
[data-app="convert"] #preview canvas,
[data-app="convert"] #preview-box img,
[data-app="convert"] #preview-box canvas {
  display: block;
  margin: 0 auto 12px auto;
  max-width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}
/* A ruler along the top of the page area, which is the other thing Word
   always had and nothing else here does. */
[data-app="convert"] #preview::before {
  content: "";
  display: block;
  height: 14px;
  margin: -14px -14px 10px -14px;
  background:
    repeating-linear-gradient(90deg, #808080 0 1px, rgba(0,0,0,0) 1px 24px),
    linear-gradient(#ece9d8, #d4d0c8);
  border-bottom: 1px solid #808080;
}

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