@charset "UTF-8";

/* Page "Aufgaben" (pages/MissionAreasPage.php). Uses .fleet*, .page-title from the other files */
.fleet .mission-intro { margin: 0 0 8px; }
.fleet .mission-intro.is-justify { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.fleet .mission-intro.is-left { text-align: left; }
.fleet .mission-lead { margin: 0 0 16px; }
.fleet .mission-empty { padding: 12px 14px; border-left: 6px solid #039; background: #f2f3f4; }
.mission-area { margin: 0 0 24px; }
.fleet .mission-area .page-title { margin: 28px 0 10px; line-height: 1.25; overflow-wrap: break-word; }
.fleet .mission-area .page-title::before { top: 2px; bottom: 2px; }
.mission-area.is-draft { padding: 0 12px 4px; border: 2px dashed #8a4b00; }
.fleet .mission-area .mission-draft { display: inline-block; margin: 0 0 6px; padding: 4px 10px; background: #fff6e0; color: #8a4b00; font-size: 14px; font-weight: bold; }
.mission-area ul { margin: 0; padding: 0 0 0 26px; font-size: 16px; line-height: 1.4; text-align: left; }
.mission-area li { margin: 4px 0; overflow-wrap: break-word; }
.mission-area .fleet-bar { margin-top: 10px; }
.mission-list { overflow-anchor: none; } /* moving an area must not make the browser scroll */
.mission-move { display: flex; margin: 0 auto 0 0; }
.mission-move button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0;
  padding: 0 12px; border: 0; background: none; color: #8a4b00; font: inherit; font-weight: bold; white-space: nowrap; cursor: pointer; }
.mission-move button:hover:not(:disabled) { text-decoration: underline; }
.mission-move button:disabled { color: #8a6d4a; cursor: default; opacity: 0.6; }
.mission-move button:focus-visible { outline: 3px solid #ffe600; outline-offset: -3px; }
@container (max-width: 559px) {
  .mission-move { flex: 2 1 0; }
  .mission-move button { flex: 1 1 0; padding: 0; }
  .mission-move button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Task list of the form: one field per task; buttons only with JavaScript (.has-script) */
.mission-task-list { margin: 0 0 8px; padding: 0 0 0 28px; }
.mission-task { margin: 0 0 6px; }
.mission-task > * { vertical-align: middle; }
.mission-task input[type="text"] { box-sizing: border-box; width: calc(100% - 3 * 46px); min-height: 44px; padding: 8px 10px; border: 2px solid #53616b;
  font: inherit; font-size: 16px; color: #202020; background: #fff; }
.mission-tasks:not(.has-script) .mission-task input[type="text"] { width: 100%; }
.mission-task button, .mission-task-add { display: none; }
.has-script .mission-task button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0 0 0 2px; padding: 0; border: 2px solid #039; background: #fff; color: #039; cursor: pointer; }
.has-script .mission-task button.mission-task-remove { border-color: #b00000; color: #b00000; }
.has-script .mission-task button:disabled { border-color: #c4cad0; color: #8b959e; cursor: default; }
.has-script .mission-task-add { display: inline-flex; margin: 0 0 8px; }
.mission-task input[type="text"]:focus-visible, .mission-task button:focus-visible { outline: 3px solid #ffe600; outline-offset: 1px; }
.mission-area a:focus-visible, .mission-page .fleet-choice input:focus-visible + span { outline: 3px solid #ffe600; outline-offset: 1px; }