:root {
  color-scheme: light;
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface-muted: #eef2ef;
  --text: #17201c;
  --muted: #5b6861;
  --border: #cbd5ce;
  --accent: #226a5a;
  --accent-strong: #174b40;
  --danger: #a23b3b;
  --shadow: 0 18px 50px rgba(22, 33, 28, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.8fr);
  gap: 24px;
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.workspace,
.output-panel {
  min-width: 0;
}

.intro {
  padding: 4px 2px 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: 1;
}

h2 {
  font-size: 1.1rem;
  line-height: 1.2;
}

.intro p:not(.eyebrow) {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.generator-form {
  display: grid;
  gap: 16px;
}

fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

legend {
  padding: 0 8px;
  font-weight: 800;
}

label {
  display: grid;
  gap: 7px;
  color: #2a352f;
  font-size: 0.9rem;
  font-weight: 700;
}

.full {
  grid-column: 1 / -1;
}

.label-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.help-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-strong);
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.help-icon::after {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 50%;
  width: min(280px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  content: attr(aria-label);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.help-icon:hover::after,
.help-icon:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-weight: 500;
}

textarea {
  resize: vertical;
}

input[type="file"] {
  padding: 8px 12px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(34, 106, 90, 0.18);
  border-color: var(--accent);
}

.actions,
.output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.actions {
  justify-content: flex-end;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.draw-map {
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.leaflet-container {
  font: inherit;
}

.leaflet-draw-toolbar a {
  min-height: 0;
}

button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover {
  background: var(--accent-strong);
}

.secondary,
.icon-button {
  color: var(--accent-strong);
  background: var(--surface-muted);
}

.secondary:hover,
.icon-button:hover {
  color: #fff;
  background: var(--accent);
}

.output-panel {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.output-box {
  min-height: 420px;
  margin: 18px 0 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid #bdc8c1;
  border-radius: 6px;
  color: #101814;
  background: #f8faf8;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.secondary-output-header {
  margin-top: 22px;
}

.compact-output {
  min-height: 180px;
}

.validation {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
}

.validation:empty {
  display: none;
}

.kml-summary,
.area-stats {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: #f8faf8;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.area-stats {
  border-style: solid;
  color: var(--accent-strong);
  background: #f2f8f6;
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 720px);
    padding: 18px 0 28px;
  }

  .output-panel {
    position: static;
  }
}

@media (max-width: 620px) {
  fieldset {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  button {
    width: 100%;
  }
}

[hidden]{display:none!important}
:root{--bg:#f0f2f5;--surface:#fafafa;--surface-muted:#e8e8e8;--text:#212121;--muted:#606060;--border:#d7d7d7;--accent:#2673dd;--accent-strong:#185cbc}
:root[data-theme="dark"]{color-scheme:dark;--bg:#121212;--surface:#222;--surface-muted:#292929;--text:#dedede;--muted:#aaa;--border:#393939;--accent:#8abaff;--accent-strong:#2673dd;--danger:#ff8091}
.drne-header{display:flex;align-items:center;gap:20px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.drne-header a{color:var(--text);text-decoration:none}.drne-header span{font-weight:700;flex:1}.drne-header button{padding:7px 14px}
#portalNotice{margin:16px 24px}.operation-context{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:16px}.operation-context p{font-size:14px;color:var(--muted)}
h1{font-size:clamp(24px,3vw,36px);line-height:1.15}.app-shell{width:calc(100% - 40px);max-width:1600px;padding:20px 0}.draw-map{height:350px}.output-panel{top:16px}.output-box{white-space:pre-wrap;overflow-wrap:anywhere}.gm-style{color:#222}button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.output-panel{position:static}.drne-header span{display:none}}
label{color:var(--text)}
input,select,textarea{background:var(--surface-muted);color:var(--text)}
.output-box,.kml-summary,.area-stats{background:var(--surface-muted);color:var(--text);border-color:var(--border)}
button{background:#2673dd;border-color:#2673dd;color:#fff}
button.secondary,button.icon-button{background:transparent;color:var(--accent);border-color:var(--border)}
button.secondary:hover,button.icon-button:hover{background:#2673dd;color:#fff}

/* Portal controls and typography; scoped away from Google Maps controls. */
:root{--primary:#2673dd;--primary-hover:#185cbc;--focus:rgba(38,115,221,.2)}
body{font-family:Archivo,Arial,sans-serif}
h1,h2,legend,.drne-header,button{font-family:Sora,Arial,sans-serif}
h1{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.025em}
.eyebrow{letter-spacing:.14em}
fieldset,.output-panel,.operation-context{border-radius:0;box-shadow:none}
label{font-weight:600}
input,select,textarea{border-radius:0;background:var(--surface);font-family:Archivo,Arial,sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}
button:not(.gm-style button),input::file-selector-button{min-height:40px;padding:10px 18px;border:1px solid var(--primary);border-radius:999px;background:var(--primary);color:#fff;font-family:Sora,Arial,sans-serif;font-weight:700;letter-spacing:.015em;cursor:pointer;transition:background-color .18s,border-color .18s}
button:not(.gm-style button):hover{background:var(--primary-hover);border-color:var(--primary-hover)}
button.secondary,button.icon-button{background:var(--surface);border-color:var(--border);color:var(--text)}
button.secondary:hover,button.icon-button:hover{background:var(--focus);border-color:var(--primary);color:var(--text)}
button:focus-visible,.drne-header a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
.drne-header{min-height:80px;padding:16px max(20px,calc((100vw - 1600px)/2));gap:20px}
.drne-header a{display:inline-flex;align-items:center;gap:16px;font-size:13px}
.drne-header .notam-logo{width:132px;height:auto}
:root[data-theme="dark"] .notam-logo{filter:invert(1)}
#notamTheme{flex:0 0 42px;width:42px;height:42px;padding:0;border-color:var(--border);background:transparent;color:var(--text);font-size:22px}
.output-box,.kml-summary,.area-stats{border-radius:0}
@media(max-width:620px){.drne-header{gap:12px}.drne-header .notam-logo{width:96px}.drne-header a{font-size:12px}.output-header{flex-wrap:wrap}}