/* ---------------------------------------------------------------
   Luna Creative — page chrome, hover states and <image-slot> parity.

   The source .dc.html files carry all layout as inline style="" and
   express hover with a custom style-hover="" attribute that the Claude
   Design runtime (support.js) applies at runtime. Inline styles are kept
   verbatim in the templates so base rendering is identical; the hover
   halves are reproduced here. They need !important purely because a
   class rule cannot otherwise beat an inline style declaration.
   --------------------------------------------------------------- */

/* --- document ------------------------------------------------- */
html.luna-html{background:var(--cream-500)}
body.luna-page{margin:0;background:var(--cream-500)}
@media (prefers-reduced-motion: no-preference){html.luna-html{scroll-behavior:smooth}}
body.luna-page a{color:var(--link-on-light)}
body.luna-page a:hover{color:var(--blush-600)}
body.luna-page a:focus-visible,
body.luna-page button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
body.luna-page img{max-width:100%;height:auto}

/* Logged-in admin bar must not sit over the sticky header. */
body.luna-page.admin-bar .lc-header{top:32px}
@media screen and (max-width:782px){
  body.luna-page.admin-bar .lc-header{top:46px}
}

/* --- hover states lifted out of style-hover="" ----------------- */

/* nav links: ink-500 -> blush-700 */
.lc-nav-a:hover{color:var(--blush-700) !important}

/* pill buttons: blush-500 -> blush-600, text stays cream */
.lc-btn-primary:hover{
  background:var(--action-primary-bg-hover) !important;
  color:var(--action-primary-text) !important;
}

/* inline text CTAs on cream: blush-700 -> blush-600 */
.lc-cta-inline:hover{color:var(--blush-600) !important}

/* links on ink that lighten to blush-200 */
.lc-link-blush200:hover{color:var(--blush-200) !important}

/* cream links that warm to blush-500 */
.lc-link-blush500:hover{color:var(--blush-500) !important}

/* muted ink-100 links that brighten to cream */
.lc-link-cream:hover{color:var(--cream-500) !important}

/* --- <image-slot> empty-state parity ---------------------------
   Mirrors the shadow-DOM rules in image-slot.js: .frame, .ring,
   .empty, .cap, .sub. color is inherited on purpose — that is what
   the component does, so the chrome takes the surrounding text
   colour rather than a baked-in grey.
   --------------------------------------------------------------- */
.lc-slot{
  position:absolute;inset:0;
  font:13px/1.3 system-ui,-apple-system,sans-serif;
  color:inherit;
}
.lc-slot-frame{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}
.lc-slot-ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed currentColor;opacity:.35}
.lc-slot-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:12px;box-sizing:border-box;user-select:none;
}
.lc-slot-empty svg{opacity:.45;flex:none}
.lc-slot-cap{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75}
.lc-slot-sub{font-size:11px;opacity:.75}
.lc-slot-sub u{text-underline-offset:2px}

/* shape="rounded" radius="8" */
.lc-slot--rounded .lc-slot-frame,
.lc-slot--rounded .lc-slot-ring{border-radius:8px}

/* --- work filter ------------------------------------------------
   The source sets these values as inline styles recomputed per render.
   Driving them from CSSOM here is not an option: assigning a var()
   value through element.style does not take effect in every engine
   (the inline value reads back correctly but never reaches the
   computed style), which left the active pill stuck on "All". The
   declarations below are identical to the source's computed result;
   only the active state moves, via a class.
   --------------------------------------------------------------- */
.lc-filter-btn{
  font:600 13px var(--font-sans);
  padding:9px 20px;
  border-radius:var(--radius-pill);
  border:1px solid var(--ink-100);
  background:transparent;
  color:var(--ink-500);
  cursor:pointer;
  transition:all .15s ease;
}
.lc-filter-btn.is-active{
  border-color:var(--blush-700);
  background:var(--blush-700);
  color:var(--cream-500);
}

.lc-card[hidden]{display:none !important}