/* Deliberately plain: this is rendered on a DJI controller's built-in browser, an old
   WebView with no guarantee of modern CSS support. No flexbox tricks, no custom
   properties, no web fonts -- system fonts and a handful of universally-supported rules. */

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f4f4;
  color: #1a1a1a;
  margin: 0;
  padding: 24px 16px 48px;
}

.card {
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-top: 3px solid #6204a5;
  border-radius: 4px;
  padding: 24px;
}

/* Nordfen mark + heading, side by side. inline-block + vertical-align rather than flexbox
   -- see the file-level note up top on why. */
.brand {
  margin: 0 0 8px;
}

.logo {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  vertical-align: middle;
}

h1 {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  margin: 0;
}

p {
  line-height: 1.5;
}

.error {
  background: #fdecea;
  border: 1px solid #e0a29c;
  color: #7a1f16;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 10px;
  border: 1px solid #999999;
  border-radius: 4px;
  margin-bottom: 16px;
}

input[type="text"]:focus {
  border-color: #6204a5;
  outline: 2px solid #6204a5;
  outline-offset: 1px;
  /* Firefox's default UA style puts an !important amber box-shadow on an empty required
     field (:-moz-ui-invalid) -- overriding box-shadow here keeps our purple focus ring as
     the only one visible instead of the two fighting each other. The outline above still
     carries the focus indicator, so this loses no accessibility signal. */
  box-shadow: none;
}

button, .button {
  display: inline-block;
  background: #6204a5;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
  text-decoration: none;
}

button:active, .button:active {
  background: #4a0380;
}

.release {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  margin-top: 16px;
}

.release h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

.meta {
  color: #555555;
  font-size: 13px;
  margin-bottom: 12px;
}

code {
  background: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  word-break: break-all;
  font-size: 13px;
}

.actions {
  margin-top: 12px;
}

.actions .button {
  margin-right: 8px;
  margin-bottom: 8px;
}

.faint {
  color: #666666;
  font-size: 13px;
}

/* Two small spacing utilities -- exist only so download.html needs no inline `style="..."`
   attributes, which would otherwise force the CSP (app/security_headers.py) to weaken
   style-src with 'unsafe-inline' just for two margin tweaks. */
.mt-sm {
  margin-top: 12px;
}

.mt-lg {
  margin-top: 20px;
}