/* 1999.LOC - the file inspector's face.
 *
 * NORTON UTILITIES, which on DOS and early Windows was the program you ran to
 * see what was actually on a disk rather than what the shell was willing to
 * show you. Norton blue, cyan headings, everything the tool reports set in a
 * fixed pitch, because a hex dump in a proportional font is not a hex dump.
 * This page does the same job for one file: here is what it is carrying that
 * you cannot see.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="inspect"] .app-window > .nu-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="inspect"] .app-window > .nu-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="inspect"] .client-title { background: linear-gradient(90deg,#000060 0%,#0000a8 100%); color: #ffffff; }

/* ---- the body ------------------------------------------------------ */
[data-app="inspect"] .app-body {
  background: #0000a8;
  color: #c8c8c8;
  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="inspect"] .desk-shell .app-window > .app-body { padding: 8px 14px; }

[data-app="inspect"] .app-body h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #00a8a8;
  margin: 12px 0 6px 0;
}
[data-app="inspect"] .app-body p,
[data-app="inspect"] .app-body label,
[data-app="inspect"] .app-body li,
[data-app="inspect"] .app-body legend {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #c8c8c8;
}
/* #a0a0a0 on the #0000a8 body is 5.1:1; the #8f8f8f it replaced was 4.15:1,
   under AA, on the paragraphs that carry the actual leak advice. */
[data-app="inspect"] .app-body .note { color: #a0a0a0; }
[data-app="inspect"] .app-body > p,
[data-app="inspect"] .app-body > div > p { max-width: 620px; }

/* What to do on this screen. */
[data-app="inspect"] .app-body .nu-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="inspect"] .app-body .nu-hint,
[data-app="inspect"] .app-body .nu-hint * { color: #000000; }
[data-app="inspect"] .app-body .nu-hint > .nu-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00a8a8;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- controls ------------------------------------------------------ */
[data-app="inspect"] 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="inspect"] button:not(.notice-x):active { border-style: inset; }
[data-app="inspect"] select,
[data-app="inspect"] input[type="text"],
[data-app="inspect"] input[type="number"],
[data-app="inspect"] textarea {
  border: 2px inset #d4d0c8;
  background: #ffffff;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="inspect"] .dropzone {
  background: #ffffff;
  border: 2px inset #d4d0c8;
  color: #000000;
}
[data-app="inspect"] 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="inspect"] .app-body fieldset p,
[data-app="inspect"] .app-body fieldset label,
[data-app="inspect"] .app-body fieldset legend,
[data-app="inspect"] .app-body fieldset span,
[data-app="inspect"] .app-body fieldset li,
[data-app="inspect"] .app-body fieldset .note { color: #000000; }

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

/* ---- THE REPORT ----------------------------------------------------
   Norton set everything it found in a fixed pitch on blue, with cyan
   headings and white values. A finding is a line of a report here too,
   not a paragraph. */
[data-app="inspect"] #report,
[data-app="inspect"] #summary,
[data-app="inspect"] #leaks {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="inspect"] #report table,
[data-app="inspect"] #leaks table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #00a8a8;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="inspect"] #report th,
[data-app="inspect"] #leaks th {
  background: #000080;
  color: #00e8e8;
  border: 1px solid #0000d0;
  text-align: left;
  font-weight: normal;
}
[data-app="inspect"] #report td,
[data-app="inspect"] #leaks td {
  background: #0000a8;
  color: #ffffff;
  border: 1px solid #0000d0;
}
/* A row that found something is the point of the program, so it is the
   one thing drawn in the warning colour Norton used. */
[data-app="inspect"] .is-leak td,
[data-app="inspect"] tr.warn td { color: #ffff55; }
[data-app="inspect"] .status { color: #55ff55; }
[data-app="inspect"] .error { color: #ff8080; }
[data-app="inspect"] code { color: #00e8e8; }

/* ---- THE CLEAN COPY ------------------------------------------------
   The other half of the tool: having said what the file carries, offer one
   that no longer carries it. A framed panel with the download drawn as the
   action it is, in the cyan the report already uses to draw attention. */
[data-app="inspect"] #clean-copy {
  border: 1px solid #00a8a8;
  padding: 2px 10px 10px 10px;
  margin-top: 12px;
  max-width: 820px;
}
[data-app="inspect"] #clean-copy h3 { color: #00e8e8; }
[data-app="inspect"] .dl-link {
  display: inline-block;
  background: #00a8a8;
  color: #001414;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 16px;
  border: 2px outset #4de0e0;
  text-decoration: none;
}
[data-app="inspect"] .dl-link:hover { background: #1fc4c4; }
[data-app="inspect"] .dl-link:active { border-style: inset; }
/* The link is set at attribute-plus-class, which beats a bare .hidden, so it
   would stay on screen when the page hides it (no metadata to remove). This
   lets .hidden win again, the trap this project has hit before. */
[data-app="inspect"] .dl-link.hidden { display: none; }
[data-app="inspect"] .nu-caveat { font-style: italic; }

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