/* ═══ Dropdown ═══════════════════════════════════════════════════════════════
   A select that belongs to the product rather than to the browser.

   A native <select> cannot be styled past its box: the list it opens is drawn
   by the OS, so it ignores the type scale, the radii, the tokens and dark mode
   entirely. On a screen where every other control is ours, that list is the
   one thing that looks borrowed.

   Shared on purpose. contact-import.js already carries a private version of
   this (.ci-dd / .ci-ddmenu) — this supersedes it, and migrating that wizard
   is a class swap rather than a redesign.

   Markup:

     <button class="jc-dd" type="button" id="…"
             data-jc-dd='[{"v":"days","l":"days"},{"v":"hours","l":"hours"}]'
             value="days" aria-haspopup="listbox" aria-expanded="false">
       <span class="jc-dd-v">days</span>
       <svg class="jc-dd-c">…</svg>
     </button>

   app/dropdown.js does the rest, and fires a bubbling `change` on the trigger
   when a value is picked — so a handler written for a native select keeps
   working, because a button carries a .value too.
   ────────────────────────────────────────────────────────────────────────── */

.jc-dd{
  appearance:none;
  display:inline-flex;align-items:center;gap:8px;
  width:100%;height:40px;padding:0 11px;
  border:1px solid var(--border-strong);border-radius:9px;
  background:var(--surface);color:var(--text-primary);
  font:400 14px/1 'Inter',system-ui,sans-serif;
  font-family:'Inter',system-ui,sans-serif;
  text-align:left;cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.jc-dd:hover{border-color:var(--text-tertiary)}
.jc-dd:focus-visible{outline:0;border-color:var(--brand-blue);
  box-shadow:0 0 0 3px var(--brand-blue-soft)}
.jc-dd.is-open{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft)}

/* line-height has to clear the descenders. The trigger sets 14px/14px, so the
   value's line box was exactly the em box — and with overflow:hidden the tail
   of a g or a p was cut off. The field is a centred flex row, so giving the
   line room changes nothing about its height. */
.jc-dd-v{flex:1 1 auto;min-width:0;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-dd.is-empty .jc-dd-v{color:var(--text-tertiary)}
.jc-dd-c{flex:0 0 16px;width:16px;height:16px;color:var(--text-tertiary);
  transition:transform .16s ease}
.jc-dd.is-open .jc-dd-c{transform:rotate(180deg);color:var(--brand-blue)}

/* Small: for a dropdown sitting inside a sentence rather than in a form. */
.jc-dd.is-sm{height:30px;padding:0 9px;gap:6px;width:auto;
  font:500 13px/1 'Inter',system-ui,sans-serif}
.jc-dd.is-sm .jc-dd-c{flex-basis:14px;width:14px;height:14px}

/* Inline: a value inside a sentence rather than a field in a form. No box, a
   dotted underline to say it is editable, and the chevron only on hover — so
   a row of these reads as prose instead of as a row of controls. */
.jc-dd.is-inline{
  position:relative;
  width:auto;height:auto;padding:0 0 1px;gap:0;
  border:0;border-bottom:1.5px dotted var(--border-strong);border-radius:0;
  background:transparent;color:var(--text-primary);
  font:600 13px/1.5 'Inter',system-ui,sans-serif;
}
/* Out of the flow entirely. In the flow it reserved its 12px whether or not
   it was visible, so the underline ran past the last letter and the sentence
   read "2 days , then message" — a hidden control was spacing the prose. It
   hangs off the right edge instead, and nothing moves when it fades in. */
.jc-dd.is-inline .jc-dd-c{
  position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:3px;
  flex-basis:12px;width:12px;height:12px;
  opacity:0;transition:opacity .14s ease}
.jc-dd.is-inline:hover,.jc-dd.is-inline.is-open{
  color:var(--brand-blue);border-bottom-color:var(--brand-blue)}
.jc-dd.is-inline:hover .jc-dd-c,.jc-dd.is-inline.is-open .jc-dd-c{opacity:1}
.jc-dd.is-inline.is-open .jc-dd-c{transform:translateY(-50%) rotate(180deg)}
.jc-dd.is-inline:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;
  border-radius:4px}

/* Icon: a trigger in a toolbar, where a labelled box would be a third
   outlined thing in a row that already has enough. No border, no chevron,
   no label — the tooltip carries the name. */
.jc-dd.is-icon{
  width:30px;height:30px;padding:0;gap:0;flex:0 0 30px;
  border:0;border-radius:8px;background:transparent;
  color:var(--text-secondary);
  display:inline-grid;place-items:center;
}
.jc-dd.is-icon .jc-dd-v,.jc-dd.is-icon .jc-dd-c{display:none}
.jc-dd.is-icon .jc-dd-ic{display:block;width:16px;height:16px}
.jc-dd.is-icon .jc-dd-ic svg{width:16px;height:16px;display:block}
.jc-dd.is-icon:hover{background:var(--surface-alt);color:var(--text-primary)}
.jc-dd.is-icon.is-open{background:var(--brand-blue-soft);color:var(--brand-blue);box-shadow:none}
.jc-dd.is-icon:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px;box-shadow:none}
body.theme-dark .jc-dd.is-icon{background:transparent;color:var(--text-secondary)}
body.theme-dark .jc-dd.is-icon:hover{background:var(--surface-panel);color:var(--text-primary)}
body.theme-dark .jc-dd.is-icon.is-open{background:var(--brand-blue-soft);color:var(--brand-blue)}

