*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.45; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }
*{
  /* font-variation-settings: "wght" var(--jetbrains-mono-wght, 400); */
}
html {
  --big-size: clamp(1.25rem, 0.3214rem + 1.8571vw, 2.875rem);
  --medium-size: min(1.375rem, 1em);
  --medium-size: min(calc(var(--big-size) * .75), 1em);
}
body {
  font-size: var(--big-size);
  font-family: "Mona Sans";
  font-variation-settings: "wght" var(--jetbrains-mono-wght, 450); 
  font-feature-settings: "ss01" on;
  line-height: 1.25;
  padding: 20px;
  margin: 0;
}
a {color: currentColor;}
h1, h2, h3 {
  font-size: 1em;
  margin: 0 0 1em;
}
sup {
  line-height: 0;
  vertical-align: baseline;
  font-variation-settings: "wght" 510;
  position: relative;
  top: -.35em;
}

#print-form {
  background: none;
  max-width: 60rem;
  margin-bottom: 2em;
}
.field {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.field label {
  font-size: 1rem;
}
.field input, .field textarea { font-family: inherit; padding: .25em .5em; width: 100%; max-width: 100%; border-radius: 0; border: 1px solid #a3a3a3; background: none; font-size: 1em; color: currentColor;}
.field input:focus, .field textarea:focus {
  border: 1px solid black;
  outline: none;
}

.field-submit input{
  width: auto;
  cursor: pointer;
}
abbr {text-decoration: none;}
.potdemiel {
  position: absolute;
  left: -9999px;
}
.field-submit p{
  margin: 0;
  grid-column: 2;
  justify-self: start;
  gap: .5em;
 display: flex;
}


h1.suisse {
  margin: 0 0 6em; display: block; 
  /* font-style: italic; font-feature-settings: "ss01" off; */
  font-size: var(--medium-size);
}
form {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap:25px;
  background: #eee;
}
.submit {
  margin-top: 25px;
}
.datafilters {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  align-items: start;
}
form p {transition: opacity 200ms;}
form:has(p.suisse:hover) p.suisse:not(:hover) {
  opacity: .4;
  transition: opacity 500ms;
}
label:has(:checked) {  
  --tdc: blue;
}
.count {
  font-size: 1rem;
  font-family: "Wagram";
}
.submit {
  font-size: var(--medium-size);
  opacity: 1 !important;
  margin-top: 2em;
}
.submit input, .submit a, .btn {
  --shadow: rgba(0,0,0,.4);
  --currentcolor: rgba(0,0,0,1);
  font-size: 1em;
  line-height: 1.25;
  background-color: transparent;
  appearance: none;
  border: .1em solid;
  border: none;
  box-shadow: 0 .1em .2em var(--shadow);
  padding: .15em .5em .15em;
  text-decoration: none;
  cursor: pointer;
  border-radius: .2em;
  color: var(--currentcolor);
  /* transition: opacity 200ms; */
  display: inline-block;
  transition: all 200ms;
}
.submit a,
.btn-secondary {
  --currentcolor: var(--shadow);
}
.btn-secondary:hover,
.submit a:hover {
  opacity: 1;
  --shadow: rgba(0,0,0,.8);
}
form.hidden {
  display: none;
}
#sentence {
  display: none;
}
#sentence.visible {
  display: block;
  text-wrap: balance;
}
img {
  width: 100%;
}
.fromto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:  0 12px;
  select{ grid-row: 2;}
}
.altform {
  display: block;
  background: #fff;
}
.suisse {
  margin: 0 ; 
  display: inline;
}
#pdf-status-text {
  animation: blink 800ms ease-out infinite alternate;
  font-size: var(--medium-size);
}
#pdf-status-text.finished {
  animation: none;
}
@keyframes blink {
  100% { opacity: .35;}
}
.wordlabel { 
  display: inline;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: .12em;
  text-decoration-color: color-mix(in srgb, var(--tdc, black) 20%, transparent 100%);
  cursor: pointer;
}
.wordlabel:has(input:checked),
.wordlabel:hover,
.wordlabel:focus{
  text-decoration-color: var(--tdc, black);
  text-decoration-thickness: 2px;
}


.wordlabel input,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

#screenfooter {
  margin-top: 6em;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  display: none;
}
#screenfooter p { text-align: right; margin-bottom: 0;}
#screenfooter p:first-child { text-align: left;}

details {
  margin: 1em 0;
}

.progress-bar-container {
  height: .1em;
  background: #eee;
}
.progress-bar {
  transition: all 100ms;
  background: #000;
  height: 100%;
}

.restart {
  font-size: var(--medium-size);  
}
@media screen {
  .download-links {
    font-size: var(--medium-size);
    display: flex;
    gap: .35ch;
    flex-wrap: wrap;
  }
  .field-submit,
  .cancel-link {
    font-size: var(--medium-size);
  }
  summary{font-size: 1rem;
  font-family: "Wagram";}
  table {
    width: calc(100% + 40px);
    font-size: 1rem;
  font-family: "Wagram";
      border-collapse: collapse;
      margin: 0 -20px;
  }

  thead {
      position: sticky;
      top: 0;
  }
  th {
      padding: .5em;
      text-align: left;
      background: black;
      color: white;
      cursor: ns-resize;
  }
  td { 
      padding: .5em;
      border-bottom: 1px solid;
      vertical-align: top;
      text-wrap: balance
  }
  .selected {
      color: red;
  }
  tr:hover {
      background: #eee;
  }
  .order-text {
    margin-bottom: 2em;
  }
  .order-text p{
    max-width: 60rem;
    font-size: var(--medium-size);
  }
  .order-text p:first-of-type {
    font-size: 1em;
    max-width: none;
  }
}