/* ═══ Button ══════════════════════════════════════════════════════════════
   One geometry, taken from the Call Logs screen because those are the buttons
   people see most. Measured there, not guessed — and worth writing down what
   the measuring found, because that screen is not internally consistent:

     filter chip      14/500   h32   pad 12   r8
     Archived calls   13/500   h32   pad 12   r7
     pagination       14/500   h32   pad  6   r8
     primary          13/500   h34   pad 16   r8

   The component takes the majority on every axis: 32 tall, 12 of side padding,
   8 radius, and 14 type — the filter chips and the pagination, which are the
   buttons that screen is mostly made of. The two 13s are the odd ones out.

     height             32px
     padding            0 12px
     type               14px / 500
     radius             8px
     gap, icon to label 8px
     gap, button to     10px
     button

   The create flows had drifted: .ct-btn-ghost ships at 34px/14px,
   .an-btn-primary at 36px/13px, and the bar was overriding both to 36/13 to
   stop them disagreeing with each other. They all draw from here now, so the
   next screen that needs a button does not have to re-derive it.

   Held as custom properties rather than literals so a change is one edit and
   so .jc-btn-group can space itself by the same number the buttons are built
   from.

   Note on the existing classes: .ct-btn-ghost and .an-btn-primary are used
   across the rest of the app and are deliberately left alone. This is the
   component the create flows use; adopting it elsewhere is a separate pass.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --btn-h:32px;
  --btn-pad-x:12px;
  --btn-radius:8px;
  --btn-size:14px;
  --btn-icon-gap:8px;
  --btn-space:10px;
}

.jc-btn{
  appearance:none;box-sizing:border-box;
  height:var(--btn-h);padding:0 var(--btn-pad-x);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-icon-gap);
  border:1px solid transparent;border-radius:var(--btn-radius);
  font:500 var(--btn-size)/1 'Inter',sans-serif;
  white-space:nowrap;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.jc-btn svg{flex:0 0 16px;width:16px;height:16px;display:block}
.jc-btn:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}
.jc-btn[disabled]{cursor:not-allowed}

/* Outlined. #344054 is the colour the Call Logs chips use — a step in from
   --text-primary, which keeps a row of them from reading as headings. */
.jc-btn-ghost{border-color:var(--border);background:var(--surface);color:#344054}
.jc-btn-ghost:hover:not([disabled]){background:var(--surface-alt)}
.jc-btn-ghost[disabled]{opacity:.45}

/* Filled. Disabled dims rather than turning grey: a grey pill reads as dead,
   a dimmed one as not-yet. */
.jc-btn-primary{background:var(--brand-blue);color:#FFFFFF}
.jc-btn-primary:hover:not([disabled]){background:#003BB3}
.jc-btn-primary[disabled]{opacity:.45}

/* No frame. For actions that sit inside content rather than in a bar, where a
   border would give them the weight of a primary action. */
.jc-btn-text{background:none;border-color:transparent;color:var(--text-secondary)}
.jc-btn-text:hover:not([disabled]){color:var(--brand-blue)}
.jc-btn-text[disabled]{opacity:.45}
.jc-btn-text[disabled]:hover{color:var(--text-secondary)}

/* Buttons sitting together. Spacing is part of the component, not something
   each bar decides again. */
.jc-btn-group{display:inline-flex;align-items:center;gap:var(--btn-space)}

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

body.theme-dark .jc-btn-ghost{
  background:var(--surface-alt);border-color:var(--border-strong);color:var(--text-primary);
}
body.theme-dark .jc-btn-ghost:hover:not([disabled]){background:var(--surface-panel)}
body.theme-dark .jc-btn-text{color:var(--text-secondary)}
body.theme-dark .jc-btn-primary{color:#FFFFFF}