/* Canvas header buttons restored to pre-placeholder styling (8px radius, 14px icons, natural widths).
   Treat these values as visual contract locks; update skeleton rules if they change. */
:root{
  --header-actions-gap: 12px;
  --header-btn-radius: 8px;
  --header-primary-px: 12px;
  --header-primary-py: 8px;
  --header-icon-btn-px: 8px;
  --header-icon-btn-py: 8px;
  --header-icon-box: 14px;
  --canvas-header-gap-y: 16px;
}

.canvas-header-slot{
  display:block;
  position:relative;
  min-height:var(--canvas-header-h, 72px);
}

.canvas .canvas-header-slot{
  min-height:auto;
}

.canvas-header[data-skeleton="true"]{
  pointer-events:none;
  user-select:none;
}

.canvas-header[data-skeleton="true"] .canvas-header__current,
.canvas-header[data-skeleton="true"] .canvas-header__crumb,
.canvas-header[data-skeleton="true"] .canvas-header__title{
  color:transparent;
}

.canvas-header[data-skeleton="true"] .canvas-header__current,
.canvas-header[data-skeleton="true"] .canvas-header__crumb,
.canvas-header[data-skeleton="true"] .canvas-header__title{
  background:color-mix(in srgb, var(--muted), transparent 75%);
  border-radius:999px;
}

.canvas-header[data-skeleton="true"] .canvas-header__title{
  border-radius:8px;
}

.canvas-header[data-skeleton="true"] .btn{
  position:relative;
  background:color-mix(in srgb, var(--card), transparent 10%);
  border:1px solid color-mix(in srgb, var(--border), transparent 40%);
  color:transparent;
}

.canvas-header[data-skeleton="true"] .btn .label{
  opacity:0;
}

@media (prefers-reduced-motion: no-preference){
  .canvas-header[data-skeleton="true"] .btn::after,
  .canvas-header[data-skeleton="true"] .canvas-header__title::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform:translateX(-100%);
    animation:shimmer 1.2s linear infinite;
  }
}

@keyframes shimmer{
  to{
    transform:translateX(100%);
  }
}

.canvas-header{
  position:sticky;
  top:0;
  z-index:2;
  backdrop-filter:saturate(120%) blur(6px);
  background:color-mix(in srgb, var(--bg), transparent 35%);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  gap:var(--gap);
}

.canvas-header__left{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.canvas-header__breadcrumb{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:0.01em;
  line-height:1.2;
  text-transform:lowercase;
  position:relative;
}

.canvas-header__crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.canvas-header__crumb{
  display:flex;
  align-items:center;
  gap:8px;
  color:inherit;
}

.canvas-header__link{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}

.canvas-header__link:hover,
.canvas-header__link:focus-visible{
  color:var(--ink);
  text-decoration:none;
}

.canvas-header__separator{
  color:color-mix(in srgb, var(--muted), transparent 25%);
  font-weight:400;
}

.canvas-header__crumb--current{
  color:var(--ink);
  font-weight:600;
}

.canvas-header__crumb--current .canvas-header__link{
  pointer-events:none;
  cursor:default;
  text-decoration:none;
  color:inherit;
}

.canvas-header__current{
  pointer-events:none;
}

.canvas-header__title{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  position:relative;
  overflow:hidden;
}

.canvas-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--header-actions-gap);
  flex-wrap:nowrap;
}

.canvas-header__record-group{
  display:contents;
}

.canvas-header__record-group[data-segmented="true"]{
  display:inline-flex;
  align-items:stretch;
  border-radius:var(--header-btn-radius);
  overflow:hidden;
  box-shadow:var(--header-btn-shadow, none);
}

.canvas-header__record-group[data-segmented="true"] .canvas-header__btn{
  border-radius:0;
  box-shadow:none;
}

.canvas-header__record-group .canvas-header__btn--pause{
  display:none;
  background:var(--surface-muted);
  color:var(--ink);
}

.canvas-header__record-group[data-show-pause="true"] .canvas-header__btn--pause{
  display:inline-flex;
}

.canvas-header__record-group[data-segmented="true"][data-show-pause="true"] .canvas-header__btn--pause{
  border-top-left-radius:var(--header-btn-radius);
  border-bottom-left-radius:var(--header-btn-radius);
  border-right:1px solid rgba(255,255,255,0.12);
}

.canvas-header__record-group[data-segmented="true"][data-show-pause="true"] .btn--primary{
  border-top-right-radius:var(--header-btn-radius);
  border-bottom-right-radius:var(--header-btn-radius);
}

.canvas-header__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  overflow:hidden;
  padding:var(--header-primary-py) var(--header-primary-px);
  border-radius:var(--header-btn-radius);
  min-height:32px;
  box-sizing:border-box;
  white-space:nowrap;
}

.canvas-header__btn .icon{
  inline-size:var(--header-icon-box);
  block-size:var(--header-icon-box);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--header-icon-box);
}

.canvas-header__btn .icon i[data-lucide],
.canvas-header__btn .icon svg{
  width:var(--header-icon-box);
  height:var(--header-icon-box);
  stroke-width:1.75;
}

.canvas-header__btn .label{
  display:inline-flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  line-height:1;
}

.btn--icon-only .label{
  display:none;
}

.canvas-header[data-variant="page"] .canvas-header__actions{
  display:none;
}

.canvas-header[data-variant="page"] .btn--share,
.canvas-header[data-variant="people"] .btn--share{
  display:none;
}

.canvas-header[data-variant="page"] .btn--primary{
  display:none;
}

.canvas .canvas-header{
  position:relative;
  top:auto;
  backdrop-filter:none;
  background:transparent;
  border-bottom:none;
  min-height:auto;
  padding:var(--canvas-header-gap-y) 0;
  margin-bottom:0;
}