/* --- Bitllet / ticket card --- */
.ticket[hidden] { display: none; }
.ticket {
  position: relative;
  display: flex;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(22,35,63,0.04), 0 12px 32px -16px rgba(22,35,63,0.18);
  overflow: hidden;
  border: 1px solid var(--border);
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle 13px at calc(100% - 220px) 0%, #000 99%, transparent 100%),
    radial-gradient(circle 13px at calc(100% - 220px) 100%, #000 99%, transparent 100%);
  -webkit-mask-composite: source-over, xor, xor;
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle 13px at calc(100% - 220px) 0%, #000 99%, transparent 100%),
    radial-gradient(circle 13px at calc(100% - 220px) 100%, #000 99%, transparent 100%);
  mask-composite: exclude, exclude;
}

.ticket-main { flex: 1; padding: 32px 32px 28px; min-width: 0; container-type: inline-size; }
.ticket-stub {
  width: 220px;
  flex-shrink: 0;
  background: var(--brand-panel);
  color: var(--stub-ink);
  padding: 28px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 22px;
}

/* Perforated seam between main and stub */
.ticket-main { border-right: 2px dashed var(--border); }

.stub-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stub-ink-soft);
  margin-bottom: 6px;
}

.stub-number {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 22px;
}

.stub-text {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 14px;
  color: var(--stub-ink);
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}
.stub-text.placeholder { color: var(--stub-ink-soft); font-style: italic; }

.stub-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}

.stub-priority-icon { width: 12px; height: 12px; flex-shrink: 0; }

.stub-priority[data-level="baixa"]   { background: var(--priority-baixa); }
.stub-priority[data-level="mitjana"] { background: var(--priority-mitjana); }
.stub-priority[data-level="alta"]    { background: var(--priority-alta); }
.stub-priority[data-level="critica"] { background: var(--priority-critica); }

/* La bombolla "Baixa"/"Mitjana"/... del slider de prioritat es
   posiciona en absolut per sobre del track (veure .priority-bubble),
   i el padding-top de .priority-slider li reserva l'espai. Aixo fa
   que el track (el control interactiu real) quedi mes avall que el
   desplegable de Categoria, que no te cap bombolla al damunt. Per
   tenir els dos controls de la fila al mateix nivell visual, el
   trigger del select de Categoria es desplaça la mateixa distancia
   que reserva la bombolla. */
#category + .select-trigger { margin-top: 28px; }

/* --- Priority slider --- */
.priority-slider {
  --level-color: var(--priority-baixa);
  position: relative;
  padding-top: 28px;
}
.priority-slider[data-level="baixa"]   { --level-color: var(--priority-baixa); }
.priority-slider[data-level="mitjana"] { --level-color: var(--priority-mitjana); }
.priority-slider[data-level="alta"]    { --level-color: var(--priority-alta); }
.priority-slider[data-level="critica"] { --level-color: var(--priority-critica); }

.priority-bubble {
  position: absolute;
  top: 0;
  left: 0%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--level-color);
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease;
}

.priority-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  margin: 0;
  background: linear-gradient(to right,
    var(--priority-baixa) 0%, var(--priority-baixa) 25%,
    var(--priority-mitjana) 25%, var(--priority-mitjana) 50%,
    var(--priority-alta) 50%, var(--priority-alta) 75%,
    var(--priority-critica) 75%, var(--priority-critica) 100%);
  cursor: pointer;
  outline: none;
}
.priority-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--level-color);
  box-shadow: 0 1px 3px rgba(22,35,63,0.3);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}
.priority-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.priority-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--priority-baixa) 0%, var(--priority-baixa) 25%,
    var(--priority-mitjana) 25%, var(--priority-mitjana) 50%,
    var(--priority-alta) 50%, var(--priority-alta) 75%,
    var(--priority-critica) 75%, var(--priority-critica) 100%);
}
.priority-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--level-color);
  box-shadow: 0 1px 3px rgba(22,35,63,0.3);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}
.priority-slider input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); }

/* Nomes en dispositius tactils (sense ratoli de precisio) el thumb
   creix per facilitar agafar-lo amb el dit; a escriptori es queda
   exactament com abans (20px webkit / 14px moz). */
@media (pointer: coarse) {
  .priority-slider input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .priority-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

.priority-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.priority-ticks span { transition: color 0.22s ease, font-weight 0.22s ease; }
.priority-ticks span.active { color: var(--level-color); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .priority-bubble,
  .priority-slider input[type="range"]::-webkit-slider-thumb,
  .priority-slider input[type="range"]::-moz-range-thumb,
  .priority-ticks span {
    transition: none;
  }
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Duplicat mòbil del botó d'enviar (veure media query més avall): ocult
   per defecte, es mostra només per sota de 620px. */
.ticket-actions-mobile { display: none; }

@media (max-width: 620px) {
  .ticket {
    flex-direction: column;
    /* Retall real (no un anell decoratiu al damunt): dues mossegades
       circulars a l'alçada de la costura (--ticket-seam-y, calculada en
       JS a partir de l'alçada de .ticket-main) foraden tot el bitllet
       fins al fons de la pàgina, igual que fa la mà·scara d'escriptori
       amb la costura vertical. */
    --ticket-seam-y: 50%;
    -webkit-mask-image:
      linear-gradient(#000 0 0),
      radial-gradient(circle 13px at 0% var(--ticket-seam-y), #000 99%, transparent 100%),
      radial-gradient(circle 13px at 100% var(--ticket-seam-y), #000 99%, transparent 100%);
    -webkit-mask-composite: source-over, xor, xor;
    mask-image:
      linear-gradient(#000 0 0),
      radial-gradient(circle 13px at 0% var(--ticket-seam-y), #000 99%, transparent 100%),
      radial-gradient(circle 13px at 100% var(--ticket-seam-y), #000 99%, transparent 100%);
    mask-composite: exclude, exclude;
  }
  .ticket-main {
    border-right: none;
    border-bottom: 2px dashed var(--border);
  }
  .ticket-stub { width: auto; flex-direction: column; align-items: stretch; gap: 18px; }

  /* El botó d'enviar surt de la targeta i queda com a pas final, fora del
     bitllet i sota l'stub fosc; el botó original (dins el formulari) es
     desactiva visualment i de l'arbre d'accessibilitat. */
  .ticket-main button.submit { display: none; }
  .ticket-actions-mobile { display: block; margin-top: 20px; }
}