:root {
  --lm-navy: #00377D;
  --lm-navy-dark: #001C41;
  --lm-navy-deep: #01132a;
  --lm-green-dark: #1E5631;
  --lm-yellow: #FFBE0B;
  --lm-yellow-dark: #DDA000;
  --lm-magenta: #BE1D75;
  --lm-ink: #0c0c0c;
  --lm-muted: #434751;
  --lm-outline: #141414;
  --lm-white: #FFFFFF;
  --lm-ice: #E3F0FC;
  --lm-alt: #F4F9FF;
  --lm-neutral: #F0F0F0;
  --lm-border: #C2C2C2;
  --lm-border-blue: #D4E5F7;
  --lm-border-ice: #B8DAFA;
  --lm-error: #BA1A1A;
  --lm-error-bg: #FFDAD6;
  --lm-error-ink: #93000A;
  --lm-ok-bg: #E3F0FC;
  --lm-ok-ink: #00377D;
  --lm-ok-line: #B8DAFA;
  --lm-warn-bg: #FFDEA2;
  --lm-warn-ink: #5C4200;
  --lm-warn-line: #FCBC05;
  --lm-urgent-bg: #FDEBF4;
  --lm-urgent-ink: #8C0053;
  --lm-urgent-line: #FFB0CD;
  --lm-done-bg: #E6F4EA;
  --lm-done-ink: #1E5631;
  --lm-done-line: #A8D5B5;
  --lm-off-bg: #F0F0F0;
  --lm-off-ink: #434751;
  --lm-off-line: #C2C2C2;
  --lm-new-bg: #FFBE0B;
  --lm-new-ink: #141414;
  --lm-new-line: #FFBE0B;
  --lm-font-heading: DM Sans, Nunito Sans, Arial, Helvetica, sans-serif;
  --lm-font-body: Nunito Sans, Open Sans, Arial, Helvetica, sans-serif;
  --lm-measure: 68ch;
  --lm-radius-sm: 4px;
  --lm-radius: 6px;
  --lm-radius-lg: 8px;
  --lm-backdrop: rgba(0, 55, 125, 0.4);
}

.lm-brandbar {
  height: 24px;
  background: #FFFFFF url("../images/brand/bar.svg") left top/1464px 24px repeat-x;
}
@media (max-width: 575.98px) {
  .lm-brandbar {
    height: 16px;
    background-size: 976px 16px;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: #FFFFFF;
  color: #0c0c0c;
  font: 18px/1.45 "Nunito Sans", "Open Sans", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: "DM Sans", "Nunito Sans", Arial, Helvetica, sans-serif;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.15rem;
}

h4 {
  font-size: 1rem;
}

a {
  color: #0c0c0c;
  text-decoration: underline;
}

a:hover {
  color: #00377D;
  background: #E3F0FC;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [contenteditable]:focus-visible {
  outline: 3px solid #FFBE0B;
  outline-offset: 0;
}

.trainbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #FFBE0B;
  color: #141414;
  border-bottom: 3px solid #141414;
}
.trainbar .brand {
  font: 700 1.1rem "DM Sans", "Nunito Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #141414;
  margin-right: auto;
}
.trainbar .brand:hover {
  background: none;
}
.trainbar .who {
  font-size: 0.9rem;
}
.trainbar .signout {
  font-size: 0.9rem;
  font-weight: 700;
  color: #141414;
}

