/* GENERATED by hl:web — ONE global stylesheet.
   Components author their Style rules per file; only the rules a View actually
   REFERENCES are emitted (dead rules are dropped and listed at boot). Class names
   follow the tag-prefix strip rule: rule `headerMain` referenced inside `header`
   emits class="main" under the TAG-QUALIFIED selector `header.main`; under any
   other tag it keeps `.headerMain`. */

:root {
  --hl-font: 16px/1.5 system-ui, sans-serif;
  --hl-measure: 44rem;
  --hl-accent: #2b6cb0;
  --hl-rule: #8884;
}

html > body {
  font: var(--hl-font);
  max-width: var(--hl-measure);
  margin: 2rem auto;
  padding: 0 1rem;
}

body input {
  font: inherit;
  padding: .3rem;
}

body button {
  font: inherit;
  padding: .2rem .6rem;
  cursor: pointer;
}

body a {
  color: var(--hl-accent);
}

body .zone-over {
  outline: 2px solid var(--hl-accent);
  outline-offset: 2px;
}

section.page {
  display: block;
}

ul.rows {
  list-style: none;
  padding-left: 0;
}

li.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .45rem .3rem;
  border: 1px solid var(--hl-rule);
  margin-bottom: .25rem;
  cursor: grab;
  user-select: none;
}

span.pos {
  opacity: 0.6;
  width: 1.5rem;
}

span.name {
  font-weight: 600;
  min-width: 5rem;
}

input.row {
  width: 10rem;
}

p.order {
  opacity: 0.7;
}

p.drag {
  opacity: 0.7;
  font-size: .9rem;
}

div.board {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

ul.zone {
  list-style: none;
  padding-left: 0;
  padding: .5rem;
  min-width: 10rem;
  min-height: 6rem;
  border: 1px solid var(--hl-rule);
}

li.card {
  padding: .45rem .5rem;
  margin-bottom: .25rem;
  border: 1px solid var(--hl-rule);
  cursor: grab;
  user-select: none;
  background: var(--hl-bg);
}

h2.zone {
  font-size: .9rem;
  margin: 0 0 .25rem 0;
}

p.line {
  opacity: 0.7;
  font-size: .9rem;
}

li.pick {
  padding: .45rem .3rem;
  border: 1px solid var(--hl-rule);
  margin-bottom: .25rem;
  cursor: grab;
  user-select: none;
  background: canvas;
}

p.note {
  opacity: 0.7;
}

section.about {
  display: block;
}