/* PRTY OS — Advancing: dashboard, event advancing tab, shared advancing status icon.
   Screen-specific layout only; tokens only. */

/* ---------- Shared: status icon chip ---------- */
.adv-sicon {
  --c: var(--grey);
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: color-mix(in srgb, var(--c) 88%, var(--text));
  transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}
.adv-sicon .icon { stroke-width: 2.25; }
.adv-sicon--sm { width: 16px; height: 16px; }
.adv-sicon--sm .icon { stroke-width: 2.5; }
.adv-sicon--lg { width: 28px; height: 28px; }
.adv-sicon--none { background: transparent; color: var(--text-4); box-shadow: inset 0 0 0 1px var(--line); }
.adv-sicon.tone-grey { background: color-mix(in srgb, var(--grey) 9%, transparent); color: var(--text-3); }

.adv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-12); color: var(--text-3); }
.adv-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.adv-linkbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-12); font-weight: 500; }
.adv-linkbtn:hover { color: var(--text); }

.adv-contacts .contact:first-child { padding-top: 0; }

/* ---------- Dashboard ---------- */
.adv-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-2); }
.adv-summary b { font-weight: 600; color: inherit; }
.adv-summary .c-red b { color: var(--red); }
.adv-summary > span:not(.c-red) b { color: var(--text); }
.adv-summary__sep { color: var(--text-4); }

.adv-showday {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: 10px var(--s-4);
  margin-bottom: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface);
  transition: border-color var(--dur-1), background var(--dur-1);
}
.adv-showday:hover { border-color: var(--line-strong); background: var(--surface-2); }
.adv-showday__icon { width: 32px; height: 32px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.adv-showday__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.adv-showday__title { font-weight: 600; }
.adv-showday__sub { font-size: var(--fs-12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-showday__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.adv-showday:hover .adv-showday__cta { color: var(--text); }

.adv-toolbar { padding-bottom: var(--s-5); }

.adv-group + .adv-group { margin-top: var(--s-8); }
.adv-group__list { display: flex; flex-direction: column; gap: var(--s-3); }

/* Event card */
.adv-event { overflow: hidden; }
.adv-event__head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  align-items: center; gap: var(--s-4);
  padding: 14px var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1);
}
.adv-event__head:hover { background: var(--hover); }
.adv-event__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adv-event__name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; min-width: 0; }
.adv-event__sub { font-size: var(--fs-12); color: var(--text-3); }
.adv-event__chev { color: var(--text-4); display: grid; place-items: center; }
.adv-event__head:hover .adv-event__chev { color: var(--text-2); }

/* Combined-completion status bucket (not_started/in_progress/needs_attention/complete) — see
   sel.advancingCombinedProgress. Reuses the shared --c tone-* token pattern from tokens.css. */
.adv-bucket {
  --c: var(--grey);
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: var(--fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 82%, var(--text));
}
.adv-event__breakdown { font-size: var(--fs-11); color: var(--text-4); }