.chip-training {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 4px;
  background: #141414;
  color: #FFBE0B;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.trainnote {
  margin: 0;
  padding: 6px 16px;
  background: #FFDEA2;
  color: #5C4200;
  font-size: 0.85rem;
  border-bottom: 1px solid #FCBC05;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}
.page.narrow {
  max-width: 620px;
}

.headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.headrow h1 {
  margin: 0;
}

.meta, .hint, .small {
  color: #434751;
  font-size: 0.9rem;
}

.hint {
  display: block;
  margin: 0 0 6px;
}

.note {
  color: #434751;
  font-size: 0.9rem;
  margin: 6px 0;
}

.back {
  font-weight: 700;
}

.box {
  border: 1px solid #C2C2C2;
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  background: #FFFFFF;
}
.box > h2, .box > h3 {
  margin: -16px -16px 16px;
  padding: 10px 16px;
  background: #00377D;
  color: #FFFFFF;
  border-radius: 8px 8px 0 0;
}

.notice {
  padding: 10px 14px;
  border-left: 6px solid #00377D;
  background: #E3F0FC;
  color: #00377D;
  margin: 0 0 16px;
}
.notice.ok {
  background: #E6F4EA;
  color: #1E5631;
  border-left-color: #A8D5B5;
}
.notice.warn {
  background: #FFDEA2;
  color: #5C4200;
  border-left-color: #FCBC05;
}
.notice.error {
  background: #FDEBF4;
  color: #8C0053;
  border-left-color: #FFB0CD;
}
.notice.new {
  background: #FFBE0B;
  color: #141414;
  border-left-color: #FFBE0B;
}
.notice.error {
  background: #FFDAD6;
  color: #93000A;
  border-left-color: #BA1A1A;
}
.notice.new {
  border-left-color: #141414;
}

.lm-pill, .pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.lm-pill-ok, .pill.ok {
  background: #E3F0FC;
  color: #00377D;
  border-color: #B8DAFA;
}

.lm-pill-warn, .pill.warn {
  background: #FFDEA2;
  color: #5C4200;
  border-color: #FCBC05;
}

.lm-pill-urgent, .pill.urgent {
  background: #FDEBF4;
  color: #8C0053;
  border-color: #FFB0CD;
}

.lm-pill-done, .pill.done {
  background: #E6F4EA;
  color: #1E5631;
  border-color: #A8D5B5;
}

.lm-pill-off, .pill.off {
  background: #F0F0F0;
  color: #434751;
  border-color: #C2C2C2;
}

.lm-pill-new, .pill.new {
  background: #FFBE0B;
  color: #141414;
  border-color: #FFBE0B;
}

.pill.req {
  background: #BE1D75;
  color: #FFFFFF;
}

.pill.opt {
  background: #F0F0F0;
  color: #434751;
  border-color: #C2C2C2;
}

p.pill {
  margin: 6px 0;
}

.pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid #141414;
  border-radius: 6px;
  background: #FFBE0B;
  color: #141414;
  font: 700 1rem "Nunito Sans", "Open Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: none;
}
.btn:hover {
  background: #00377D;
  color: #FFFFFF;
}
.btn.secondary {
  background: #FFFFFF;
}
.btn.secondary:hover {
  background: #E3F0FC;
  color: #00377D;
}
.btn.small {
  padding: 5px 12px;
  font-size: 0.875rem;
}
.btn.w-100 {
  width: 100%;
}
.btn[disabled] {
  opacity: 1;
  background: #F0F0F0;
  border-color: #C2C2C2;
  color: #434751;
  cursor: not-allowed;
}

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

.inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.field {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0 0 18px;
  border: 0;
  padding: 0;
}
.field.half {
  flex-basis: calc(50% - 16px);
}
@media (max-width: 640px) {
  .field.half {
    flex-basis: 100%;
  }
}

.flabel {
  display: block;
  font-weight: 700;
  margin: 0 0 4px;
  padding: 0;
}
.flabel .pill {
  margin-left: 6px;
}
.flabel .hint {
  display: block;
  font-weight: 400;
  margin: 2px 0 0;
}

.input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #141414;
  border-radius: 0;
  background: #FFFFFF;
  color: #0c0c0c;
  font: 1rem "Nunito Sans", "Open Sans", Arial, Helvetica, sans-serif;
}
.input.filter {
  margin-bottom: 8px;
  border-width: 1px;
}

textarea.input {
  resize: vertical;
  min-height: 2.6em;
}

.withunit {
  display: flex;
  align-items: stretch;
}
.withunit .input {
  flex: 1;
}
.withunit .unit {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 2px solid #141414;
  border-left: 0;
  background: #F0F0F0;
  font-weight: 700;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0;
  font-weight: 400;
}
.check input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #00377D;
}

.info {
  padding: 10px 14px;
  border-left: 6px solid #00377D;
  background: #F4F9FF;
  margin: 0 0 18px;
  flex: 1 1 100%;
}

.toolbar {
  display: flex;
  gap: 4px;
  border: 2px solid #141414;
  border-bottom: 0;
  padding: 4px;
  background: #F0F0F0;
}
.toolbar .tool {
  border: 1px solid #C2C2C2;
  background: #FFFFFF;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 700;
}

.rich {
  min-height: 6em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 12px;
  border: 2px solid #141414;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #0c0c0c;
  font: 1rem "Nunito Sans", "Open Sans", Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: none;
}
.chip:hover {
  background: #E3F0FC;
  color: #00377D;
}
.chip.on {
  background: #00377D;
  color: #FFFFFF;
  border-color: #00377D;
}
.chip.on:hover {
  background: #001C41;
  color: #FFFFFF;
}
.chip .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid #141414;
}

.matrix .mrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 0;
  border-bottom: 1px solid #C2C2C2;
}
.matrix .mlabel {
  flex: 1 1 200px;
  font-weight: 700;
}

.sigwrap {
  max-width: 600px;
}

.sigpad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  border: 2px solid #141414;
  background: #FFFFFF;
  touch-action: none;
}

.sigset {
  display: grid;
  gap: 16px;
}

.bodymap .bmstage {
  margin: 10px 0;
}
.bodymap .bmbox {
  position: relative;
  max-width: 420px;
  border: 1px solid #C2C2C2;
}
.bodymap .bmart svg {
  display: block;
  width: 100%;
  height: auto;
}
.bodymap .bmoverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.rows {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
}

