/* ═══════════════════════════════════════════════════════════════════════════
   WORK HUB — EVENTS TAB
   Built out of work.css's own tokens (--surf, --border, --ink*, --c-*, --radius,
   --shadow-*) so the tab belongs to the Work Hub rather than resembling it. The
   view switcher is .ph-nav, the figures are .ax-card, and a row is .gl-card —
   all of them the Work Hub's own components, not copies.
   ═══════════════════════════════════════════════════════════════════════════ */

.wke { display: block; }

/* ⚠️ NOT relying on `.ph-nav-wrap`'s own layout. layout-overhaul.js sets
   `.ph-nav-wrap { display: none !important }` to hide the page tab bar after
   moving those pills into the top bar — a wrapper INSIDE a panel wearing that
   class is invisible with no other symptom. `.wke-views` re-asserts what this
   one needs and is scoped so it can never be mistaken for the page bar. */
.wke-views.ph-nav-wrap {
  display: block !important;
  position: static;
  width: auto;
  max-width: max-content;
  margin: 0 0 14px;
}
.wke-views .ph-nav { padding: 4px 6px; gap: 2px; justify-content: flex-start; }
.wke-n { margin-left: 6px; font-size: 10px; font-weight: 800; opacity: .55; }

.wke-err {
  padding: 12px 14px; margin-bottom: 14px;
  border-left: 3px solid var(--c-red); background: var(--c-red-bg); color: #b91c1c;
  font-size: 12.5px; font-weight: 600;
}

.wke-list { display: flex; flex-direction: column; gap: 10px; }

/* A row is a .gl-card, so it already has the border, radius, hover lift and the
   staggered entrance. Only its internal layout is here. */
.wke-row { display: block; padding: 12px 14px; cursor: default; }
.wke-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wke-x {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surf); color: var(--ink2);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.wke-x:hover { border-color: var(--c-blue); color: var(--c-blue); }
.wke-row-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.wke-row-id strong { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.wke-row-id span { font-size: 11.5px; color: var(--ink3); }
/* Tabular figures: a column of money that jitters is a column you re-read. */
.wke-money { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wke-mini { font-size: 11px; font-weight: 700; color: var(--ink3); white-space: nowrap; }
.wke-od { color: var(--c-red); }

.wke-pill, .wke-slate, .wke-blue, .wke-green, .wke-teal, .wke-purple, .wke-red {
  flex-shrink: 0; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.wke-slate  { background: var(--border-s); color: var(--ink2); }
.wke-blue   { background: var(--c-blue-bg); color: var(--c-blue); }
.wke-green  { background: var(--c-green-bg); color: #0b4a20; }
.wke-teal   { background: var(--c-teal-bg); color: var(--c-teal); }
.wke-purple { background: var(--c-purple-bg); color: var(--c-purple); }
.wke-red    { background: var(--c-red-bg); color: #b91c1c; }

.wke-detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.wke-panes { padding: 0 0 10px; gap: 2px; justify-content: flex-start; flex-wrap: wrap; }
.wke-pane { padding-top: 4px; }

.wke-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wke-wide { grid-column: 1 / -1; }
/* .wk-field is the Work Hub's own field; only the nested-label shape is ours. */
.wke-grid .wk-field { margin-bottom: 0; }
.wke-grid textarea {
  width: 100%; padding: 8px 10px; border: 2px solid var(--border); border-radius: 8px;
  font-family: var(--f); font-size: 12.5px; color: var(--ink); resize: vertical;
}
.wke-grid textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.08); }

.wke-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.wke-tbl th {
  text-align: left; font-size: 9.5px; font-weight: 800; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .4px; padding: 0 6px 6px; white-space: nowrap;
}
.wke-tbl td { padding: 2px 3px; }
.wke-tbl input, .wke-tbl select {
  width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surf); color: var(--ink);
}
.wke-tbl input:focus, .wke-tbl select:focus {
  outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}
/* An overdue task is the one row that has to be findable at a glance. */
.wke-tbl tr.wke-late input[data-t="due"] { border-color: var(--c-red); color: #b91c1c; font-weight: 700; }
.wke-del {
  width: 24px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surf); color: var(--c-red); cursor: pointer; line-height: 1; font-size: 13px;
}
.wke-del:hover { background: var(--c-red-bg); border-color: var(--c-red); }
.wke-add { margin-top: 8px; font-size: 11.5px !important; padding: 5px 12px !important; }
.wke-foot { margin-top: 8px; font-size: 11.5px; color: var(--ink3); }

.wke-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wke-status { font-size: 12px; color: var(--ink3); }

@media (max-width: 900px) {
  /* A seven-column ledger cannot be read on a phone, and shrinking the columns
     to fit produces seven unreadable ones. It scrolls sideways instead. */
  .wke-pane { overflow-x: auto; }
  .wke-tbl { min-width: 660px; }
  .wke-views.ph-nav-wrap { max-width: 100%; }
  .wke-views .ph-nav { overflow-x: auto; scrollbar-width: none; }
}