/* Shared Web creation header. Existing dialogs keep their scroll/focus owners. */
[data-web-composer] { --composer-header-ink:var(--account-text,#171719); --composer-header-surface:var(--account-surface,#fff); }
body.night-mode [data-web-composer] { --composer-header-ink:#eeeaf6; --composer-header-surface:#17151d; }
[data-web-composer] > .section-head { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
[data-web-composer] form { position:relative; }
[data-web-composer] .web-composer-header { position:sticky;top:0;z-index:5;display:grid;grid-template-columns:60px minmax(0,1fr) 70px;align-items:center;gap:4px;grid-column:1/-1;width:100%;min-height:56px;margin:0 0 16px;padding:4px 0;box-sizing:border-box;border-bottom:1px solid rgba(128,120,148,.16);background:var(--composer-header-surface);color:var(--composer-header-ink); }
[data-web-composer] .web-composer-leading { display:flex;align-items:center;min-width:0; }
[data-web-composer] .web-composer-header button { display:grid;place-items:center;min-width:44px;min-height:44px;width:auto;height:auto;margin:0;padding:6px;border:0;border-radius:14px;background:transparent;color:var(--luca-purple,#7045ff);font:650 13px/1.25 system-ui;box-shadow:none;text-decoration:none;white-space:nowrap; }
[data-web-composer] .web-composer-header .web-composer-primary { width:100%;max-width:80px;justify-self:end; }
[data-web-composer] .web-composer-header button:disabled { color:var(--account-muted,#85818e);opacity:.65;cursor:default; }
[data-web-composer] .web-composer-header button:focus-visible { outline:2px solid var(--luca-purple,#7045ff);outline-offset:1px; }
[data-web-composer] .web-composer-header [hidden],[data-web-composer] [data-web-night-step][hidden] { display:none!important; }
[data-web-composer] .web-composer-steps { display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;white-space:nowrap; }
[data-web-composer] .web-composer-steps > span { display:flex;align-items:center;gap:4px;min-width:0;font:650 12px/1.3 system-ui;color:var(--account-muted,#85818e); }
[data-web-composer] .web-composer-steps b { display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font-size:11px; }
[data-web-composer] .web-composer-steps .is-active { color:var(--luca-purple,#7045ff); }
[data-web-composer] .web-composer-steps .is-active b { background:var(--luca-purple,#7045ff);color:#fff; }
[data-web-composer] [data-native-composer-readiness] { grid-column:1/-1;font-size:13px;color:var(--account-muted,#85818e); }
@media(min-width:720px){[data-web-composer] .web-composer-header { grid-template-columns:80px minmax(0,1fr) 90px; }[data-web-composer] .web-composer-steps > span {font-size:14px;}[data-web-composer] .web-composer-header button {font-size:14px;} }
@media(max-width:359px){[data-web-composer] .web-composer-header {grid-template-columns:48px minmax(0,1fr) 56px;}[data-web-composer] .web-composer-steps {gap:6px;}[data-web-composer] .web-composer-steps > span {font-size:11px;gap:3px;}[data-web-composer] .web-composer-steps b {width:18px;height:18px;}[data-web-composer] .web-composer-header button {font-size:12px;padding:4px;} }

/* Old Night Card primary rules span form rows; never let them span the Header. */
[data-web-composer] .web-composer-header > .web-composer-leading {grid-column:1;grid-row:1;}
[data-web-composer] .web-composer-header > .web-composer-steps {grid-column:2;grid-row:1;}
[data-web-composer] .web-composer-header > .web-composer-primary {grid-column:3;grid-row:1;background:transparent!important;box-shadow:none!important;transform:none;color:var(--luca-purple,#7045ff)!important;}
[data-web-composer] .web-composer-header > .web-composer-primary:disabled {color:var(--account-muted,#85818e)!important;}
[data-web-composer] .web-composer-header > button.web-composer-primary {
  grid-column:3!important;
  grid-row:1!important;
  width:100%!important;
  min-width:44px!important;
  max-width:100%!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Primary decisions match the approved purple Create control on phones. */
@media(max-width:719px){
 :root:not([data-native-platform="ios"]) [data-web-composer] .web-composer-header { background:color-mix(in srgb,var(--composer-header-surface) 75%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
 :root:not([data-native-platform="ios"]) [data-web-composer] .web-composer-header > button.web-composer-primary { border:1px solid rgba(255,255,255,.22); border-radius:999px; background:linear-gradient(145deg,#805bff,#6439fc)!important; color:#fff!important; box-shadow:0 4px 12px rgba(100,57,252,.18)!important; }
 :root:not([data-native-platform="ios"]) [data-web-composer] .web-composer-header > button.web-composer-primary:disabled { background:#e7e3f3!important; color:#827995!important; box-shadow:none!important; opacity:1; }
 :root:not([data-native-platform="ios"]) body.night-mode [data-web-composer] .web-composer-header > button.web-composer-primary:disabled { background:#30283e!important; color:#aaa1ba!important; }
}