/* hea_editor_chrome.css
 * Shared chrome for HEA editor pages (hea_eu_*_editor.html):
 * context bar, status chip, lifecycle meta, and the button system.
 * Loaded after hea_app.css and before each page's inline <style> block,
 * so page-specific rules win ties. Design tokens come from hea_tokens.css.
 */

.editor-context-shell{
  max-width:var(--page-w);
  width:100%;
  margin:0 auto;
  padding:0 var(--app-pad,16px) 12px;
  box-sizing:border-box;
  min-width:0;
}
.editor-context-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 16px 16px;
  background:color-mix(in oklab, var(--surface) 96%, var(--brand-orange) 4%);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
.editor-context-copy{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.editor-context-kicker{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--brand-orange);
  text-transform:uppercase;
  white-space:nowrap;
}
.editor-context-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.editor-context-chip--live{
  border-color:color-mix(in oklab, var(--ok,#20a35a) 35%, var(--line));
  color:color-mix(in oklab, var(--ok,#16a34a) 85%, var(--ink,#0f172a));
  background:color-mix(in oklab, var(--ok,#20a35a) 12%, var(--surface));
}
.editor-context-chip--draft{
  border-color:color-mix(in oklab, var(--muted,#8b93a3) 35%, var(--line));
  color:var(--muted,#636b7d);
  background:color-mix(in oklab, var(--muted,#8b93a3) 10%, var(--surface));
}
.editor-context-chip--archived{
  border-color:color-mix(in oklab, var(--ink,#111111) 20%, var(--line));
  color:var(--ink,#111111);
  background:color-mix(in oklab, var(--ink,#111111) 8%, var(--surface));
}
.editor-context-chip--revoked{
  border-color:color-mix(in oklab, var(--destructive,#dc2626) 35%, var(--line));
  color:color-mix(in oklab, var(--destructive,#dc2626) 85%, var(--ink));
  background:color-mix(in oklab, var(--destructive,#dc2626) 12%, var(--surface));
}
.editor-context-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:flex-end;
}
.editor-context-bar select.select{
  width:420px !important;
  min-width:420px !important;
  max-width:420px !important;
  flex:0 0 420px !important;
  height:38px !important;
  padding:8px 12px !important;
  font-size:15px !important;
  box-sizing:border-box;
}
@media (max-width:760px){
  .editor-context-bar{
    flex-direction:column;
    align-items:stretch;
    border-radius:0 0 14px 14px;
  }
  .editor-context-copy,
  .editor-context-controls{
    width:100%;
  }
  .editor-context-controls{
    justify-content:stretch;
  }
  .editor-context-bar select.select{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 auto !important;
  }
}

/* The .hei icon base + semantic tints live in styles/hea_app.css (app-wide). */

/* Lifecycle breadcrumb (draft/live/archived) */
.lifecycle-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  margin:6px 2px 12px;
  opacity:.9;
}
.lifecycle-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  border:1px solid color-mix(in oklab, var(--ink) 20%, transparent);
}
.lifecycle-dot--live{ background:var(--ok,#20a35a); }
.lifecycle-dot--draft{ background:var(--muted,#8b93a3); }
.lifecycle-dot--archived{ background:var(--ink,#111111); }
.lifecycle-dot--revoked{ background:var(--destructive,#dc2626); }
.lifecycle-sep{ opacity:.55; }

/* Button system: 38px default pill, 36px compact, brand/danger variants */
.btn{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line,#e5e7eb);
  background:var(--surface,#fff);
  color:var(--ink,#0f172a);
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.06));
}
.btn:hover{ box-shadow:var(--shadow-md,0 6px 14px rgba(0,0,0,.10)); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(90deg,var(--brand1,#ff5f6d),var(--brand2,#ffc371));
  color:#fff;
  border:none;
}
.btn-secondary{
  background:var(--surface,#fff);
  border:1px solid var(--brand-orange,#ff7a00);
  color:var(--brand-orange,#ff7a00);
}
.btn-secondary:hover{ background:color-mix(in oklab, var(--brand-orange,#ff7a00) 8%, var(--surface,#fff)); }
.btn-ghost{ background:var(--surface,#fff); }
.btn-danger{
  border-color:color-mix(in oklab,var(--destructive,#d7263d) 30%,var(--line,#e5e7eb));
  color:color-mix(in oklab,var(--destructive,#d7263d) 85%,var(--ink,#0f172a));
}
.btn-sm{ height:36px; padding:0 12px; font-size:12px; }

/* ---------- Boot skeleton (loading-state parity) ---------- */
/* Shown only while <body class="loading"> is set. The per-page
   body.loading{visibility:hidden} rule hides real content; this overlay
   re-asserts visibility:visible so boot shows a theme-aware skeleton instead
   of a blank page. Page boot JS already removes .loading when ready. */
.editor-boot{ display:none; }
body.loading .editor-boot{
  display:block;
  visibility:visible;
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--bg,#fff);
}
.editor-boot-inner{
  width:min(1080px,92vw);
  margin:clamp(48px,10vh,110px) auto 0;
}
.skeleton{
  background:linear-gradient(90deg, var(--surface) 25%, color-mix(in oklab, var(--ink) 5%, var(--surface)) 50%, var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--radius-md,10px);
}
@keyframes shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.skeleton-card{
  height:140px;
  margin-bottom:12px;
  border-radius:var(--radius-lg,14px);
  border:1px solid var(--line);
}
@media (prefers-reduced-motion: reduce){
  .skeleton{ animation:none; }
}

/* Disabled Publish / Discard Draft: hover + keyboard focus on the wrap (native
   title on disabled buttons often never shows). Button stays disabled. */
.hea-disabled-control-wrap{
  display:inline-flex;
  align-items:center;
  max-width:100%;
}
.hea-disabled-control-wrap[tabindex="0"]{
  cursor:not-allowed;
  outline:none;
}
.hea-disabled-control-wrap[tabindex="0"]:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand-orange) 70%, var(--line));
  outline-offset:2px;
  border-radius:var(--radius-md, 10px);
}
.hea-disabled-control-wrap button:disabled{
  pointer-events:none;
}