/* ═══ MY WORK + WORK LOG ═════════════════════════════════════════════ */

.mywork-cover { gap: var(--space-7); }
.mw-head { display: flex; align-items: flex-end; justify-content: space-between; min-height: 48px; padding-bottom: 14px; }
.mw-kicker { color: var(--ink-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.mw-title { font-size: var(--text-xl); font-weight: 400; margin-top: 3px; }

/* FN's view-as switcher: one pill row, the shown person filled. */
.mw-viewas { display: flex; gap: var(--space-1); padding: var(--space-1); border: var(--line-w) solid var(--line); border-radius: var(--radius-pill); }
.mw-viewas[hidden] { display: none; }
.mw-viewas-btn {
  min-width: 40px; padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-strong);
}
.mw-viewas-btn:active { transform: scale(0.96); }
.mw-viewas-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .mw-viewas-btn:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--line); }
}

/* Cards dealt in after a view-as switch (work-log.js staggerIn). */
.mw-projects .is-dealt {
  animation: mw-deal var(--dur-move) var(--ease-out-strong) both;
  animation-delay: calc(var(--mw-i, 0) * 35ms);
}
@keyframes mw-deal { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes mw-deal { from { opacity: 0; } }
}
.mw-scroll { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-7); padding-right: 3px; }
/* A flex item defaults to shrinking, and this column always overflows — so the
   panels were being squeezed BELOW their content height and their last rows
   spilled out past the panel border. Nothing here may shrink; .mw-scroll
   scrolls instead. */
.mw-scroll > * { flex: none; }
.mw-section { background: var(--panel-bg); border: var(--line-w) solid var(--line); border-radius: var(--radius-md); padding: 16px; }
.mw-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-bottom: 14px; }
.mw-section-head h3 { font-size: var(--text-lg); font-weight: 400; }
.mw-section-head p { color: var(--ink-faint); font-size: var(--text-sm); margin-top: 3px; }
/* Second tier. The supporting panels carry the same frame as the focus grid,
   so heading scale is what says which one the page is actually about. */
.mw-row .mw-section-head h3 { font-size: var(--text-base); }
.mw-row .mw-section-head p { font-size: var(--text-xs); }
/* Cards size themselves rather than splitting the panel into six fixed
   columns. A task card carries a project number, a phase, owners, a title, a
   project name, a progress bar, two status lines, a note and two buttons — at
   the ~200px a sixth of this panel gave it, the title alone wrapped to three
   lines and the whole card read as a pile of small grey text. ~250px minimum
   means four columns at the usual content width and still six on a 1920
   artboard, at a width the type scale actually fits. */
.mw-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-7); min-height: 216px; align-content: start; }

/* ── focus card ───────────────────────────────────────────────────────────
   Three tiers, in the order you read them: WHAT (title + project), HOW IT IS
   GOING (progress + health), and WHAT WAS SAID (note + actions), separated by
   a rule rather than by yet another size of grey text.

   No min-height of its own: grid already stretches every card in a row to the
   tallest, so a fixed floor only bought a band of empty card on the common
   case where nobody has left a note. The floor lives on .mw-projects, which is
   what must not collapse when the focus list is empty. */
.mw-task-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--space-7);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-md);
}
.mw-task-meta {
  display: flex; justify-content: space-between; gap: var(--space-5);
  color: var(--ink-faint); font: var(--text-xs)/1.2 "SF Mono", Consolas, monospace;
  text-transform: uppercase; letter-spacing: .03em;
}
.mw-task-meta span:last-child { text-align: right; }
.mw-task-card h4 { margin-top: var(--space-5); font-size: var(--text-lg); font-weight: 500; line-height: var(--lh-heading); }
.mw-task-project { margin-top: var(--space-1); color: var(--ink-soft); font-size: var(--text-sm); }

/* Bar and number are one reading — same colour, sat on the same line, with the
   number at body size instead of the 9px it used to be. */
.mw-task-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); margin-top: var(--space-9); }
.mw-task-progress > span { height: 6px; overflow: hidden; background: var(--line); border-radius: var(--radius-pill); }
.mw-task-progress i { display: block; height: 100%; background: var(--fg); border-radius: inherit; }
.mw-task-progress b { font-size: var(--text-base); font-weight: 400; color: var(--ink); }

/* Health is the reason the card is on this page at all, so it reads at --text-sm
   in the band's own colour — not as another line of --text-xs grey. */
.mw-task-signals { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); margin-top: var(--space-4); }
.mw-health { color: var(--ink); font-size: var(--text-sm); }
.mw-freshness { color: var(--ink-faint); font-size: var(--text-xs); text-align: right; white-space: nowrap; }

/* One band, one colour, applied to every signal at once — the whole frame, the
   bar, the number and the health line. A red bar under a black percentage says
   two different things about the same task.

   The frame is the WHOLE border plus a wash of the same colour, not a stripe
   down one edge: a card in trouble should read as a flagged object at a
   glance, from across the grid, before any of its text is legible. Both stay
   1px, so a card changing band re-colours in place instead of nudging its
   content sideways. The wash is deliberately faint — it has to sit under body
   text in both themes, so it tints the card rather than filling it. */