.adv-event__metrics { display: grid; grid-template-columns: repeat(4, 112px); gap: 0; }
.adv-event__metrics--3 { grid-template-columns: repeat(3, 112px); }
.adv-notstarted { font-size: var(--fs-13); color: var(--text-3); font-weight: 500; }
.adv-metric { display: flex; flex-direction: column; gap: 5px; padding-left: var(--s-4); border-left: 1px solid var(--line-soft); min-width: 0; }
.adv-metric__label { font-size: var(--fs-11); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-metric__value { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.01em; line-height: 22px; white-space: nowrap; }
.adv-metric__value small { font-size: var(--fs-12); color: var(--text-3); font-weight: 500; margin-left: -3px; letter-spacing: 0; }

.adv-event__issues { display: flex; flex-direction: column; }
.adv-event__clear { display: flex; align-items: center; gap: 10px; padding: 12px var(--s-4); color: var(--text-2); font-size: var(--fs-13); }
.adv-event__more {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-12); color: var(--text-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.adv-event__more:hover { background: var(--hover); color: var(--text); }

/* Issue row (dashboard) */
.adv-issue {
  display: grid;
  grid-template-columns: 22px 150px minmax(0, 1fr) 84px 150px;
  grid-template-areas: "icon artist main imp status";
  align-items: center; column-gap: var(--s-3);
  min-height: 48px; padding: 7px var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1);
}
.adv-issue:last-child { border-bottom: 0; }
.adv-issue:hover { background: var(--hover); }
.adv-issue__icon { grid-area: icon; display: flex; }
.adv-issue__artist { grid-area: artist; font-weight: 600; font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--text); }
.adv-issue__main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.adv-issue__label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-issue__section { color: var(--text-3); font-weight: 400; }
.adv-issue__detail { font-size: var(--fs-12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-issue.is-critical .adv-issue__detail { color: var(--text-2); }
.adv-issue__imp { grid-area: imp; }
.adv-issue__status { grid-area: status; display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  .adv-event__head { grid-template-columns: 40px minmax(0, 1fr) 16px; row-gap: var(--s-3); }
  .adv-event__metrics { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adv-metric:first-child { border-left: 0; padding-left: 0; }
  .adv-event__chev { grid-column: 3; grid-row: 1; }
  .adv-issue { grid-template-columns: 22px 130px minmax(0, 1fr) 84px 140px; }
}

@media (max-width: 720px) {
  .adv-showday__cta { display: none; }
  .adv-showday__sub { white-space: normal; }
  .adv-event__head { padding: 12px var(--s-4); }
  /* Brand + status pills were overlapping on long collab brand names (e.g. "PRTY x HSS HRDR")
     at phone widths — let them wrap to a second line instead of fighting the truncated title. */
  .adv-event__name { flex-wrap: wrap; row-gap: 4px; }
  .adv-event__name .t-truncate { flex: 1 1 100%; }
  .adv-event__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-3); }
  .adv-metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .adv-issue {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "icon artist imp" "icon main main" "icon status status";
    row-gap: 3px; align-items: start; padding: 10px var(--s-4);
  }
  .adv-issue__icon { padding-top: 1px; }
  .adv-issue__label, .adv-issue__detail { white-space: normal; }
  .adv-issue__status { justify-content: flex-start; margin-top: 4px; }
}

/* ---------- Event advancing tab ---------- */
.adv-tab { display: flex; flex-direction: column; gap: var(--s-4); }

.adv-tab__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) 0;
  padding: 12px var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface);
}
.adv-tab__stat { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--s-6); border-left: 1px solid var(--line-soft); }
.adv-tab__stat--lead { flex-direction: row; align-items: center; gap: var(--s-3); padding-left: 0; border-left: 0; }
.adv-tab__num { font-size: var(--fs-16); font-weight: 600; line-height: 20px; }
.adv-tab__actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }

/* Matrix */
.adv-matrix-panel .panel__foot { flex-wrap: wrap; }
.adv-mx { --mx-cols: minmax(170px, 1.5fr) repeat(8, minmax(40px, 64px)) 176px 16px; }
.adv-mx__row {
  display: grid; grid-template-columns: var(--mx-cols);
  align-items: center; column-gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1);
}
.adv-mx__row:last-child { border-bottom: 0; }
.adv-mx__row.is-clickable { cursor: pointer; }
.adv-mx__row.is-clickable:hover { background: var(--hover); }
.adv-mx__row--head { min-height: 38px; color: var(--text-3); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; }
.adv-mx__th { display: flex; flex-direction: column; align-items: center; gap: 3px; text-transform: none; letter-spacing: 0; font-size: var(--fs-11); white-space: nowrap; }
.adv-mx__th .icon { color: var(--text-4); }

.adv-mx__artist { display: flex; flex-direction: column; min-width: 0; gap: 2px; padding: 8px 0; }
.adv-mx__name { font-weight: 600; font-size: var(--fs-13); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-mx__name:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.adv-mx__set { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.adv-mx__crit { color: var(--red); font-weight: 500; }

.adv-mx__cell { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; min-height: 36px; }
.adv-mx__done { display: grid; grid-template-columns: minmax(40px, 1fr) 36px 40px; align-items: center; gap: var(--s-2); }
.adv-mx__pct { text-align: right; font-weight: 500; }
.adv-mx__frac { text-align: right; color: var(--text-3); font-size: var(--fs-12); }
.adv-mx__complete { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: var(--fs-12); font-weight: 500; white-space: nowrap; }
.adv-mx__chev { color: var(--text-4); display: grid; place-items: center; }
.adv-mx__row.is-clickable:hover .adv-mx__chev { color: var(--text-2); }

.adv-mx__row.is-empty .adv-mx__notstarted { grid-column: 2 / span 8; display: flex; align-items: center; gap: var(--s-3); }
.adv-mx__row.is-empty .adv-mx__done { display: flex; justify-content: flex-start; }

/* Matrix tooltip (CSS only, no JS) */
.adv-tip {
  position: absolute; z-index: 20;
  bottom: calc(100% - 2px); left: 50%;
  width: 260px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-3);
  box-shadow: 0 12px 32px var(--overlay);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s linear var(--dur-1);
  text-align: left;
}
.adv-mx__cell:hover .adv-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 80ms, 80ms, 0s; }
.adv-mx__row > .adv-mx__cell:nth-child(n+7) .adv-tip { left: auto; right: -8px; transform: translateY(4px); }
.adv-mx__row > .adv-mx__cell:nth-child(n+7):hover .adv-tip { transform: none; }
.adv-mx__row > .adv-mx__cell:nth-child(-n+3) .adv-tip { left: -8px; transform: translateY(4px); }
.adv-mx__row > .adv-mx__cell:nth-child(-n+3):hover .adv-tip { transform: none; }
.adv-tip__head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--text); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.adv-tip__head .icon { color: var(--text-3); }
.adv-tip__count { margin-left: auto; color: var(--text-3); font-weight: 500; }
.adv-tip__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0; font-size: var(--fs-12); }
.adv-tip__label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-tip__status { color: var(--text-3); white-space: nowrap; }
.adv-tip__empty { font-size: var(--fs-12); color: var(--text-3); padding: 2px 0; }

