/* Jarbou3i work panel (ADR-0002): the save light, the lifecycle banners and
   "Where your work is". Classes are .j-life-* and .j-save-light; the cards
   and buttons are kernel controls. */

/* The save light is the header status, pressable: it opens the work panel.
   A control, so as tall as the header's other controls. */
.j-save-light {
  min-height: var(--j-control); padding: 0 var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2);
  background: var(--j-panel); cursor: pointer;
}
.j-save-light:hover { border-color: var(--j-signal); background: var(--j-raise); }
.j-save-light:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }

/* Lifecycle banners: above the flow and the case file. */
.j-life-banners { display: grid; gap: var(--j-s-2); margin-bottom: var(--j-s-4); }
/* Its own display would keep an empty region's margin and the page's gap. */
.j-life-banners[hidden] { display: none; }
.j-life-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--j-s-3);
  padding: var(--j-s-3) var(--j-s-4); border: 1px solid var(--j-line);
  border-radius: var(--j-r-2); background: var(--j-panel); color: var(--j-fg);
}
.j-life-banner[data-tone="warn"] { border-color: color-mix(in srgb, var(--j-warn) 60%, transparent); background: var(--j-warn-wash); }
.j-life-banner[data-tone="crit"] { border-color: color-mix(in srgb, var(--j-crit) 55%, transparent); background: var(--j-crit-wash); }
.j-life-banner p { margin: 0; flex: 1 1 280px; }
.j-life-acts { display: flex; flex-wrap: wrap; gap: var(--j-s-2); }

/* Where your work is: three places, side by side on wide screens, each under
   an ink rule. A root inside the dialog, it keeps the dialog's surface. */
.j-life { display: grid; gap: var(--j-s-3); margin-bottom: var(--j-s-4); background: transparent; }
.j-life-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--j-s-5); }
.j-life-card { display: grid; gap: var(--j-s-2); align-content: start; justify-items: start; min-width: 0; padding: var(--j-s-3) 0 0; background: none; }
.j-life-card > h4, .j-life-card > p, .j-life-card > ol { justify-self: stretch; margin: 0; }
.j-life-help { margin: 0; color: var(--j-fg-muted); font-size: var(--j-t-13); }
.j-life-revs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--j-s-2); }
.j-life-revs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); }

@media (max-width: 900px) {
  .j-life-grid { grid-template-columns: 1fr; }
}

/* The workspaces on this device, under the open one's cards. */
.j-ws { display: grid; gap: var(--j-s-3); margin-top: var(--j-s-4); background: transparent; }
.j-ws-title { margin: 0; font-size: var(--j-t-14); }
.j-ws-acts, .j-ws-row-acts { display: flex; flex-wrap: wrap; gap: var(--j-s-2); }
.j-ws-list { display: grid; gap: var(--j-s-2); }
.j-ws-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--j-s-3);
  padding: var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2);
}
.j-ws-row > div:first-child { flex: 1 1 240px; min-width: 0; }
/* The open one and a damaged one by a thicker edge too, not by colour alone. */
.j-ws-row[aria-current="true"] { border: 2px solid var(--j-ink); }
.j-ws-row[data-state="damaged"] { border: 2px solid var(--j-crit); background: var(--j-crit-wash); }
.j-ws-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.j-ws-meta { display: flex; flex-wrap: wrap; gap: var(--j-s-1) var(--j-s-3); margin-top: var(--j-s-1); color: var(--j-fg-muted); font-size: var(--j-t-12); }
.j-ws-meta strong { color: var(--j-fg); }
.j-ws-empty { margin: 0; color: var(--j-fg-muted); }