/* Copyright 2018-2026 Preston A. Elder <prez@neuromancy.net>. All rights reserved. */
/* The editor page (/editor): header fields, toolbar, the in-game view with the
   card editor beside it (below it at phone width), condition cards, forms. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.editor-root {
  margin-top: 12px;
}

.ed-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
}

.ed-status {
  margin: 0;
  min-height: 1.4em;
}

.ed-actions,
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
}

.ed-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 4px;
}

.ed-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.ed-header-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(160px, 1.4fr) minmax(110px, 0.8fr) auto;
  gap: 8px 14px;
  align-items: start;
}

.ed-context {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.ed-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
  min-width: 0;
}

.ed-field > label {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

/* Height, padding, border and font come from the --field-* tokens in site.css; here only the width. */
.ed-field input[type="text"],
.ed-field input[type="search"],
.ed-field input[type="number"],
.ed-field select,
.ed-field textarea {
  width: 100%;
}

.ed-field input[type="color"] {
  width: 64px;
}

.ed-field.has-error input,
.ed-field.has-error select {
  border-color: var(--danger);
}

.ed-error {
  color: var(--danger);
  margin: 2px 0;
  font-size: 14px;
}

.ed-error[hidden] {
  display: none;
}

.ed-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.ed-required {
  color: var(--danger);
}

.ed-specs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 8px 0 0;
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.ed-more summary {
  cursor: pointer;
  margin-top: 6px;
}

.ed-problems {
  margin: 8px 0;
}

.ed-problems-title {
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--danger);
}

.ed-problem-list {
  margin: 0;
  padding-left: 20px;
}

.ed-ok {
  margin: 4px 0;
}

.ed-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(320px, 420px);
  gap: 0;
  align-items: start;
}

/* Once the bar between the view and the card editor has been moved (site/editor-splitter.mjs), the view takes --editor-split percent of the width and the card editor the rest; neither goes below 320px or a quarter. */
.ed-workspace[data-split] {
  --editor-pane-min: max(320px, 25%);
  grid-template-columns: minmax(var(--editor-pane-min), calc(var(--editor-split) * 1%)) 14px minmax(
      var(--editor-pane-min),
      1fr
    );
}

.ed-view {
  min-width: 0;
}

.ed-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 16px);
  overflow: auto;
}

.ed-panel:focus-visible,
.ed-panel-title:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

.ed-panel-title {
  font-size: 18px;
  margin: 0 0 8px;
}

.ed-row-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.button.small {
  padding: 2px 8px;
  min-height: 28px;
  font-size: 13px;
}

.button[aria-pressed="true"] {
  background: var(--azure);
  color: var(--on-accent);
}

.ed-cooldown,
.ed-items,
.ed-output {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin: 8px 0;
  min-width: 0;
}

.ed-cond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: flex-end;
}

.ed-cond-row > .ed-field {
  flex: 1 1 140px;
}

/* A field whose selected text does not fit its column takes the whole row; one still too long is set smaller (down to 12px) and tighter (editor-ui.mjs fitSelect). The height is the field token either way. */
.ed-cond-row > .ed-field.ed-field-wide {
  flex-basis: 100%;
  grid-column: 1 / -1;
}

select.ed-select-snug {
  padding-left: 6px;
  padding-right: 6px;
  text-overflow: ellipsis;
} /* its font size is set by fitSelect */
.ed-select-full {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* The selected card and cards with problems, on the in-game view. */
.rv-card.selected {
  box-shadow: 0 0 0 2px var(--azure);
}

.rv-switch-text {
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  padding: 2px 0;
  width: 100%;
}

button.rv-switch-text {
  text-decoration: underline dotted;
}

.rv-switch-text[aria-pressed="true"] {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

.rv-switch-text.problem-error {
  color: var(--danger);
}

.rv-title:focus-visible,
.rv-switch-text:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
}

/* Conditions */
.ed-conditions {
  margin: 4px 0;
}

.ed-cond-wording-label {
  margin: 4px 0 0;
  font-weight: 600;
  font-size: 14px;
}

.ed-cond-wording {
  background: var(--code-bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin: 2px 0 8px;
  overflow-wrap: anywhere;
}

.ed-cond-wording .game-link,
.ed-cond-card .game-link {
  color: inherit;
}

.ed-cond-tree {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--line);
}

.ed-conditions > .ed-cond-tree {
  padding-left: 0;
  border-left: 0;
}

.ed-cond,
.ed-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  margin: 6px 0;
  background: var(--surface-2, transparent);
}

.ed-cond.problem-error {
  border-color: var(--danger);
}

.ed-cond.problem-note {
  border-color: var(--warn);
}

.ed-cond.disabled,
.ed-group.disabled {
  opacity: 0.7;
}