.mw-task-card.behind {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.mw-task-card.behind .mw-task-progress i { background: var(--warn); }
.mw-task-card.behind .mw-task-progress b,
.mw-task-card.behind .mw-health { color: var(--warn-text); }

.mw-task-card.overdue, .mw-issue-card.overdue {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}
.mw-task-card.overdue .mw-task-progress i { background: var(--bad); }
.mw-task-card.overdue .mw-task-progress b,
.mw-task-card.overdue .mw-health,
.mw-issue-card.overdue .mw-health { color: var(--bad-text); }
/* The note's rule and the progress track are --line against a now-tinted card;
   tie them to the band so they don't read as a stray grey line across it. */
.mw-task-card.behind .mw-task-note { border-top-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.mw-task-card.overdue .mw-task-note { border-top-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* Overdue-only marker, sat right after the owner name in the meta row (top
   right of the card). The frame/wash treatment above already flags the card
   from across the grid; this is the closer-in signal, small enough not to
   compete with it, that pulses just enough to catch a scanning eye without
   nagging. Global prefers-reduced-motion (motion.css) flattens the animation
   to a static dot automatically. */
.mw-overdue-dot {
  display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: var(--bad); vertical-align: middle;
  animation: mw-overdue-pulse 2s ease-in-out infinite;
}
@keyframes mw-overdue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); }
  50% { box-shadow: 0 0 5px 2px color-mix(in srgb, var(--bad) 55%, transparent); }
}

.mw-task-note {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: var(--line-w) solid var(--line);
  color: var(--ink-soft); font-size: var(--text-sm); line-height: var(--lh-body);
  /* At most three lines: a long site note is read in the Tracker, not here,
     and one verbose card must not set the height of a whole row. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* margin-top:auto on the actions, not flex:1 on the note — a card with no note
   would otherwise leave its buttons floating in the middle. */
.mw-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-7); }

/* The note grows into whatever height the row's tallest panel gives this one,
   rather than leaving a band of empty panel between the selects and the
   button — this is a composer, so spare room belongs to the thing you type in. */
.mw-other .sform-grid { flex: 1; min-height: 0; grid-template-rows: minmax(66px, 1fr) auto; }
.mw-other .fld-tall { min-height: 0; }
.mw-other textarea { width: 100%; height: 100%; resize: vertical; min-height: 66px; }
/* Alone on its row (Category ≠ project), "Belongs to" takes the full width
   instead of trailing dead space — see syncOther() in work-log.js. */
.mw-other .sform-grid.is-solo > .col-6 { grid-column: span 12; }
/* margin-top:auto — the row stretches all three panels to a common height, so
   the submit sits on the panel floor instead of floating mid-card. */
.mw-other-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); margin-top: auto; padding-top: 14px; }
.mw-other-foot p { flex: 1; min-height: 16px; color: var(--ink-faint); font-size: var(--text-sm); }

/* Log composer + the two personal lists, side by side. The composer leads: it
   is the one thing here you DO, and the lists beside it are what you read.
   Equal thirds — a ~420px column holds the textarea and a pair of selects
   comfortably at this content width. Stretched to a common height, because
   three panels at three ragged heights read as debris rather than a row. */
.mw-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.mw-row > .mw-section { display: flex; flex-direction: column; min-height: 260px; }
/* Capped and scrolled per list, so one long list can't stretch the whole row
   and leave the other two panels full of empty frame. */
.mw-list-body { flex: 1; min-height: 0; max-height: 300px; overflow-y: auto; }
/* To-do rows are a ruled list and stay flush; work notes are cards and need
   air, or two adjacent borders read as one heavy rule. */
.mw-list-body .work-entry + .work-entry { margin-top: var(--space-4); }
.mw-empty { padding: 12px 0; }

.work-log-body { display: grid; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.work-entry { padding: 14px; border: var(--line-w) solid var(--line); border-radius: var(--radius-md); line-height: var(--lh-body); }
.work-entry-meta { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.work-entry p { margin-top: 10px; font-size: var(--text-base); }
.work-entry > small { display: block; margin-top: 7px; color: var(--ink-faint); }

.work-task-modal { width: min(780px, calc(100vw - 32px)); }
.work-task-modal .modal-head { gap: var(--space-5); }
.work-task-modal .modal-head > div { min-width: 0; flex: 1; }
.work-task-modal .modal-head p { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: var(--text-sm); }
.work-task-body { overflow: auto; }
.work-task-tracker-card { width: 100%; min-height: 0; max-height: none; overflow: visible; }
.work-task-tracker-card .trk-card-head { position: static; }

.trk-task-focus { animation: trk-task-focus 1.8s ease-out; }
@keyframes trk-task-focus {
  0%, 35% { background: var(--hover-bg); box-shadow: 0 0 0 4px var(--hover-bg); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* FN only: a current task with no owner. Blue, deliberately outside the
   schedule colours — it asks the lead to assign someone, not "this is late",
   and it leaves as soon as someone is assigned. */
.mw-task-card.unowned {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 8%, transparent);
}
.mw-task-card.unowned .mw-health { color: var(--info-text); }
.stage-chip.st-unowned {
  color: var(--info-text);
  background: color-mix(in srgb, var(--info) 18%, transparent);
}