/* ============================================================
   Pill selects for the content idea modals
   Colours come from the same tokens the board and List chips
   use, so a stage or an effort looks the same everywhere.
   ============================================================ */

/* the real control stays for the save logic, just out of sight */
.ps-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* a pill field always takes the full width of the two-column form grid */
.form-row > .form-group.ps-group { grid-column: 1 / -1; }

.ps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ps-pill {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ps-pill:hover { color: var(--text-primary); background: var(--bg-hover); }
.ps-pill:focus-visible { outline: 2px solid var(--primary-muted); outline-offset: 1px; }

/* "not set" reads as a way out, not as an option with weight */
.ps-pill.ps-none { color: var(--text-tertiary); border-style: dashed; }
.ps-pill.ps-none.active {
  color: var(--text-secondary);
  border-style: solid;
  border-color: var(--border-light);
  background: var(--bg-surface);
}

/* default active: the app accent, for format / platform / project */
.ps-pill.active {
  color: var(--text-primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* ---- type: the filled tints used by the list chips ---- */
.ps-pill.ps-type.active                       { color: var(--text-primary); }
.ps-pill.ps-type.active[data-v="cover"]        { border-color: var(--bucket-evenant);   background: color-mix(in srgb, var(--bucket-evenant) 22%, transparent); }
.ps-pill.ps-type.active[data-v="original"]     { border-color: var(--cl-type-original); background: color-mix(in srgb, var(--cl-type-original) 22%, transparent); }
.ps-pill.ps-type.active[data-v="story"]        { border-color: var(--bucket-live-set);  background: color-mix(in srgb, var(--bucket-live-set) 22%, transparent); }
.ps-pill.ps-type.active[data-v="bts"]          { border-color: var(--bucket-personal);  background: color-mix(in srgb, var(--bucket-personal) 30%, transparent); }
.ps-pill.ps-type.active[data-v="field-travel"] { border-color: var(--bucket-forest);    background: color-mix(in srgb, var(--bucket-forest) 22%, transparent); }
.ps-pill.ps-type.active[data-v="educational"]  { border-color: var(--bucket-tools);     background: color-mix(in srgb, var(--bucket-tools) 22%, transparent); }

/* ---- effort: outline only, exactly like the list chips ---- */
.ps-pill.ps-effort.active {
  background: transparent;
  border-color: currentColor;
}
.ps-pill.ps-effort.active[data-v="low"]    { color: var(--text-secondary); }
.ps-pill.ps-effort.active[data-v="medium"] { color: var(--warning); }
.ps-pill.ps-effort.active[data-v="high"]   { color: var(--destructive); }

/* ---- stage: the column colours from the board ---- */
.ps-pill.ps-stage.active[data-v="idea"]        { color: var(--text-primary); border-color: var(--text-tertiary); background: color-mix(in srgb, var(--text-tertiary) 16%, transparent); }
.ps-pill.ps-stage.active[data-v="in_progress"] { color: var(--warning);      border-color: var(--warning);       background: color-mix(in srgb, var(--warning) 14%, transparent); }
.ps-pill.ps-stage.active[data-v="ready"]       { color: var(--success);      border-color: var(--success);       background: color-mix(in srgb, var(--success) 14%, transparent); }
.ps-pill.ps-stage.active[data-v="published"]   { color: var(--primary);      border-color: var(--primary);       background: color-mix(in srgb, var(--primary) 14%, transparent); }

@media (max-width: 640px) {
  .ps-pill { padding: 6px 11px; font-size: 12px; }
}