/* =============================================================
   FALMIS — TABS, CHIPS, BADGES, SEGMENTED
   Requires falmis-tokens.css
   ============================================================= */

/* =============================================================
   TABS — switching a view. Not navigation.
   ============================================================= */

.fm-tabs{
  display:flex;
  gap:var(--fm-space-1);
  border-block-end:1px solid var(--fm-border-subtle);
  overflow-x:auto;
  scrollbar-width:none;
}
.fm-tabs::-webkit-scrollbar{ display:none; }

.fm-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--fm-space-2);
  height:var(--fm-control-md);
  padding-inline:var(--fm-space-4);
  border:none;
  background:none;
  color:var(--fm-text-muted);
  font-family:var(--fm-font);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-tab:hover{ color:var(--fm-text-body); }
.fm-tab:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:-2px; border-radius:var(--fm-radius-sm); }

.fm-tab[aria-selected="true"]{ color:var(--fm-text-primary); }
.fm-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  inset-inline:var(--fm-space-3);
  inset-block-end:-1px;
  height:2px;
  border-radius:var(--fm-radius-full);
  background:var(--fm-gradient-button);
}
.fm-tab:disabled{ color:var(--fm-text-disabled); cursor:not-allowed; }

/* pill variant — sits on a surface rather than under a rule */
.fm-tabs--pill{
  border:none;
  gap:var(--fm-space-1);
  padding:var(--fm-space-1);
  background:var(--fm-surface-2);
  border-radius:var(--fm-radius-full);
  display:inline-flex;
}
.fm-tabs--pill .fm-tab{
  height:36px;
  border-radius:var(--fm-radius-full);
  transition:background var(--fm-dur-fast) var(--fm-ease-out),
             color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-tabs--pill .fm-tab::after{ display:none; }
.fm-tabs--pill .fm-tab[aria-selected="true"]{
  background:var(--fm-gradient-button);
  color:var(--fm-text-on-brand);
  box-shadow:inset 0 1px 0 var(--fm-highlight-top);
}

.fm-tabpanel{ padding-block-start:var(--fm-space-5); }
.fm-tabpanel[hidden]{ display:none; }

/* =============================================================
   SEGMENTED — a two or three way switch, all options visible
   ============================================================= */

.fm-seg{
  display:inline-flex;
  padding:3px;
  background:var(--fm-surface-2);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md);
}
.fm-seg button{
  height:36px;
  padding-inline:var(--fm-space-5);
  border:none;
  background:none;
  border-radius:calc(var(--fm-radius-md) - 3px);
  color:var(--fm-text-muted);
  font-family:var(--fm-font);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  cursor:pointer;
  transition:background var(--fm-dur-fast) var(--fm-ease-out),
             color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-seg button:hover{ color:var(--fm-text-body); }
.fm-seg button[aria-pressed="true"]{
  background:var(--fm-surface-3);
  color:var(--fm-text-primary);
  box-shadow:var(--fm-shadow-sm);
}
.fm-seg button:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:2px; }

/* =============================================================
   CHIPS — a filter or a selection. Interactive.
   ============================================================= */

.fm-chips{ display:flex; flex-wrap:wrap; gap:var(--fm-space-2); }

.fm-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--fm-space-2);
  height:36px;
  padding-inline:var(--fm-space-4);
  border-radius:var(--fm-radius-full);
  border:1px solid var(--fm-border);
  background:var(--fm-surface-2);
  color:var(--fm-text-body);
  font-family:var(--fm-font);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--fm-dur-fast) var(--fm-ease-out),
             border-color var(--fm-dur-fast) var(--fm-ease-out),
             color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-chip:hover{ border-color:var(--fm-border-accent); color:var(--fm-text-primary); }
.fm-chip:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:2px; }

.fm-chip[aria-pressed="true"],
.fm-chip.is-on{
  background:var(--fm-tint-violet);
  border-color:var(--fm-border-accent);
  color:var(--fm-text-accent);
}
.fm-chip:disabled{ color:var(--fm-text-disabled); cursor:not-allowed; border-color:var(--fm-border-subtle); }

/* a removable chip */
.fm-chip__x{
  display:grid;
  place-content:center;
  width:18px; height:18px;
  margin-inline-end:calc(var(--fm-space-2) * -1);
  border-radius:var(--fm-radius-full);
  background:rgba(255,255,255,.10);
  color:inherit;
  font-size:11px;
  line-height:1;
  border:none;
  cursor:pointer;
}
.fm-chip__x:hover{ background:rgba(255,255,255,.20); }

/* a leading dot, for a status chip */
.fm-chip__dot{ width:7px; height:7px; border-radius:var(--fm-radius-full); background:currentColor; flex:none; }

/* =============================================================
   BADGES — a label. Never interactive.
   ============================================================= */

.fm-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:22px;
  padding-inline:var(--fm-space-3);
  border-radius:var(--fm-radius-full);
  border:1px solid var(--fm-border);
  background:var(--fm-surface-3);
  color:var(--fm-text-body);
  font-size:var(--fm-text-2xs);
  font-weight:var(--fm-weight-bold);
  line-height:1;
  white-space:nowrap;
}
.fm-badge--success{ color:var(--fm-success); background:var(--fm-success-bg); border-color:var(--fm-border-success); }
.fm-badge--warning{ color:var(--fm-warning); background:var(--fm-warning-bg); border-color:rgba(232,184,75,.40); }
.fm-badge--error  { color:var(--fm-error);   background:var(--fm-error-bg);   border-color:var(--fm-border-error); }
.fm-badge--info   { color:var(--fm-info);    background:var(--fm-info-bg);    border-color:rgba(96,165,250,.40); }
.fm-badge--brand  { color:var(--fm-text-on-brand); background:var(--fm-gradient-button);
                    border-color:var(--fm-border-strong); box-shadow:inset 0 1px 0 var(--fm-highlight-top); }

/* a count. Tabular so it does not jump between 1 and 8. */
.fm-badge--count{
  min-width:20px;
  height:20px;
  padding-inline:5px;
  justify-content:center;
  font-variant-numeric:tabular-nums;
}

/* a dot with no number, for "something changed" */
.fm-badge--dot{
  width:8px; height:8px; min-width:0; height:8px;
  padding:0; border:none;
  background:var(--fm-error);
}

/* =============================================================
   RULES
   · A chip is a control. A badge is a label. If it can be
     clicked it is a chip, no exceptions.
   · Tabs switch a view in place. If it changes the URL and the
     page, it is navigation and belongs in the navbar.
   · Selected state is never colour alone — tabs get a bar,
     chips get a fill and a border.
   · Badge text is 11px and bold. That is the one place the
     system goes below 12px, and only because the content is one
     or two words at high contrast.
   · Count badges use tabular numerals.
   ============================================================= */