/* The Creative box on the event dashboard, drawn by app/event-creative-box.js:
   her event page playground's Creative buttons (2 Nov 2026). The groups sit
   side by side in their own outlined boxes and wrap, growing to fill each
   line, so a full-width box has no empty right side; each tool is a soft
   icon tile. The box itself is an .event-dashboard-block
   (event-dashboard-view.css). Adds no colour tokens. */
.event-creative-groups{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.event-creative-group{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-width:0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:14px}
.event-creative-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
.event-creative-group-name{color:var(--muted);font:600 10.5px/1.3 "Poppins",sans-serif;letter-spacing:.06em;text-transform:uppercase}

/* Her layout B (3 Nov 2026): what each area is up to, as small coloured
   words on the right of its group's heading (green when done, amber when it
   needs doing), and a second status as a small line under it. A status
   that opens a tab is a plain-looking button. */
.event-creative-status{margin:0;padding:0;border:0;background:none;color:var(--muted);font:600 12px/1.35 "Poppins",sans-serif;text-align:left;overflow-wrap:anywhere}
.event-creative-group-head>.event-creative-status{margin-left:auto;text-align:right}
.event-creative-status-line{align-self:flex-start;font-weight:500}
.event-creative-status-name{color:var(--muted);font-weight:600}
.event-creative-status.is-good{color:#17613c}
.event-creative-status.is-watch{color:#9a6817}
button.event-creative-status{cursor:pointer}
button.event-creative-status:hover{text-decoration:underline;text-underline-offset:3px}
.event-creative-status:focus-visible{border-radius:4px;outline:2px solid var(--accent);outline-offset:2px}
.event-creative-tiles{display:flex;flex-wrap:wrap;gap:10px}
.event-creative-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;box-sizing:border-box;width:112px;min-height:104px;margin:0;padding:12px 6px 10px;border:0;border-radius:18px;background:#f6f6f3;color:var(--ink);font:600 12px/1.25 "Poppins",sans-serif;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.event-creative-tile:hover{background:#efefeb}
.event-creative-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.event-creative-tile[aria-busy="true"]{cursor:progress;opacity:.6}
.event-creative-all{display:inline;margin:0;padding:0}

/* The tile icons are her icon set (app/assets/event-creative, plus the
   People tab's person), painted in the text colour. */
.event-creative-icon{display:block;flex:none;width:34px;height:34px;background:currentColor;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.event-creative-icon[data-icon="agenda"]{-webkit-mask-image:url("assets/event-creative/agenda.svg");mask-image:url("assets/event-creative/agenda.svg")}
.event-creative-icon[data-icon="website"]{-webkit-mask-image:url("assets/event-creative/website.svg");mask-image:url("assets/event-creative/website.svg")}
.event-creative-icon[data-icon="announce"]{-webkit-mask-image:url("assets/event-creative/announce.svg");mask-image:url("assets/event-creative/announce.svg")}
.event-creative-icon[data-icon="images"]{-webkit-mask-image:url("assets/event-creative/images.svg");mask-image:url("assets/event-creative/images.svg")}
.event-creative-icon[data-icon="invite"]{-webkit-mask-image:url("assets/event-creative/invite.svg");mask-image:url("assets/event-creative/invite.svg")}
.event-creative-icon[data-icon="card"]{-webkit-mask-image:url("assets/event-creative/card.svg");mask-image:url("assets/event-creative/card.svg")}
.event-creative-icon[data-icon="people"]{-webkit-mask-image:url("assets/event-tabs/people.svg");mask-image:url("assets/event-tabs/people.svg")}
.event-creative-icon[data-icon="badge"]{-webkit-mask-image:url("assets/event-creative/badge.svg");mask-image:url("assets/event-creative/badge.svg")}
.event-creative-icon[data-icon="venue"]{-webkit-mask-image:url("assets/event-creative/venue.svg");mask-image:url("assets/event-creative/venue.svg")}
.event-creative-icon[data-icon="stage"]{-webkit-mask-image:url("assets/event-creative/stage.svg");mask-image:url("assets/event-creative/stage.svg")}
.event-creative-icon[data-icon="slides"]{-webkit-mask-image:url("assets/event-creative/slides.svg");mask-image:url("assets/event-creative/slides.svg")}

/* On a phone the groups stack and the tiles share the width. */
@media(max-width:700px){
  .event-creative-groups{display:grid;gap:6px}
  .event-creative-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .event-creative-tile{width:auto}
}