.ed-cond-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ed-cond-card {
  margin: 4px 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ed-cond-add {
  margin: 6px 0 0;
}

.ed-note {
  margin: 4px 0;
}

/* The spell and item picker */
.ed-ref-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
}

.ed-ref-group > .ed-ref-input,
.ed-ref-group > .ed-ref-box {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.ed-ref-box {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  height: var(--field-height);
  padding: 0 var(--field-pad-x);
  box-sizing: border-box;
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
  border: var(--field-border) solid var(--line-strong, var(--line));
  border-radius: var(--field-radius);
  background: var(--surface);
  overflow: hidden;
}

.ed-ref-box .game-link,
.ed-ref-box .ed-ref-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-ref-box .ed-ref-id {
  flex: none;
  white-space: nowrap;
}

/* The button is joined to the end of the box: same height, shared edge, never wraps. */
.ed-ref-group > .ed-ref-end {
  flex: none;
  margin: 0;
  white-space: nowrap;
  height: var(--field-height);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.ed-ref-group:has(> .ed-ref-end) > .ed-ref-input,
.ed-ref-group:has(> .ed-ref-end) > .ed-ref-box {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ed-ref-below {
  margin-top: 6px;
}

.ed-ref-min:empty {
  display: none;
}

.ed-ref-id {
  color: var(--muted);
  font-size: 13px;
}

.ed-ref-body {
  position: relative;
}

.ed-ref-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 2px;
  max-height: 15em;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.ed-ref-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.ed-ref-list li.muted {
  cursor: default;
}

.ed-ref-list li[aria-selected="true"] {
  background: color-mix(in srgb, var(--azure) 20%, transparent);
  outline: 1px solid var(--azure);
}

.ed-ref-list li:hover {
  background: var(--surface-2);
}

.ed-ref-typed,
.ed-ref-used {
  font-size: 12px;
  color: var(--muted);
}

.ed-ref-used::before {
  content: "\2605 ";
}

.ed-ref-body > .ed-field {
  margin-top: 6px;
}

.ed-ref-current .game-link {
  color: inherit;
}

a.button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.ed-item-list {
  margin: 4px 0;
  padding-left: 22px;
}

.ed-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 3px 0;
}

.ed-item.problem-error {
  color: var(--danger);
}

.ed-seq {
  align-items: flex-end;
}

/* Dialogs: the condition picker and publishing */
.ed-picker,
.ed-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 12px 16px;
}

.ed-picker::backdrop,
.ed-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.ed-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ed-picker-head h2 {
  margin: 0;
  font-size: 18px;
}

.ed-picker input[type="search"] {
  width: 100%;
  margin: 8px 0;
}

.ed-picker-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
}

.ed-picker-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow: auto;
}

.ed-picker-cat {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 4px 8px;
  font: inherit;
  cursor: pointer;
}

.ed-picker-cat[aria-checked="true"] {
  background: var(--azure);
  color: var(--on-accent);
}

.ed-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow: auto;
}

.ed-picker-list li {
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.ed-picker-list li.active,
.ed-picker-list li:hover {
  background: var(--surface-2);
  outline: 1px solid var(--azure);
}

.ed-export textarea {
  width: 100%;
  box-sizing: border-box;
}

.ed-setup {
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.ed-drafts,
.ed-export {
  margin: 12px 0;
}

.ed-draft-list {
  padding-left: 20px;
}

.ed-outputs h2 {
  font-size: 18px;
}

/* Phone width: the list view is the editing surface, the card editor below it. */
@media (max-width: 960px) {
  .ed-workspace,
  .ed-workspace[data-split] {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-splitter {
    display: none;
  }
  .ed-panel {
    position: static;
    max-height: none;
  }
  .ed-header-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ed-header-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-picker-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-picker-cats {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }
}

/* Dragging (site/editor-drag.mjs): cards and condition rows drag from anywhere on them; what is carried, and where it lands. */
.rv-card.selectable {
  cursor: grab;
  -webkit-touch-callout: none;
}

.rv-card.selectable .rv-title,
.rv-card.selectable a {
  cursor: grab;
}

.rv-card.selectable:not(.selected):not(.dragging):hover {
  box-shadow: var(--shadow-raised);
}

.rv-card.dragging {
  opacity: 0.4;
}

.rotation-view.dragging .rv-canvas {
  cursor: grabbing;
}

.rv-drop {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border-radius: 3px;
  background: var(--azure);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--azure) 35%, transparent);
}

.rv-drop.box {
  background: color-mix(in srgb, var(--azure) 25%, transparent);
  border: 2px dashed var(--azure);
  box-shadow: none;
}

.ed-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  max-width: 260px;
  padding: 4px 10px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--azure);
  box-shadow: var(--shadow-raised);
  font-size: 13px;
}

