/* ─────────────────────────────────────────────────────────────────────────
   JOURNEY PICKER — the filter chip, the journey chip built on it, and the
   coloured step menu that crm/js/color_select.js puts in place of a step
   <select>.

   Graduated from table.css and detail.css (METIS-pub#441). color_select.js is
   loaded on every page by the shell and enhances every `select.filter-chip-select`
   it finds, but the rule that hides the replaced native select lived in
   table.css, which only list pages link. So a create form on any other page —
   Audax's quest and mission forms were the ones reported — rendered two stub
   selects before a parent was picked, and afterwards the coloured step button
   with the raw select duplicated beneath it. Loaded from shell/_tokens_css.html
   now, so the chip is complete wherever it is rendered.

   @layer base, not components, deliberately — the one departure from the other
   files in this directory. These rules are the foundation that page stylesheets
   refine from @layer base: table.css tints `.filter-chip.holon-type-*
   .filter-chip-select`, person_create.css sizes `.team-add-form .filter-chip-select`
   for touch, kanban.css reddens `.kanban-chip--no-journey .journey-picker__btn`.
   In @layer components every one of those refinements would lose to these base
   rules whatever its specificity. Moved verbatim so no page changes; tokenised
   through the same var() names they used in place.
   ───────────────────────────────────────────────────────────────────────── */
@layer base {
  /* Filter chips */
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    /* A pill: half the chip's height, which is what calc(var(--toolbar-h) / 2) drew. */
    border-radius: var(--radius-full);
    background: var(--surface);
    padding: 0 8px 0 12px;
    font-size: var(--text-base);
    height: var(--toolbar-h);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    box-shadow: var(--elev-1);
  }

  .filter-chip:hover {
    border-color: var(--text-light);
    box-shadow: var(--elev-1);
  }

  .filter-chip:focus-within {
    border-color: var(--accent);
  }

  .filter-chip-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    flex-shrink: 0;
  }

  /* Override base.css .filter-select styles when inside a chip */
  .filter-chip .filter-chip-select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    color: inherit;
    padding: 6px 2px 6px 4px;
    cursor: pointer;
    min-width: 50px;
    outline: none;
    border-radius: 0;
    box-shadow: var(--elev-0);
  }

  .filter-chip .filter-chip-select:focus {
    border: none;
    box-shadow: var(--elev-0);
  }

  /* Journey chip — the full-width form variant (crm/shared/partials/journey_chip.html). */
  .journey-chip {
    width: 100%;
    box-sizing: border-box;
  }
  .journey-chip .filter-chip-select:first-of-type { flex: 1; }
  .journey-chip .filter-chip-select:last-of-type { flex: 2; }

  /* ── Journey custom picker dropdown (shared) ── */
  .journey-picker {
    position: relative;
    display: inline-flex;
  }
  .journey-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
  }
  .journey-picker__label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .journey-picker__chevron {
    flex-shrink: 0;
    opacity: 0.4;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .journey-picker.open .journey-picker__chevron { transform: rotate(180deg); opacity: 0.7; }
  .journey-picker__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    z-index: 200;
    padding: 6px 0;
  }
  .journey-picker.open .journey-picker__menu { display: block; animation: focus-menu-in 0.15s ease-out; }
  .journey-picker__item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 14px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .journey-picker__item:hover { background: var(--bg); }
  .journey-picker__item--active { font-weight: 600; color: var(--accent); background: var(--bg); }
  .journey-picker__item[data-type="person"] { background: var(--journey-person-bg); }
  .journey-picker__item[data-type="holon"]  { background: var(--journey-holon-bg); }
  .journey-picker__item[data-type="convo"]  { background: var(--journey-convo-bg); }
  .journey-picker__item[data-type="person"]:hover,
  .journey-picker__item[data-type="person"].journey-picker__item--active { background: var(--journey-person-bg-active); }
  .journey-picker__item[data-type="holon"]:hover,
  .journey-picker__item[data-type="holon"].journey-picker__item--active  { background: var(--journey-holon-bg-active); }
  .journey-picker__item[data-type="convo"]:hover,
  .journey-picker__item[data-type="convo"].journey-picker__item--active  { background: var(--journey-convo-bg-active); }

  /* Coloured step dropdown — custom button menu that replaces the native step
     <select> so each step renders in its colour (see color_select.js). */
  select.filter-chip-select.is-color-enhanced { display: none; }
  .color-select { position: relative; display: inline-flex; }
  .color-select__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }
  .color-select__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .color-select__menu { min-width: 160px; }
  /* Step items carry an inline background colour; keep it on hover/active. */
  .color-select__menu .journey-picker__item:hover { filter: brightness(0.95); }
}