/* onboarding screens. Owned by workstream G; shared rules live in
   css/components.css, css/screens.css and css/shell.css (the page chrome, the
   cards, the table, the meter). Only what the queue, the item list, the
   offboarding panel and the template editor add is here.

   One rule this file follows throughout: an item's STATE is carried by a data
   attribute and the colour is derived from it in one place, because the same
   row is drawn on three screens and a second opinion about what "waiting"
   looks like would be visible immediately. */

/* --------------------------------------------------------- shared bits */

/* An anchor that has to read as a button. `button` in components.css is an
   element selector, so a link cannot borrow it; this is the narrow copy rather
   than a change to the shared file. */
.ob-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 36px; padding: 0 var(--s-5);
  border: var(--bw) solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--t-sm); font-weight: var(--t-medium); text-decoration: none;
}
.ob-btn:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }
.ob-btn svg { width: 15px; height: 15px; }

.ob-meta-bit {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-2xs); color: var(--c-text-3); min-width: 0;
}
.ob-meta-bit svg { width: 12px; height: 12px; flex: none; }
.ob-meta-bit[data-tone="bad"] { color: var(--c-danger); font-weight: var(--t-medium); }
a.ob-meta-bit { text-decoration: none; color: var(--c-accent); }
a.ob-meta-bit:hover { text-decoration: underline; }

/* --------------------------------------------------------- the queue */

.ob-head-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.ob-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-5); }
.ob-filter {
  padding: 0 var(--s-4); height: 30px; border-radius: var(--r-full);
  border: var(--bw) solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--t-xs); font-weight: var(--t-medium);
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.ob-filter:hover { background: var(--c-hover); color: var(--c-text); }
.ob-filter[aria-pressed="true"] {
  background: var(--c-accent-quiet); border-color: var(--c-accent);
  color: var(--c-text); font-weight: var(--t-semibold);
}
.ob-filter-count { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text-3); }

.ob-table { width: 100%; min-width: 860px; }
.ob-table th { white-space: nowrap; }
.ob-table td { vertical-align: middle; }
.ob-row[data-kind="offboarding"] .ob-who-name { color: var(--c-text-2); }
.ob-row[data-state="complete"] { opacity: 0.72; }

.ob-who { display: inline-flex; align-items: center; gap: var(--s-4); text-decoration: none; color: inherit; min-width: 0; }
.ob-who:hover .ob-who-name { color: var(--c-accent); text-decoration: underline; }
.ob-who-text { display: flex; flex-direction: column; min-width: 0; }
/* break-word, never anywhere: overflow-wrap:anywhere collapses an element's
   min-content width, and inside a table that makes the browser squeeze the
   name column until "Lindqvist" breaks across two lines. break-word keeps the
   intrinsic width and still rescues a name with no spaces in it. */
.ob-who-name { font-weight: var(--t-medium); overflow-wrap: break-word; }
.ob-who-sub { font-size: var(--t-2xs); color: var(--c-warn); text-transform: uppercase; letter-spacing: var(--t-track-caps); }

.ob-unit { font-size: var(--t-xs); color: var(--c-text-2); }
.ob-th-ready { width: 180px; }
.ob-ready-cell { display: flex; align-items: center; gap: var(--s-4); }
.ob-ready-cell .meter { flex: 1 1 auto; min-width: 60px; }
.ob-ready-pct { font-family: var(--t-mono); font-size: var(--t-sm); font-weight: var(--t-semibold); min-width: 42px; }
.ob-ready-pct[data-tone="good"] { color: var(--c-success); }
.ob-ready-pct[data-tone="warn"] { color: var(--c-warn); }
.ob-ready-pct[data-tone="bad"]  { color: var(--c-danger); }
.ob-ready-of { display: block; font-size: var(--t-2xs); color: var(--c-text-3); margin-top: var(--s-2); }
.ob-ready-late { color: var(--c-danger); }

.ob-next { font-size: var(--t-xs); max-width: 260px; overflow-wrap: break-word; }
.ob-due { font-size: var(--t-xs); white-space: nowrap; }
.ob-due [data-tone="bad"] { color: var(--c-danger); font-weight: var(--t-medium); }
.ob-go { width: 36px; text-align: right; }
.ob-go-link { color: var(--c-text); display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; justify-content: center; }
.ob-go-link:hover { color: var(--c-accent); }
.ob-go-link svg { width: 16px; height: 16px; }

/* -------------------------------------------------- one person's lists */

.ob-person { display: flex; flex-direction: column; gap: var(--s-7); }

.ob-summary .card-body { display: flex; flex-direction: column; gap: var(--s-5); }
.ob-summary-top { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; }
.ob-summary-figure { display: flex; align-items: baseline; gap: var(--s-3); }
.ob-summary-figure .stat-value { font-size: var(--t-3xl); }
.ob-summary-figure .stat-value[data-tone="good"] { color: var(--c-success); }
.ob-summary-figure .stat-value[data-tone="warn"] { color: var(--c-warn); }
.ob-summary-figure .stat-value[data-tone="bad"]  { color: var(--c-danger); }
.ob-summary-text { flex: 1 1 260px; min-width: 0; }
.ob-summary-text p { margin: var(--s-2) 0 0; }
.ob-summary-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.ob-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.ob-item {
  display: flex; gap: var(--s-5); align-items: flex-start;
  padding: var(--s-5); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-bg);
  /* The left edge is where state lives. One declaration, four overrides
     below, so no screen can disagree about what a colour means. */
  border-left: 3px solid var(--c-border-strong);
}
.ob-item[data-state="done"]                  { border-left-color: var(--c-success); background: var(--c-surface); }
.ob-item[data-state="awaiting_consent"]      { border-left-color: var(--c-warn); }
.ob-item[data-state="awaiting_confirmation"] { border-left-color: var(--c-warn); }
.ob-item[data-state="waived"],
.ob-item[data-state="cancelled"]             { border-left-color: var(--c-border-strong); opacity: 0.68; }
.ob-item[data-overdue="1"]                   { border-left-color: var(--c-danger); }

