/* PRTY OS — artwork screen styles. Screen-specific layout only; reuse components.css for everything else.
   Prefix: aw-   One grid definition is shared by the column header and every row so all sections align. */

.aw-filters { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-5); }
.aw-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; }

/* ---------- Shared column grid ---------- */
.aw-colhead, .aw-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 136px 212px 300px;
  grid-template-areas: "due main approver status actions";
  column-gap: var(--s-4);
}
.aw-colhead {
  padding: 0 calc(var(--s-4) + 1px) var(--s-2);
  font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-4);
}
.aw-colhead__actions { text-align: right; }

.aw-section { margin-top: var(--s-6); }
.aw-colhead + .aw-section { margin-top: 0; }
.aw-panel { overflow: hidden; }

.aw-row {
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1);
}
.aw-row:last-child { border-bottom: 0; }
.aw-row:hover { background: var(--hover); }

.aw-due { grid-area: due; display: flex; flex-direction: column; min-width: 0; }
.aw-due__rel { min-height: 26px; display: flex; align-items: center; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-due__date { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.aw-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aw-title { min-height: 26px; display: flex; align-items: center; flex-wrap: wrap; font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.aw-title__event { color: var(--text); font-weight: 600; }
.aw-title__sep { color: var(--text-4); white-space: pre; }
.aw-ctxicon { display: inline-flex; align-items: center; margin-right: 5px; color: var(--text-3); }
.aw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.aw-ctx { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--text-2); }
.aw-ctx .icon { color: var(--text-3); }
.aw-meta__approver { display: none; }
.aw-formats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.aw-formats .tag { color: var(--text-2); font-size: var(--fs-11); }
.aw-note { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line-strong); font-size: var(--fs-12); color: var(--text-2); line-height: 1.45; max-width: 72ch; }

.aw-approver { grid-area: approver; min-height: 26px; display: flex; align-items: center; min-width: 0; }
.aw-approver .person { min-width: 0; }
.aw-status { grid-area: status; min-height: 26px; display: flex; align-items: center; min-width: 0; }
.aw-actions { grid-area: actions; min-height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.aw-actions .linkout { height: 26px; }

.aw-empty { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 var(--s-4); font-size: var(--fs-12); color: var(--text-4); }
.aw-empty .icon { color: var(--text-4); }

/* Recently approved */
.aw-row.is-done .aw-title__event, .aw-row.is-done .aw-title { color: var(--text-2); }
.aw-row.is-fresh { animation: aw-arrive 900ms var(--ease) both; }
.aw-freshnote { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-3); margin-top: calc(-1 * var(--s-1)); }
.aw-freshnote .icon { color: var(--green); }

/* Subtle completion: brief green wash, then the row slides out */
.aw-row.is-completing { pointer-events: none; animation: aw-complete 560ms var(--ease) forwards; }
@keyframes aw-complete {
  0%   { background: transparent; opacity: 1; transform: none; }
  45%  { background: color-mix(in srgb, var(--green) 9%, transparent); opacity: 1; transform: none; }
  100% { background: color-mix(in srgb, var(--green) 5%, transparent); opacity: 0; transform: translateX(12px); }
}
@keyframes aw-arrive {
  0%   { background: color-mix(in srgb, var(--green) 9%, transparent); opacity: 0; transform: translateY(-4px); }
  30%  { opacity: 1; transform: none; }
  100% { background: transparent; }
}

/* Big status control (mobile) */
.aw-status > .only-mobile { flex: 1; min-width: 0; }
.aw-bigstatus { width: 100%; }
.aw-bigstatus > div { display: flex !important; width: 100%; }
.aw-bigstatus > div > span { display: block; flex: 1; min-width: 0; }
.aw-bigstatus__btn { width: 100%; height: 44px; justify-content: flex-start; gap: var(--s-2); padding: 0 12px; }
.aw-bigstatus__btn .icon { margin-left: auto; color: var(--text-3); }
.aw-bigstatus .popover { left: 0; right: 0; }

/* ---------- Narrow desktop / tablet: approver folds into meta, actions drop below ---------- */
@media (max-width: 1480px) {
  .aw-colhead, .aw-row {
    grid-template-columns: 112px minmax(0, 1fr) 212px;
    grid-template-areas: "due main status" ". actions actions";
  }
  .aw-colhead { grid-template-areas: "due main status"; }
  .aw-colhead__approver, .aw-colhead__actions { display: none; }
  .aw-approver { display: none; }
  .aw-meta__approver { display: inline; }
  .aw-actions { justify-content: flex-start; margin-top: var(--s-2); }
}

/* ---------- Mobile: stacked cards ---------- */
@media (max-width: 720px) {
  .aw-filters { margin-bottom: var(--s-4); flex-direction: column; align-items: stretch; }
  .aw-filters__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-pad)); padding: 2px var(--page-pad); }
  .aw-filters__row::-webkit-scrollbar { display: none; }
  .aw-filters__row .chip { height: 32px; padding: 0 12px; flex-shrink: 0; }
  .aw-filters > .btn { align-self: flex-start; }

  .aw-section { margin-top: var(--s-5); }
  .aw-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "due" "main" "status" "actions";
    row-gap: var(--s-2);
    padding: var(--s-4);
  }
  .aw-due { flex-direction: row; align-items: baseline; gap: var(--s-2); }
  .aw-due__rel { min-height: 0; }
  .aw-title { font-size: var(--fs-14); min-height: 0; }
  .aw-ctx { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
  .aw-status { margin-top: var(--s-1); }
  .aw-actions { margin-top: 0; gap: var(--s-2); justify-content: stretch; }
  .aw-actions > .btn { flex: 1 1 100%; --btn-h: 42px; font-size: var(--fs-13); }
  .aw-actions .linkout { flex: 1; height: 40px; justify-content: center; }
  .aw-row:hover { background: transparent; }
}