/* Littlereach mock calibration walkthrough — utilitarian styles, no design sensibility.
   This is a traceability artifact, not a design deliverable. Ugly-on-purpose. */

* { box-sizing: border-box; }

body {
  font-family: serif;
  max-width: 900px;
  margin: 1em auto;
  padding: 1em;
  line-height: 1.4;
  color: #000;
  background: #fff;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }

h1 { font-size: 1.4em; border-bottom: 1px solid #000; padding-bottom: 0.2em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; margin-top: 1em; }

.mock-meta {
  border: 1px solid #000;
  padding: 0.5em 1em;
  margin: 1em 0 2em;
  background: #ffd;
  font-size: 0.9em;
}
.mock-meta h2 { margin-top: 0; }
.mock-meta p { margin: 0.3em 0; }

.screen {
  border: 1px solid #888;
  padding: 1em;
  margin: 1em 0;
  background: #fafafa;
}
.screen h3 { margin-top: 0; }

.inf {
  background: #fcc;
  padding: 0 0.3em;
  border: 1px dashed #a00;
  font-size: 0.9em;
  font-style: italic;
}

.ns {
  background: #eee;
  padding: 0 0.3em;
  border: 1px dashed #666;
  font-size: 0.9em;
  font-style: italic;
  color: #555;
}

.inv {
  background: #cfc;
  padding: 0 0.3em;
  border: 1px dashed #080;
  font-size: 0.9em;
}

.photo-box {
  border: 1px solid #000;
  padding: 2em 1em;
  margin: 0.3em;
  display: inline-block;
  width: 120px;
  height: 120px;
  text-align: center;
  vertical-align: top;
  background: #ddd;
  font-size: 0.8em;
}

.photo-box.large {
  width: 300px;
  height: 300px;
  padding: 5em 1em;
}

.btn {
  border: 2px solid #000;
  padding: 0.3em 0.8em;
  display: inline-block;
  background: #ccc;
  font-family: serif;
  margin: 0.2em 0.2em 0.2em 0;
  text-decoration: none;
  color: #000;
  cursor: default;
}

.btn.primary { background: #444; color: #fff; }
.btn.warn { background: #fc6; }
.btn.danger { background: #f88; }

.form-row {
  margin: 0.5em 0;
}
.form-row label {
  display: inline-block;
  min-width: 180px;
  vertical-align: top;
}
.form-row input, .form-row select {
  font-family: serif;
  padding: 0.2em;
  min-width: 250px;
  border: 1px solid #000;
}

.step {
  border: 1px solid #888;
  padding: 0.7em;
  margin: 0.5em 0;
  background: #f8f8f8;
}
.step.done { background: #dfd; }
.step.pending { background: #fed; }
.step.current { background: #ffc; border: 2px solid #000; }

.notif {
  border: 1px solid #000;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #fff;
  font-size: 0.9em;
  max-width: 400px;
}
.notif .app { font-weight: bold; font-size: 0.8em; color: #555; }

.warning-box {
  border: 2px solid #a00;
  background: #fee;
  padding: 0.7em;
  margin: 0.5em 0;
}

.preview-banner {
  background: #fd6;
  border: 2px solid #000;
  padding: 0.3em 0.8em;
  margin-bottom: 0.8em;
  font-weight: bold;
  text-align: center;
}

table {
  border-collapse: collapse;
  margin: 0.5em 0;
}
th, td {
  border: 1px solid #000;
  padding: 0.3em 0.6em;
  text-align: left;
  vertical-align: top;
}
th { background: #eee; }

code {
  background: #eee;
  padding: 0 0.2em;
  font-family: monospace;
}

.legend {
  border: 1px solid #000;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: #eef;
  font-size: 0.9em;
}
.legend .inf, .legend .ns, .legend .inv { display: inline-block; margin-right: 0.5em; }

nav.role-nav {
  border: 1px solid #000;
  padding: 0.5em;
  margin-bottom: 1em;
  background: #eee;
  font-size: 0.9em;
}
nav.role-nav a { margin-right: 1em; }

.pagenav {
  border-top: 1px solid #888;
  padding-top: 0.5em;
  margin-top: 2em;
  font-size: 0.9em;
}