/* Interface fragments (data-ui): real product UI at true size, with the product's own values. */

/* Workie's tokens (Workie app/globals.css): since Oct 25 Workie runs on Postie's own design system,
   so ink, muted, line and soft come from site.css. These are the Postie values site.css does not carry. */
:root { --wk-accent: #0a66c2; --wk-unread: #f5f9ff; --wk-faint: #c2c5cb; --wk-check: #6fbf3a; --wk-ready: #1d4ed8; --wk-ready-bg: #e8effd; }

/* Postie queue (values from Postie public/style.css .sheet, .num, .title-cell, .when, .stat.ready).
   Type is held at 13px or more: the page's house rule outranks Postie's 11px header and 12px pills. */
.frag-postie {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  font-size: 14px; line-height: 1.5;
}
/* subgrid keeps the four columns aligned across rows */
.q-head, .q-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: Postie's row rule, inside a data-ui fragment */
.q-head > span, .q-row > span { padding: 0 12px; }
.q-head { background: #fbfbfc; color: var(--muted); font-size: 13px; font-weight: 600; }
.q-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.q-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.q-when { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-title.is-empty, .is-open .q-title, .is-open .q-when { color: var(--muted); }
.is-open .q-title { font-weight: 400; }
.q-lock { grid-column: 1 / -1; margin: 0; padding: 11px 12px; color: var(--muted); font-size: 13px; }

/* Postie's one pill shape; Ready takes the .stat.ready colours */
.q-row > .pill { justify-self: start; margin: 0 12px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.pill.ready { color: #1d4ed8; background: #e8effd; }

/* Phones: the # column goes so the title keeps a few words */
@media (max-width: 480px) {
  .frag-postie { grid-template-columns: minmax(0, 1fr) auto auto; }
  .q-head > :first-child, .q-num { display: none; }
  .q-head > span, .q-row > span { padding: 0 8px; }
  .q-row > .pill { margin: 0 8px; }
  .q-lock { padding: 11px 8px; }
}
/* Phones: Postie's card line, title on top and pill + date under it, so the visitor's idea shows whole */
@media (max-width: 440px) {
  .frag-postie { grid-template-columns: auto minmax(0, 1fr); }
  .q-head { display: none; }
  .q-row { row-gap: 2px; padding: 8px 0; }
  .q-title { grid-column: 1 / -1; }
}

/* Pictures of an interface, not controls: nothing inside takes a click */
.frag-ai, .frag-band, .frag-workie { pointer-events: none; user-select: none; }
/* except a cut-off cell, which shows its full text on hover */
.frag-band [title], .frag-workie [title] { pointer-events: auto; }

/* Postie "Polish with AI" card (Postie .ai-card, .ai-head, .ai-text, .ai-actions, .btn, .btn.primary).
   Its 12px head is held at 13px, and its uppercase label goes sentence case, as in .q-head. */
.frag-ai {
  display: flex; flex-direction: column; gap: 10px; aspect-ratio: 3 / 2; padding: 12px 14px;
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 14px; line-height: 1.5; overflow: hidden; /* a long suggestion is cropped by the 3:2 frame, as Postie's own box scrolls */
}
.ai-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; font-size: 13px; }
.ai-head > :first-child { color: var(--muted); font-weight: 600; }
.ai-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-text { flex: 1; min-height: 0; overflow: hidden; white-space: pre-wrap; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); line-height: 1.55; }
.ai-actions { display: flex; gap: 8px; }
.ai-actions button {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-weight: 500; white-space: nowrap;
}
.ai-actions .primary { background: var(--primary); border-color: var(--primary-edge); color: var(--primary-ink); }

/* Workie's count pill (globals.css .stat.ready): 12px there, held at 13px here */
.band-label, .w-band {
  justify-self: start; display: inline-flex; gap: 4px; padding: 2px 9px; border-radius: 999px;
  background: var(--wk-ready-bg); color: var(--wk-ready); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.band-label b, .w-band b { font-weight: 600; }

/* Workie's sheet (globals.css .sheet-wrap) in its phone rows (under 900px): title, then company and place,
   seen time on the right. Rows seen in the last 24 hours sit on Postie's unread tint, the time in link blue. */
.frag-band {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.band-label { margin: 12px; }
.band-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin: 0; padding: 12px;
  border-top: 1px solid var(--line); background: var(--wk-unread); /* taste-skill-ignore: Workie's row rule, inside a data-ui fragment */
}
.band-title { font-size: 15px; font-weight: 500; }
.band-meta { grid-row: 2; font-size: 13px; color: var(--muted); }
/* one line each, so a long title cannot stretch the crop */
.band-title, .band-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-seen { grid-area: 1 / 2; font-size: 13px; color: var(--wk-accent); }
.band-row.is-old { background: #fff; }
.band-row.is-old .band-seen { color: var(--muted); }

/* Workie's job table at 440px, in the same phone rows plus the Applied box. .stages[data-stage] picks the state. */
.frag-workie {
  display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums;
}
/* The status line, the repeat note and the count pill share the top line */
.w-status, .w-band, .w-dupe-note { grid-area: 1 / 1; align-self: center; margin: 12px; }
.w-status, .w-dupe-note { font-size: 13px; color: var(--muted); }
.w-row {
  display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 12px;
  border-top: 1px solid var(--line); background: #fff; /* taste-skill-ignore: Workie's row rule, inside a data-ui fragment */
}
.w-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-row > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: 15px; font-weight: 500; }
.w-row > :nth-child(2) { grid-area: 2 / 1; font-weight: 500; }
.w-row > :nth-child(3) { grid-area: 2 / 2; font-size: 13px; color: var(--muted); }
.w-row > :nth-child(4) { grid-area: 1 / 3; justify-self: end; font-size: 13px; color: var(--muted); }
/* Workie's checkbox (globals.css): 16px, a 1.5px faint edge, 4px corners */
.w-row > input {
  grid-area: 2 / 3; justify-self: end; align-self: center; appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--wk-faint); border-radius: var(--r-xs); background: #fff;
}

/* States: a 200ms crossfade (visibility flips at its end, as for the clauses) */
.frag-workie > * { transition: opacity 200ms var(--ease-out), visibility 200ms, background-color 200ms var(--ease-out); }
.stages:not([data-stage=collect]) .w-status, .stages:not([data-stage=dedupe]) .w-dupe-note,
.stages:is([data-stage=collect], [data-stage=dedupe]) .w-band { opacity: 0; visibility: hidden; }
/* Collect: the boards are still being read */
.stages[data-stage=collect] .w-row { opacity: 0.45; }
/* Dedupe: the repeat sits faded under its twin and the oldest row steps out,
   so the table shows five full rows in every stage. */
.frag-workie > .is-dupe { opacity: 0.35; transition: none; }
.stages:not([data-stage=dedupe]) .is-dupe, .stages[data-stage=dedupe] .is-spare { display: none; }
/* Land: the last 24 hours on the unread tint, seen times in link blue */
.stages:is([data-stage=land], [data-stage=apply]) .is-fresh { background: var(--wk-unread); }
.stages:is([data-stage=land], [data-stage=apply]) .is-fresh > :nth-child(4) { color: var(--wk-accent); }
/* Apply: the three fresh rows ticked, in Workie's switch green (CSS cannot set checked, so it draws the box) */
.stages[data-stage=apply] .is-fresh > input {
  border-color: var(--wk-check);
  background: var(--wk-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (prefers-reduced-motion: reduce) { .frag-workie > * { transition: none; } }