/* ticket-form.css — priority picker and the drop zone.
 *
 * The picker is a segmented control rather than four buttons in a row: the
 * choices are exclusive and few, the track shows how many there are before one
 * is read, and the selected segment is a raised pill inside it. The whole
 * control is 40px tall, which is exactly a .field, so it lines up with the
 * category dropdown beside it. */
.pri-pick{display:flex;gap:3px;padding:3px;background:var(--hover);border-radius:var(--r-md)}
.pri-pick button{flex:1;min-width:0;height:34px;border:1px solid transparent;background:transparent;color:var(--ink-3);border-radius:var(--r-sm);font-size:13px;font-weight:500;letter-spacing:-.006em;cursor:pointer;padding:0 6px}
.pri-pick button:hover{color:var(--ink)}
.pri-pick button:active{transform:scale(.96)}
.pri-pick button.on{background:var(--raised);color:var(--accent);font-weight:600;box-shadow:var(--shadow-xs)}

/* The drop zone. Dashed because it is not a control yet — it is a place things
   may be put — and it takes the accent only while something is over it. */
.drop{border:1.5px dashed var(--dashed);border-radius:var(--r-lg);padding:24px;text-align:center;cursor:pointer;background:var(--surface-alt);color:var(--ink-3);font-size:13px;transition:border-color var(--t),background-color var(--t),color var(--t)}
.drop:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.field-note{display:flex;align-items:center;min-height:40px;padding:9px 13px;border:1.5px dashed var(--dashed);border-radius:var(--r-md);color:var(--muted);font-size:13px}