/* ── The menu ──
   position:fixed and appended to <body>, so it is never clipped by a scrolling
   panel or a card's overflow — which is the usual reason a hand-rolled
   dropdown has to be abandoned. dropdown.js places it. */
.jc-dd-menu{
  position:fixed;z-index:9600;
  display:none;overflow-y:auto;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:11px;
  box-shadow:0 12px 32px -8px rgba(16,24,40,.18),0 4px 10px -4px rgba(16,24,40,.10);
  font-family:'Inter',system-ui,sans-serif;
  scrollbar-width:thin;
}
.jc-dd-menu.is-open{display:block}

.jc-dd-item{
  display:flex;align-items:center;gap:9px;
  width:100%;min-height:34px;padding:7px 9px;
  border:0;border-radius:7px;background:none;
  color:var(--text-primary);
  font:400 13.5px/1.35 'Inter',system-ui,sans-serif;
  font-family:'Inter',system-ui,sans-serif;
  text-align:left;cursor:pointer;
}
.jc-dd-item span{flex:1 1 auto;min-width:0;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* While the menu is being measured it lays out free, so nothing is clipped
   and the width comes out of the longest label. */
.jc-dd-menu[style*="width: auto"] .jc-dd-item span{overflow:visible;text-overflow:clip}
.jc-dd-item em{flex:0 0 auto;font-style:normal;font-size:12px;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums}
.jc-dd-item svg{flex:0 0 14px;width:14px;height:14px;color:var(--brand-blue)}
/* Hover and keyboard focus land on the same class, so the highlight never
   splits in two when you start on the mouse and finish on the keyboard. */
.jc-dd-item:hover,.jc-dd-item.is-active{background:var(--surface-alt)}
.jc-dd-item.is-on{font-weight:500}

/* Destructive. Red on the label, not on the whole row — a red band would read
   as an error that has already happened rather than one you can still avoid.
   The glyph chip warms with it so the row is one thing. */
.jc-dd-item.is-danger{color:var(--danger,#B42318)}
.jc-dd-item.is-danger .jc-dd-li{background:#FEF3F2}
.jc-dd-item.is-danger .jc-dd-li svg{color:#B42318}
.jc-dd-item.is-danger:hover,.jc-dd-item.is-danger.is-active{background:#FEF3F2}

@media (prefers-reduced-motion:reduce){
  .jc-dd,.jc-dd-c{transition:none}
}

/* Dark: surfaces come from the tokens; the shadow has to be restated because
   a light-mode shadow is invisible on a dark ground, and theme-customiser.css
   flattens span colour to inherit at (0,1,2), so the secondary text in an
   item has to say itself again. */
body.theme-dark .jc-dd-menu{
  background:var(--surface-alt);
  border-color:var(--border-strong);
  box-shadow:0 16px 40px -8px rgba(0,0,0,.6),0 4px 12px -4px rgba(0,0,0,.5);
}
body.theme-dark .jc-dd-item{color:var(--text-primary)}
body.theme-dark .jc-dd-item.is-danger{color:#FDA29B}
body.theme-dark .jc-dd-item.is-danger .jc-dd-li{background:rgba(180,35,24,.22)}
body.theme-dark .jc-dd-item.is-danger .jc-dd-li svg{color:#FDA29B}
body.theme-dark .jc-dd-item.is-danger:hover,
body.theme-dark .jc-dd-item.is-danger.is-active{background:rgba(180,35,24,.22)}
body.theme-dark .jc-dd-item em{color:var(--text-tertiary)}
body.theme-dark .jc-dd-item:hover,
body.theme-dark .jc-dd-item.is-active{background:var(--surface-panel)}
body.theme-dark .jc-dd{background:var(--surface);color:var(--text-primary)}
body.theme-dark .jc-dd.is-empty .jc-dd-v{color:var(--text-tertiary)}

/* ── A mark on an option ──────────────────────────────────────────────────
   Some lists are of things that have a face — an integration has a logo, a
   segment has a glyph. Carried on the row and on the closed trigger, so the
   field is read in one glance rather than one word at a time.

   Selectors are two-deep on purpose: `.jc-dd-item span` sets flex:1 on every
   span in a row, and `.jc-dd-item svg` paints every glyph brand blue. A mark
   is neither of those things and has to say so louder. */
.jc-dd-item .jc-dd-li,
.jc-dd > .jc-dd-li{
  flex:0 0 20px;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--surface-alt);
}
.jc-dd-item .jc-dd-li img,
.jc-dd > .jc-dd-li img{width:13px;height:13px;display:block}
.jc-dd-item .jc-dd-li svg,
.jc-dd > .jc-dd-li svg{
  flex:none;width:13px;height:13px;display:block;color:var(--text-secondary);
}
.jc-dd-item .jc-dd-li .jc-dd-glyph,
.jc-dd > .jc-dd-li .jc-dd-glyph{display:grid;place-items:center;flex:none}

body.theme-dark .jc-dd-item .jc-dd-li,
body.theme-dark .jc-dd > .jc-dd-li{background:var(--surface-panel)}
body.theme-dark .jc-dd-item .jc-dd-li svg,
body.theme-dark .jc-dd > .jc-dd-li svg{color:var(--text-secondary)}