/* Browser-style page tabs. One desktop row; panels remain mounted. */
.hj-tabs {
  box-sizing:border-box;display:flex;align-items:flex-end;gap:0;flex-wrap:nowrap;
  width:max-content;position:relative;z-index:1;margin-bottom:-1px;
  padding:8px 12px 0;border:1px solid var(--ui-border);border-bottom:0;
  border-radius:12px 12px 0 0;background:var(--ui-surface-container);
}
.hj-tabs .hj-tab {
  position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:0;height:44px;margin:0;padding:10px 16px;border:0;border-radius:12px 12px 0 0;
  background:transparent;color:var(--ui-muted);font:inherit;font-size:14px;line-height:24px;font-weight:400;white-space:nowrap;cursor:pointer;
}
.hj-tabs .hj-tab:hover:not(:disabled) {background:var(--ui-surface-container-high);color:var(--ui-text);}
.hj-tabs .hj-tab[aria-selected="true"],
.hj-tabs .hj-tab[aria-selected="true"]:hover {
  z-index:1;background:var(--ui-surface);color:var(--ui-text);
}
/* The curved feet visually join the selected tab to its content sheet. */
.hj-tabs:not(.hj-tabs--underline):not(.hj-tabs--navigator) .hj-tab[aria-selected="true"]::before,
.hj-tabs:not(.hj-tabs--underline):not(.hj-tabs--navigator) .hj-tab[aria-selected="true"]::after {
  content:'';position:absolute;bottom:0;width:12px;height:12px;pointer-events:none;
}
.hj-tabs:not(.hj-tabs--underline):not(.hj-tabs--navigator) .hj-tab[aria-selected="true"]::before {
  left:-12px;border-radius:0 0 12px 0;box-shadow:4px 4px 0 4px var(--ui-surface);
}
.hj-tabs:not(.hj-tabs--underline):not(.hj-tabs--navigator) .hj-tab[aria-selected="true"]::after {
  right:-12px;border-radius:0 0 0 12px;box-shadow:-4px 4px 0 4px var(--ui-surface);
}
/* Separate only adjacent inactive tabs; active tabs use their curved edges. */
.hj-tabs:not(.hj-tabs--underline):not(.hj-tabs--navigator) .hj-tab[aria-selected="false"]:has(+ .hj-tab[aria-selected="false"])::after {
  content:'';position:absolute;right:0;top:12px;width:1px;height:20px;
  background:var(--ui-border);pointer-events:none;
}
.hj-tabs .hj-tab:focus-visible {outline:2px solid var(--ui-primary);outline-offset:-5px;}
.hj-tabs .hj-tab:disabled {color:var(--ui-disabled-text);cursor:default;}
[role="tabpanel"][hidden] {display:none !important;}


/* Light secondary navigation inside a white content card. */
.hj-tabs.hj-tabs--underline {
  width:auto;gap:8px;margin:0;padding:0;border:0;
  border-bottom:1px solid var(--ui-border);border-radius:0;background:transparent;
}
.hj-tabs.hj-tabs--underline .hj-tab {
  height:44px;min-width:0;padding:10px 16px;border-radius:0;
  background:transparent;color:var(--ui-muted);
}
.hj-tabs.hj-tabs--underline .hj-tab:hover:not(:disabled) {
  background:transparent;color:var(--ui-primary);
}
.hj-tabs.hj-tabs--underline .hj-tab[aria-selected="true"] {
  background:transparent;color:var(--ui-primary);
}
.hj-tabs-indicator {
  position:absolute;bottom:-1px;left:0;height:2px;
  background:var(--ui-primary);pointer-events:none;
}
.hj-tabs-indicator.is-ready {
  transition:transform 200ms cubic-bezier(.2,0,0,1),width 200ms cubic-bezier(.2,0,0,1);
}
@media (prefers-reduced-motion:reduce) {
  .hj-tabs-indicator.is-ready {transition:none;}
}

/* Sliding segmented navigator; shares indicator measurement and keyboard behavior. */
.hj-tabs.hj-tabs--navigator {
  width:max-content;gap:4px;align-items:center;margin:0;padding:0;border:1px solid var(--ui-border);
  border-radius:var(--ui-radius,8px);background:var(--ui-surface);
}
.hj-tabs.hj-tabs--navigator .hj-tab {
  z-index:1;padding:9px 15px;border-radius:var(--ui-radius,8px);background:transparent;color:var(--ui-text);
  transition:color 200ms cubic-bezier(.2,0,0,1);
}
.hj-tabs.hj-tabs--navigator .hj-tab:hover:not(:disabled) {
  background:transparent;color:var(--ui-primary);
}
.hj-tabs.hj-tabs--navigator .hj-tab[aria-selected="true"],
.hj-tabs.hj-tabs--navigator .hj-tab[aria-selected="true"]:hover {
  background:transparent;color:var(--ui-on-primary);
}
.hj-tabs.hj-tabs--navigator .hj-tab[aria-selected="true"]:focus-visible {
  outline-color:var(--ui-on-primary);
}
.hj-tabs--navigator .hj-tabs-indicator {
  z-index:0;top:0;bottom:0;height:auto;border-radius:var(--ui-radius,8px);
  background:var(--ui-primary);
}
@media (prefers-reduced-motion:reduce) {
  .hj-tabs.hj-tabs--navigator .hj-tab {transition:none;}
}