body.ed-dragging,
body.ed-dragging * {
  user-select: none !important;
  cursor: grabbing !important;
}

.ed-toolbar .button[id^="ed-add-"] {
  touch-action: none;
}

/* Dragging a condition (site/editor-condition.mjs). */
.ed-conditions {
  position: relative;
}

.ed-cond.draggable,
.ed-group.draggable {
  cursor: grab;
  -webkit-touch-callout: none;
}

.ed-cond.draggable :is(button, summary, label),
.ed-group.draggable :is(button, summary, label) {
  cursor: pointer;
}

.ed-cond.draggable :is(input, select, textarea),
.ed-group.draggable :is(input, select, textarea) {
  cursor: auto;
}

.ed-cond.dragging,
.ed-group.dragging {
  opacity: 0.45;
}

.ed-drop {
  position: absolute;
  z-index: 5;
  height: 4px;
  border-radius: 3px;
  pointer-events: none;
  background: var(--azure);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--azure) 35%, transparent);
}

.ed-arm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 6px;
  margin: 8px 0;
}

.ed-arm-grid > .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.ed-offsets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 6px 0;
  align-items: end;
}

.ed-offsets > .ed-field {
  min-width: 0;
  margin: 0;
}

.ed-offsets input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ed-offsets label {
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 13px;
}

.ed-ref-source {
  margin: 4px 0 0;
}

.ed-ref-hint {
  margin: 4px 0 0;
  font-size: 13px;
}

/* Fields side by side (--field-* tokens, site.css). Every control is the same height; a button in a field row (Change,
   Find on Wowhead, Default, Add item) is that height too. Where the browser has subgrid, the fields of one row share
   four grid rows (label, control, hint, error), so the controls start at the same top even when a label wraps or one
   field has a hint or an error line; without it they align at the bottom, as before. */
.ed-cond-row > .button.small {
  min-height: var(--field-height);
  padding: 8px 14px;
  font-size: 15px;
}

/* Find on Wowhead is one line the token tall, however narrow the card nests it: cut with an ellipsis, never wrapped. */
.button.ed-ref-find {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  height: var(--field-height);
  padding: 8px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 15px;
  line-height: var(--field-line-height);
}

.ed-cond-row > .button {
  height: var(--field-height);
}

@supports (grid-template-rows: subgrid) {
  .ed-cond-row,
  .ed-offsets,
  .ed-header-row {
    display: grid;
    align-items: start;
  }
  .ed-cond-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 4px 12px;
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row) > * {
    grid-row: span 4;
  }
  /* A button in a row sits on the control row: below the label line and its gap. */
  .ed-cond-row > .button {
    align-self: start;
    margin-top: 23px;
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row) > .ed-field:has(> label + :is(input, select, textarea)) {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .ed-offsets > .ed-field {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row) > .ed-field:has(> label + :is(input, select, textarea)) > label {
    grid-row: 1;
    margin-bottom: 3px;
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row)
    > .ed-field:has(> label + :is(input, select, textarea))
    > :is(input, select, textarea) {
    grid-row: 2;
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row) > .ed-field:has(> label + :is(input, select, textarea)) > .hint {
    grid-row: 3;
    margin-top: 11px;
  }
  :is(.ed-cond-row, .ed-offsets, .ed-header-row) > .ed-field:has(> label + :is(input, select, textarea)) > .ed-error {
    grid-row: 4;
    margin-top: 5px;
  }
}

/* The bar between the view and the card editor (site/editor-splitter.mjs): a slim line with a grip, wider and azure on hover, focus and while dragging. It stays in view beside a tall page. */
.ed-splitter {
  position: relative;
  align-self: stretch;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ed-splitter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--line);
  transition:
    background-color 0.12s,
    width 0.12s,
    margin-left 0.12s;
}

.ed-splitter-grip {
  position: sticky;
  top: 40vh;
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 46px;
  margin: 0 auto;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 5px;
  background-color: var(--surface);
  background-image: radial-gradient(circle at center, var(--muted) 1.1px, transparent 1.6px);
  background-size: 4px 8px;
  background-position: center;
  transition: border-color 0.12s;
}

.ed-splitter:hover::before,
.ed-splitter:focus-visible::before,
.ed-splitter.dragging::before {
  width: 4px;
  margin-left: -2px;
  background: var(--azure);
}

.ed-splitter:hover .ed-splitter-grip,
.ed-splitter:focus-visible .ed-splitter-grip,
.ed-splitter.dragging .ed-splitter-grip {
  border-color: var(--azure);
}

.ed-splitter:focus {
  outline: none;
}

.ed-splitter:focus-visible .ed-splitter-grip {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

body.ed-splitting,
body.ed-splitting * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}