.ob-item-mark { color: var(--c-text-3); flex: none; padding-top: 2px; }
.ob-item-mark svg { width: 18px; height: 18px; }
.ob-item[data-state="done"] .ob-item-mark { color: var(--c-success); }
.ob-item[data-overdue="1"] .ob-item-mark { color: var(--c-danger); }

.ob-item-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ob-item-top { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.ob-item-label { margin: 0; font-size: var(--t-md); font-weight: var(--t-semibold); overflow-wrap: anywhere; }
.ob-item-detail { margin: 0; font-size: var(--t-xs); color: var(--c-text-2); line-height: var(--t-body); overflow-wrap: anywhere; }
.ob-item-meta, .ob-item-trail { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.ob-item-trail { padding-top: var(--s-2); border-top: var(--bw) dashed var(--c-border-subtle); }
.ob-item-note { font-size: var(--t-2xs); color: var(--c-text-2); font-style: italic; overflow-wrap: anywhere; }

.ob-item-why {
  margin: 0; display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-2xs); color: var(--c-text-3);
}
.ob-item-why svg { width: 12px; height: 12px; flex: none; }

.ob-cap {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--c-accent); font-size: var(--t-2xs); font-weight: var(--t-medium);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ob-cap:hover { background: none; color: var(--c-accent-hover); }
.ob-cap svg { width: 12px; height: 12px; }

.ob-item-actions { display: flex; flex-direction: column; gap: var(--s-2); flex: none; }
.ob-item-actions button { white-space: nowrap; }

.ob-list-foot { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }
.ob-list-foot p { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.ob-list-foot svg { width: 13px; height: 13px; }

.ob-owners { min-width: 220px; max-width: 320px; }
.ob-owner { display: flex; align-items: center; gap: var(--s-3); }
.ob-owners-none { margin: 0; padding: var(--s-4) var(--s-5); }

.ob-exit .note { margin-bottom: var(--s-5); }

/* ------------------------------------------------------------ templates */

.ob-templates { display: flex; flex-direction: column; gap: var(--s-7); }

.ob-template .card-body { display: flex; flex-direction: column; gap: var(--s-5); }
.ob-template-head { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; }
.ob-template-text { flex: 1 1 320px; min-width: 0; }
.ob-template-name { margin: 0; font-size: var(--t-lg); font-weight: var(--t-semibold); overflow-wrap: anywhere; }
.ob-template-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ob-template-desc { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--c-text-2); line-height: var(--t-body); }
.ob-template-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.ob-titems { list-style: none; margin: 0; padding: 0; counter-reset: obi; display: flex; flex-direction: column; gap: var(--s-2); }
.ob-titem {
  display: flex; gap: var(--s-5); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-sm);
  background: var(--c-surface);
}
.ob-titem:hover { background: var(--c-surface-2); }
.ob-titem-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ob-titem-top { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.ob-titem-label { font-weight: var(--t-medium); font-size: var(--t-sm); overflow-wrap: anywhere; }
.ob-titem-label::before { counter-increment: obi; content: counter(obi) ". "; color: var(--c-text-3); font-family: var(--t-mono); }
.ob-titem-detail { margin: 0; font-size: var(--t-2xs); color: var(--c-text-2); line-height: var(--t-body); overflow-wrap: anywhere; }
.ob-titem-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.ob-titem-actions { display: flex; gap: var(--s-2); flex: none; }
.ob-titems-none { margin: 0; }

.ob-retired { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ob-retired-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  background: var(--c-surface); font-size: var(--t-xs); color: var(--c-text-2);
}
.ob-retired-name { font-weight: var(--t-medium); color: var(--c-text); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ narrow

   At 390px the item row stops being a row. The controls go under the text
   rather than beside it, because a 90px action column next to a wrapped label
   is how a card ends up four words wide, and the queue table keeps its own
   horizontal scroll through .scroll-x rather than shrinking columns until the
   readiness meter is a dash. */
@media (max-width: 720px) {
  .ob-item { flex-wrap: wrap; }
  .ob-item-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .ob-item-actions button { flex: 1 1 auto; }
  .ob-titem { flex-wrap: wrap; }
  .ob-titem-actions { width: 100%; }
  .ob-titem-actions button { flex: 1 1 auto; }
  .ob-template-actions { width: 100%; }
  .ob-template-actions button { flex: 1 1 auto; }
  .ob-summary-figure .stat-value { font-size: var(--t-2xl); }
}

/* Icons inside buttons.

   `button` in components.css is an inline-flex box and sizes nothing inside it,
   and an inline SVG with a viewBox and no width is a replaced element with no
   intrinsic size: in a flex row it collapses to nothing at one width and
   stretches towards the default 300x150 box at another. At 1440 the icons in
   these buttons were invisible and at 390, where the buttons go full width,
   they blew up into squares taller than their own label. Sized here rather than
   on the bare `button` element, which lives in a shared file. */
.ob-item-actions button svg,
.ob-titem-actions button svg,
.ob-template-actions button svg,
.ob-list-foot button svg,
.ob-templates .empty-actions button svg,
.page-actions button svg {
  width: 14px; height: 14px; flex: none;
}