/* Mobile artist cards */
.adv-mcards { display: none; }
.adv-mcard { display: flex; flex-direction: column; gap: var(--s-3); padding: 14px var(--s-4); border-bottom: 1px solid var(--line-soft); }
.adv-mcard:last-child { border-bottom: 0; }
a.adv-mcard:active { background: var(--press); }
.adv-mcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.adv-mcard__id { min-width: 0; }
.adv-mcard__name { font-weight: 600; font-size: var(--fs-14); letter-spacing: 0.02em; }
.adv-mcard__set { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.adv-mcard__pct { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; flex-shrink: 0; }
.adv-mcard__issue { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--text-2); min-width: 0; }
.adv-mcard__issue b { font-weight: 500; color: var(--text); }
.adv-mcard.is-empty .btn { align-self: flex-start; --btn-h: 38px; }

.adv-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.adv-strip__seg { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.adv-strip__dot { --c: var(--grey); width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.adv-strip__dot.is-nr { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-4); }
.adv-strip__dot.is-none { background: var(--surface-4); }
.adv-strip__lbl { font-size: var(--fs-10); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Split: open items + venue production */
.adv-tab__split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); align-items: start; }
.adv-oi__filters { padding: 12px var(--s-4); border-bottom: 1px solid var(--line-soft); }
.adv-oi {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: start;
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  animation: rise-in var(--dur-2) var(--ease) both;
}
.adv-oi:last-child { border-bottom: 0; }
.adv-oi__icon { padding-top: 1px; }
.adv-oi__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adv-oi__title { display: flex; align-items: center; gap: 10px; font-weight: 500; flex-wrap: wrap; }
.adv-oi__meta { font-size: var(--fs-12); color: var(--text-3); }
.adv-oi__meta .rowlink { font-size: var(--fs-12); letter-spacing: 0.02em; }
.adv-oi__detail { font-size: var(--fs-12); color: var(--text-2); }
.adv-oi__status { padding-top: 1px; }

.adv-venue-panel { position: sticky; top: var(--s-4); }
.adv-venue__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: var(--r-2); margin-bottom: var(--s-2); }
.adv-venue__facts > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 1px solid var(--line-soft); }
.adv-venue__facts > div:first-child { border-left: 0; }
.adv-venue__facts span { font-size: var(--fs-11); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; }
.adv-venue__facts b { font-weight: 600; }
.adv-venue__name { margin-bottom: var(--s-2); }
.adv-venue-panel .contact:first-child { padding-top: 8px; }

@media (max-width: 1100px) {
  .adv-tab__split { grid-template-columns: minmax(0, 1fr); }
  .adv-venue-panel { position: static; }
  .adv-mx { --mx-cols: minmax(150px, 1.4fr) repeat(8, minmax(34px, 1fr)) 132px 12px; }
  .adv-mx__th span { display: none; }
  .adv-mx__done { grid-template-columns: minmax(32px, 1fr) 36px 38px; }
  .adv-tab__stat { padding: 0 var(--s-4); }
}

@media (max-width: 900px) {
  .adv-tab__actions { margin-left: 0; width: 100%; }
}

@media (max-width: 720px) {
  .adv-mx { display: none; }
  .adv-mcards { display: block; }
  .adv-matrix-panel .panel__foot { display: none; }
  .adv-tab__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) 0; }
  .adv-tab__stat--lead { grid-column: 1 / -1; }
  .adv-tab__stat { padding: 0 var(--s-3); }
  .adv-tab__stat:nth-child(2) { border-left: 0; padding-left: 0; }
  .adv-tab__actions { grid-column: 1 / -1; }
  .adv-tab__actions .btn { --btn-h: 38px; flex: 1; }
  .adv-oi { grid-template-columns: 22px minmax(0, 1fr); }
  .adv-oi__status { grid-column: 2; }
  .adv-oi__status button { min-height: 40px; }
  .adv-oi__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .adv-oi__filters::-webkit-scrollbar { display: none; }
}