.row {
  border: 1px solid #C2C2C2;
  border-left: 4px solid #00377D;
  padding: 12px;
}
.row .rowhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.entry {
  margin: 12px 0;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.plain li {
  padding: 2px 0;
}

.tablewrap, .table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.table th {
  background: #FFBE0B;
  color: #141414;
  text-align: left;
}
.table th, .table td {
  padding: 6px 8px;
  border-bottom: 1px solid #C2C2C2;
  vertical-align: top;
}
.table tbody tr:nth-child(even) td {
  background: #F7F7F7;
}

.records {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}
.records .record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 2px solid #141414;
  border-radius: 8px;
  text-decoration: none;
  transition: none;
}
.records .record:hover {
  background: #00377D;
  color: #FFFFFF;
}
.records .record:hover .meta {
  color: #FFFFFF;
}
.records .ref {
  font-weight: 700;
}
.records .meta {
  flex: 1 1 auto;
}
.records li > .small {
  display: inline-block;
  margin: 4px 0 0 14px;
}

.eprlayout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-areas: "bar bar" "rail main";
  min-height: calc(100vh - 90px);
}
@media (max-width: 800px) {
  .eprlayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bar" "rail" "main";
  }
}

.recordbar {
  grid-area: bar;
  position: sticky;
  top: 50px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 16px;
  background: #00377D;
  color: #FFFFFF;
}
.recordbar a, .recordbar .meta {
  color: #FFFFFF;
}
.recordbar a:hover {
  background: #001C41;
  color: #FFFFFF;
}

.savestatus {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
}
.savestatus.busy {
  color: #E3F0FC;
}
.savestatus.ok {
  color: #FFFFFF;
}
.savestatus.error {
  background: #FFDAD6;
  color: #93000A;
  padding: 2px 8px;
  border-radius: 4px;
}

.rail {
  grid-area: rail;
  background: #01132a;
  padding: 8px 0;
}
@media (max-width: 800px) {
  .rail {
    display: flex;
    overflow-x: auto;
    padding: 6px;
    gap: 4px;
  }
}

.railitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #FFFFFF;
  text-decoration: none;
  transition: none;
}
.railitem:hover {
  background: #00377D;
  color: #FFFFFF;
}
.railitem.current {
  background: #FFBE0B;
  color: #141414;
}
.railitem .raillabel {
  font-size: 0.9rem;
}
@media (max-width: 800px) {
  .railitem {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 6px;
  }
  .railitem .raillabel {
    white-space: nowrap;
  }
}

.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 0.75rem;
  font-weight: 700;
}
.circle.done {
  background: #E6F4EA;
  color: #1E5631;
  border-color: #E6F4EA;
}
.circle.todo {
  background: #FFFFFF;
  color: #141414;
  border-color: #FFFFFF;
}
.circle.locked {
  opacity: 0.7;
}
.circle.module {
  border-style: dashed;
}

.eprmain {
  grid-area: main;
  padding: 16px 16px 80px;
  max-width: 900px;
}

.tiles, .sectiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.tile {
  padding: 10px 12px;
  border: 1px solid #B8DAFA;
  background: #F4F9FF;
  font-size: 0.85rem;
  color: #434751;
}
.tile b {
  display: block;
  font-size: 1.4rem;
  color: #0c0c0c;
}

.sectile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border: 2px solid #141414;
  border-radius: 8px;
  text-decoration: none;
  transition: none;
}
.sectile small {
  color: #434751;
}
.sectile:hover {
  background: #00377D;
  color: #FFFFFF;
}
.sectile:hover small {
  color: #FFFFFF;
}

.box.finish {
  border-color: #141414;
  border-width: 2px;
}

.record-view .viewsection {
  margin: 0 0 24px;
}
.record-view .viewsection > h2 {
  padding: 8px 12px;
  background: #00377D;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0;
  margin: 0;
}
.record-view .viewsection > .box {
  border-radius: 0 0 6px 6px;
}
.record-view .d-flex {
  display: flex;
}
.record-view .flex-wrap {
  flex-wrap: wrap;
}
.record-view .flex-row {
  flex-direction: row;
}
.record-view .gap-3 {
  gap: 1rem;
}
.record-view .mb-3 {
  margin-bottom: 1rem;
}
.record-view .m-0 {
  margin: 0;
}
.record-view .w-100 {
  width: 100%;
}
.record-view .d-block {
  display: block;
}
.record-view .alert, .record-view .alert-light {
  padding: 10px;
  border: 1px solid #C2C2C2;
  background: #F4F9FF;
}
.record-view .text-muted, .record-view small {
  color: #434751;
}
.record-view hr {
  border: 0;
  border-top: 1px solid #C2C2C2;
  margin: 12px 0;
}
.record-view .viewsection > .box .input {
  border: 0;
  padding: 0;
  width: auto;
  display: block;
  flex: 1 1 200px;
}
.record-view img {
  max-width: 100%;
  height: auto;
}

.feedback-note {
  margin: 0;
  padding: 10px 14px;
  border-left: 6px solid #BE1D75;
  background: #FDEBF4;
  color: #0c0c0c;
}
.feedback-note p {
  margin: 4px 0 0;
}

.feedback-edit {
  margin: 0;
  padding: 10px 14px;
  background: #FDEBF4;
  border-left: 6px solid #BE1D75;
}

.feedback-summary {
  border: 2px solid #BE1D75;
}

.feedback-summary > h2 {
  background: #BE1D75;
}

.feedback-overall > h2 {
  background: #BE1D75;
}
