@keenaioc/data-view 0.0.0-poc.1 → 0.2.0-alpha.11

package/dist/style.css

@@ -0,0 +1,1028 @@
+.hy-dv,
+.hy-dv * {
+  box-sizing: border-box;
+}
+
+.hy-dv {
+  container-type: inline-size;
+  --hy-ink: #26322b;
+  --hy-muted: #6d776f;
+  --hy-line: #d6d8d2;
+  --hy-line-soft: #e7e8e3;
+  --hy-paper: #fffefa;
+  --hy-panel: #f6f5ef;
+  --hy-accent: #315d4b;
+  --hy-accent-soft: #e1eee7;
+  color: var(--hy-ink);
+  border: 1px solid var(--hy-line);
+  background: var(--hy-paper);
+  font-family: Arial, "Noto Sans TC", sans-serif;
+  font-size: 0.875rem;
+  min-width: 0;
+}
+
+/* V2 extends the existing workspace visual language. */
+.hy-dv-view-tabs, .hy-dv-schedule-nav, .hy-dv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; }
+.hy-dv-view-tabs { border-bottom: 1px solid var(--hy-line); background: #fff; }
+.hy-dv-view-tabs button, .hy-dv-schedule button, .hy-dv-dialog button, .hy-dv-detail-button { font: inherit; color: var(--hy-ink); border: 1px solid #bdc8c0; border-radius: 4px; padding: 7px 11px; background: #fff; cursor: pointer; min-height: 34px; }
+.hy-dv-view-tabs button[aria-pressed="true"] { background: var(--hy-accent); color: #fff; border-color: var(--hy-accent); }
+.hy-dv-operation { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #edf5ee; overflow-wrap: anywhere; }
+.hy-dv-operation.is-failed, .hy-dv-operation.is-conflict, .hy-dv-confirm { background: #fff2e5; color: #863e19; }
+.hy-dv-form { display: grid; gap: 12px; }
+.hy-dv-form label { display: grid; gap: 5px; font-size: .875rem; }
+.hy-dv-form fieldset { min-width: 0; display: grid; gap: 10px; border: 1px solid var(--hy-line); border-radius: 4px; padding: 12px; }
+.hy-dv-form legend { font-weight: 700; padding: 0 5px; }
+.hy-dv-form h4 { margin: 12px 0 0; }
+.hy-dv-form input:not([type="checkbox"]), .hy-dv-form select, .hy-dv-form textarea, .hy-dv-schedule input, .hy-dv-column-list select { min-width: 0; max-width: 100%; padding: 7px; border: 1px solid #b9c5bd; border-radius: 4px; font: inherit; background: #fff; color: var(--hy-ink); }
+.hy-dv-form input[type="color"] { width: 100px; height: 40px; padding: 2px; }
+.hy-dv-form p { line-height: 1.6; margin: 0; }
+.hy-dv-form .hy-dv-actions { padding: 0; }
+.hy-dv-dialog { color: var(--hy-ink); background: var(--hy-paper); width: min(620px, calc(100vw - 24px)); max-height: 85vh; border: 1px solid #a9baae; border-radius: 8px; box-shadow: 0 20px 60px #16332540; padding: 18px; overflow: auto; }
+.hy-dv-dialog::backdrop { background: #17291f66; }
+.hy-dv-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid var(--hy-line); margin-bottom: 16px; padding-bottom: 8px; }
+.hy-dv-dialog h3 { font-size: 1.125rem; margin: 0; }
+.hy-dv-dialog .hy-dv-danger { color: #9b3025; border-color: #d7a99f; }
+.hy-dv-dialog .hy-dv-primary { background: var(--hy-accent); color: #fff; border-color: var(--hy-accent); }
+.hy-dv-dialog button:disabled { cursor: default; opacity: .5; }
+.hy-dv-detail { display: grid; gap: 10px; }
+.hy-dv-detail > label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: 10px; padding-block: 5px; border-bottom: 1px solid var(--hy-line-soft); }
+.hy-dv-detail > label > span { padding-top: 8px; color: var(--hy-muted); }
+.hy-dv-review-list { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
+.hy-dv-review-list > div { display: grid; gap: 3px; padding: 8px; background: #f0f3ef; overflow-wrap: anywhere; }
+.hy-dv-review-list span { white-space: pre-wrap; }
+.hy-dv-cell-content { height: calc(var(--hy-row-height) - 1px); overflow: hidden; display: flex; align-items: center; }
+.hy-dv-cell-content:has(.hy-dv-editor-wrap) { height: auto; min-height: calc(var(--hy-row-height) - 1px); overflow: visible; }
+.hy-dv-cell-content > * { width: 100%; }
+.hy-dv-cell-content .hy-dv-cell-button { min-height: 0; height: 100%; }
+.hy-dv-table td.is-range { box-shadow: inset 0 0 0 2px #39755b; }
+.hy-dv-table td:focus { outline: 2px solid #235c42; outline-offset: -2px; }
+.hy-dv-table-scroll.is-virtual { height: 560px; max-height: 65vh; overflow-anchor: none; }
+.hy-dv-keyboard-help { margin: 0; padding: 7px 12px; font-size: .75rem; line-height: 1.5; color: var(--hy-muted); background: #f4f5f1; }
+.hy-dv-detail-button { margin-top: 8px; width: 100%; }
+.hy-dv-schedule-nav { border-bottom: 1px solid var(--hy-line-soft); }
+.hy-dv-schedule-nav label { display: flex; align-items: center; gap: 8px; }
+.hy-dv-schedule-nav small { color: var(--hy-muted); font-size: .75rem; }
+.hy-dv-schedule-wide { display: block; }
+/* Responsive visibility must outrank layout classes such as .hy-dv-agenda. */
+.hy-dv .hy-dv-schedule-narrow { display: none; }
+.hy-dv-gantt-scroll { overflow-x: auto; max-height: 65vh; }
+.hy-dv-gantt-header, .hy-dv-gantt-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
+.hy-dv-gantt-header { position: sticky; top: 0; z-index: 2; background: #edf1eb; }
+.hy-dv-gantt-header > strong { padding: 10px; }
+.hy-dv-gantt-header > div { display: flex; padding-block: 10px; }
+.hy-dv-gantt-header span { flex: 1; text-align: center; font-size: .75rem; }
+.hy-dv-gantt-row { min-height: 46px; border-bottom: 1px solid var(--hy-line-soft); }
+.hy-dv-gantt-row > button { border: 0; border-radius: 0; border-right: 1px solid var(--hy-line); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hy-dv-gantt-track { position: relative; background-image: repeating-linear-gradient(90deg, transparent, transparent calc(100% / var(--hy-month-days) - 1px), #ecede8 calc(100% / var(--hy-month-days))); }
+.hy-dv-gantt-track { overflow: hidden; }
+.hy-dv-gantt-track .hy-dv-gantt-bar { position: absolute; top: 8px; height: 30px; border-radius: 5px; font-size: .8125rem; user-select: none; }
+.hy-dv-gantt-bar .hy-dv-gantt-move { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 0; height: 100%; border: 0; border-radius: inherit; padding: 2px 7px; background: transparent; color: inherit; overflow: hidden; touch-action: pan-y; }
+.hy-dv-gantt-bar.is-editable .hy-dv-gantt-move { cursor: move; }
+.hy-dv-gantt-bar.is-preview { outline: 2px solid #204eaa; outline-offset: 1px; z-index: 1; }
+.hy-dv-gantt-bar.is-saving { opacity: .65; }
+.hy-dv-gantt-bar.is-saving .hy-dv-gantt-move { cursor: progress; }
+.hy-dv-gantt-progress { position: absolute; inset: 0 auto 0 0; background: #0000001c; pointer-events: none; }
+.hy-dv-gantt-title { position: relative; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.hy-dv-gantt-duration { position: relative; flex-shrink: 0; white-space: nowrap; font-size: .875rem; }
+.hy-dv-gantt-outside-title { position: absolute; left: calc(100% + 6px); top: 5px; color: var(--hy-ink); white-space: nowrap; pointer-events: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
+.hy-dv-gantt-bar .hy-dv-gantt-handle { position: absolute; top: 0; bottom: 0; width: 7px; min-height: 0; padding: 0; border: 0; background: #ffffff66; cursor: ew-resize; touch-action: none; opacity: 0; }
+.hy-dv-gantt-handle.is-start { left: 0; border-radius: 5px 0 0 5px; }
+.hy-dv-gantt-handle.is-end { right: 0; border-radius: 0 5px 5px 0; }
+.hy-dv-gantt-bar:hover .hy-dv-gantt-handle, .hy-dv-gantt-bar:focus-within .hy-dv-gantt-handle { opacity: 1; }
+.hy-dv-gantt-handle[aria-disabled="true"] { cursor: progress; }
+.hy-dv-gantt-move:focus-visible, .hy-dv-gantt-handle:focus-visible { outline: 2px solid #162d52; outline-offset: -2px; }
+.hy-dv-gantt-help { display: grid; gap: 4px; padding: 8px 12px; line-height: 1.5; color: var(--hy-muted); border-bottom: 1px solid var(--hy-line-soft); font-size: .8125rem; }
+.hy-dv-gantt-help [role="status"]:not(:empty) { color: var(--hy-ink); }
+.hy-dv-form .hy-dv-inline-check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; min-width: 0; gap: 8px; text-align: left; }
+.hy-dv-inline-check input[type="checkbox"] { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--hy-accent); }
+.hy-dv-inline-check > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+.hy-dv-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
+.hy-dv-color-swatches button { width: 30px; height: 30px; min-height: 30px; padding: 0; border: 2px solid transparent; border-radius: 6px; color: #fff; text-shadow: 0 1px 2px #000; cursor: pointer; }
+.hy-dv-color-swatches button[aria-pressed="true"] { outline: 2px solid var(--hy-accent); outline-offset: 2px; }
+.hy-dv-gantt-group { background: #f0f3ec; padding: 7px 12px; font-weight: 700; }
+.hy-dv-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.hy-dv-weekday { text-align: center; padding: 10px; background: #edf1eb; }
+.hy-dv-calendar-day { min-height: 148px; padding: 5px; border-right: 1px solid var(--hy-line-soft); border-bottom: 1px solid var(--hy-line-soft); overflow: hidden; }
+.hy-dv-calendar-day.is-outside { background: #f3f4f0; color: #8b958c; }
+.hy-dv-calendar-day .hy-dv-day-number { border: 0; padding: 2px 6px; min-height: 28px; background: transparent; }
+.hy-dv-calendar-day .hy-dv-event { display: block; margin-top: 3px; padding: 4px 6px; min-height: 27px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: #dfebe2; }
+.hy-dv-calendar-day .hy-dv-more { background: transparent; border: 0; color: #315d4b; padding: 2px 5px; font-size: .75rem; }
+.hy-dv-agenda { display: grid; gap: 8px; padding: 12px; }
+.hy-dv-agenda > button { display: grid; gap: 6px; text-align: left; border-left: 4px solid #96b39f; }
+.hy-dv-agenda span { color: var(--hy-muted); font-size: .8125rem; }
+@container hy-data-view (max-width: 767px) {
+  .hy-dv .hy-dv-schedule-wide { display: none; }
+  .hy-dv .hy-dv-schedule-narrow { display: block; }
+  .hy-dv .hy-dv-schedule-narrow.hy-dv-agenda { display: grid; }
+  .hy-dv-toolbar { flex-wrap: wrap; overflow: visible; }
+  .hy-dv-search { width: 100%; grid-template-columns: 18px minmax(0, 1fr); }
+  .hy-dv-keyboard-help { display: none; }
+  .hy-dv-detail > label { grid-template-columns: 85px minmax(0, 1fr); }
+}
+
+.hy-dv button,
+.hy-dv input,
+.hy-dv select,
+.hy-dv textarea {
+  font: inherit;
+}
+
+.hy-dv-titlebar {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 12px;
+  background: var(--hy-panel);
+  border-bottom: 1px solid var(--hy-line);
+}
+
+.hy-dv-titlebar > div,
+.hy-dv-title-status {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.hy-dv-titlebar h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.hy-dv-titlebar span {
+  color: var(--hy-muted);
+  font-size: 0.75rem;
+}
+
+.hy-dv-toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow-x: auto;
+  padding: 7px 9px;
+  border-bottom: 1px solid var(--hy-line);
+  background: #fff;
+  scrollbar-width: thin;
+}
+
+.hy-dv-toolbar > button,
+.hy-dv-pagination button,
+.hy-dv-panel button {
+  min-height: 32px;
+  border: 1px solid #c8ccc5;
+  border-radius: 4px;
+  background: #fff;
+  color: var(--hy-ink);
+  padding: 5px 10px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.hy-dv-toolbar > button:hover,
+.hy-dv-pagination button:hover:not(:disabled),
+.hy-dv-panel button:hover:not(:disabled),
+.hy-dv-toolbar > button.is-active {
+  border-color: #789486;
+  background: var(--hy-accent-soft);
+}
+
+.hy-dv button:focus-visible,
+.hy-dv input:focus-visible,
+.hy-dv select:focus-visible,
+.hy-dv textarea:focus-visible {
+  outline: 2px solid #2d6a52;
+  outline-offset: 1px;
+}
+
+.hy-dv button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.hy-dv-search {
+  display: grid;
+  grid-template-columns: 18px minmax(180px, 250px);
+  align-items: center;
+  height: 32px;
+  border: 1px solid #c8ccc5;
+  border-radius: 4px;
+  background: #fff;
+  padding: 0 8px;
+  flex: 0 0 auto;
+}
+
+.hy-dv-search span {
+  color: var(--hy-muted);
+  font-size: 1rem;
+}
+
+.hy-dv-search input {
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  padding: 4px;
+  color: var(--hy-ink);
+  background: transparent;
+}
+
+.hy-dv-panel-wrap {
+  position: relative;
+  z-index: 50;
+}
+
+.hy-dv-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: min(720px, calc(100vw - 24px));
+  max-height: min(70vh, 620px);
+  overflow: auto;
+  border: 1px solid #bec3bb;
+  border-radius: 5px;
+  background: #faf9f5;
+  box-shadow: 0 12px 32px rgb(35 46 39 / 18%);
+  padding: 12px;
+}
+
+.hy-dv-panel > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--hy-line);
+  padding-bottom: 8px;
+}
+
+.hy-dv-panel h3,
+.hy-dv-panel p {
+  margin: 0;
+}
+
+.hy-dv-panel h3 {
+  font-size: 1rem;
+}
+
+.hy-dv-panel p {
+  color: var(--hy-muted);
+  font-size: 0.8125rem;
+  padding: 8px 0;
+}
+
+.hy-dv-rules,
+.hy-dv-column-list {
+  display: grid;
+  gap: 7px;
+  margin-top: 8px;
+}
+
+.hy-dv-rule {
+  display: grid;
+  grid-template-columns: 28px minmax(150px, 1fr) minmax(110px, 0.7fr) auto;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--hy-line-soft);
+  border-radius: 4px;
+  background: #fff;
+  padding: 7px;
+}
+
+.hy-dv-rule select,
+.hy-dv-rule input,
+.hy-dv-conjunction select,
+.hy-dv-column-list input[type="number"],
+.hy-dv-pagination select {
+  min-width: 0;
+  min-height: 32px;
+  border: 1px solid #c8ccc5;
+  border-radius: 4px;
+  background: #fff;
+  color: var(--hy-ink);
+  padding: 4px 7px;
+}
+
+.hy-dv-filter-rule {
+  grid-template-columns: minmax(120px, 1fr) minmax(110px, 0.8fr) minmax(120px, 1fr) auto;
+}
+
+.hy-dv-conjunction {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 10px;
+}
+
+.hy-dv-add {
+  justify-self: start;
+}
+
+.hy-dv-no-value {
+  color: var(--hy-muted);
+  font-size: 0.75rem;
+}
+
+.hy-dv-column-list > div {
+  display: grid;
+  grid-template-columns: 28px minmax(150px, 1fr) 110px 80px;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--hy-line-soft);
+  border-radius: 4px;
+  background: #fff;
+  padding: 7px;
+}
+
+.hy-dv-column-list > div.is-dragging {
+  opacity: 0.45;
+}
+
+.hy-dv-column-list label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.hy-dv-drag {
+  color: var(--hy-muted);
+  cursor: grab;
+  font-size: 1rem;
+}
+
+.hy-dv-pin {
+  color: var(--hy-muted);
+  font-size: 0.75rem;
+}
+
+.hy-dv-table-scroll {
+  max-width: 100%;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.hy-dv-table {
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 100%;
+}
+
+.hy-dv-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.hy-dv-table th,
+.hy-dv-table td {
+  position: relative;
+  height: 38px;
+  overflow: hidden;
+  border-right: 1px solid var(--hy-line-soft);
+  border-bottom: 1px solid var(--hy-line-soft);
+  background: #fff;
+  padding: 0;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.hy-dv-table th {
+  height: 36px;
+  background: #eef0eb;
+  color: #455149;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  padding: 0 8px;
+  user-select: none;
+}
+
+.hy-dv-table th small {
+  margin-left: 5px;
+  color: var(--hy-accent);
+  font-size: 0.6875rem;
+}
+
+.hy-dv-table .is-pinned {
+  position: sticky;
+  z-index: 12;
+  box-shadow: 2px 0 0 var(--hy-line);
+}
+
+.hy-dv-table thead .is-pinned {
+  z-index: 24;
+  background: #e7ebe5;
+}
+
+.hy-dv-table tbody tr:hover td,
+.hy-dv-table tbody tr:hover td.is-pinned {
+  background: #f8faf7;
+}
+
+.hy-dv-table tbody tr.is-selected td,
+.hy-dv-table tbody tr.is-selected td.is-pinned {
+  background: #e8f2ec;
+}
+
+.hy-dv-selection {
+  width: 44px;
+  padding: 0 !important;
+  text-align: center !important;
+}
+
+.hy-dv-selection input,
+.hy-dv-card-select input,
+.hy-dv-column-list input[type="checkbox"] {
+  width: 17px;
+  height: 17px;
+  accent-color: var(--hy-accent);
+}
+
+.hy-dv-resize {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.hy-dv-resize:hover {
+  background: #6c8a7a;
+}
+
+.hy-dv-cell-button {
+  width: 100%;
+  min-height: 37px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  color: var(--hy-ink);
+  padding: 4px 7px;
+  text-align: left;
+  cursor: default;
+}
+
+.hy-dv-cell-button.is-editable {
+  cursor: text;
+}
+
+.hy-dv-cell-button.is-toggle.is-editable { cursor: pointer; }
+.hy-dv-cell-button.is-toggle .hy-dv-cell-value { display: flex; align-items: center; }
+.hy-dv-cell-button.is-toggle.is-editable:hover .hy-dv-checkbox { border-color: var(--hy-accent); box-shadow: 0 0 0 2px var(--hy-accent-soft); }
+.hy-dv-cell-button.is-toggle:focus-visible { outline: 2px solid var(--hy-accent); outline-offset: -2px; }
+.hy-dv-cell-button.is-toggle[aria-busy="true"] { cursor: progress; opacity: .6; }
+.hy-dv-table .hy-dv-add-column { padding: 0; text-align: center; box-shadow: -1px 0 0 var(--hy-line); }
+.hy-dv-add-column button { width: 100%; height: 100%; min-height: 36px; border: 0; padding: 0; background: transparent; color: var(--hy-muted); font: inherit; font-size: 1.4rem; cursor: pointer; }
+.hy-dv-add-column button:hover, .hy-dv-add-column button:focus-visible { background: var(--hy-accent-soft); color: var(--hy-accent); }
+.hy-dv-add-column button:disabled { cursor: progress; }
+
+.hy-dv-cell-button.is-editable:hover {
+  box-shadow: inset 0 0 0 1px #87a294;
+}
+
+.hy-dv-cell-value {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hy-dv-editor-wrap {
+  min-height: 37px;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+}
+
+.hy-dv-editor {
+  width: 100%;
+  min-width: 0;
+  min-height: 32px;
+  border: 1px solid #557c69;
+  border-radius: 3px;
+  background: #fff;
+  color: var(--hy-ink);
+  padding: 4px 6px;
+}
+
+.hy-dv-textarea {
+  min-height: 70px;
+  resize: vertical;
+}
+
+.hy-dv-multi-select {
+  min-height: 76px;
+}
+
+.hy-dv-check {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--hy-accent);
+}
+
+.hy-dv-checkbox {
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #adb4ad;
+  border-radius: 3px;
+  background: #fff;
+  color: #fff;
+  font-weight: 800;
+}
+
+.hy-dv-checkbox.is-checked {
+  border-color: var(--hy-accent);
+  background: var(--hy-accent);
+}
+
+.hy-dv-prewrap {
+  white-space: pre-wrap;
+}
+
+.hy-dv-empty,
+.hy-dv-no-access {
+  color: #899188;
+}
+
+.hy-dv-tags,
+.hy-dv-attachments {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.hy-dv-tag,
+.hy-dv-relation,
+.hy-dv-person {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  border-radius: 999px;
+  background: #e6ebe7;
+  color: #31413a;
+  padding: 2px 7px;
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.hy-dv-person {
+  background: #eef1f6;
+}
+
+.hy-dv-relation {
+  border-radius: 4px;
+  background: #f2eee5;
+}
+
+.hy-dv-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background: #65796e;
+  color: #fff;
+  font-size: 0.625rem;
+}
+
+.hy-dv-attachments a {
+  color: #235d91;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.hy-dv-upload {
+  position: relative;
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  border: 1px solid #557c69;
+  border-radius: 4px;
+  padding: 4px 9px;
+  cursor: pointer;
+}
+
+.hy-dv-upload input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.hy-dv-save {
+  flex: 0 0 auto;
+  color: var(--hy-muted);
+  font-size: 0.6875rem;
+  white-space: nowrap;
+}
+
+.hy-dv-save.is-saved { color: #2d7351; }
+.hy-dv-save.is-failed,
+.hy-dv-save.is-conflict { color: #b23730; }
+.hy-dv-save.is-saving { color: #786624; }
+
+.hy-dv-group td {
+  height: 34px;
+  background: #f0f1ed !important;
+}
+
+.hy-dv-group.depth-1 td { background: #f6f5f0 !important; }
+.hy-dv-group.depth-2 td { background: #fbfaf7 !important; }
+
+.hy-dv-group button {
+  width: 100%;
+  min-height: 33px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  background: transparent;
+  color: #3f4c44;
+  padding: 4px 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.hy-dv-group.depth-1 button { padding-left: 26px; }
+.hy-dv-group.depth-2 button { padding-left: 42px; }
+.hy-dv-group button span { color: var(--hy-muted); font-size: 0.75rem; }
+
+.hy-dv-mobile { display: none; }
+
+.hy-dv-pagination {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--hy-line);
+  background: var(--hy-panel);
+  padding: 6px 10px;
+  color: var(--hy-muted);
+  font-size: 0.75rem;
+}
+
+.hy-dv-pagination label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.hy-dv-state {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+  border: 1px dashed var(--hy-line);
+  background: #fbfbf8;
+  color: var(--hy-ink);
+  padding: 24px;
+  text-align: center;
+}
+
+.hy-dv-state p {
+  margin: 6px 0 0;
+  color: var(--hy-muted);
+}
+
+.hy-dv-state.is-warning { background: #fff9e9; }
+.hy-dv-state.is-error { background: #fff3f1; color: #8b2924; }
+
+.hy-dv-loading {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  min-height: 180px;
+  padding: 24px;
+}
+
+.hy-dv-loading span {
+  height: 120px;
+  border-radius: 5px;
+  background: linear-gradient(90deg, #eff0ec 25%, #f7f7f4 50%, #eff0ec 75%);
+  background-size: 200% 100%;
+  animation: hy-dv-loading 1.4s infinite linear;
+}
+
+@keyframes hy-dv-loading {
+  to { background-position: -200% 0; }
+}
+
+@media (max-width: 767px) {
+  .hy-dv { border-inline: 0; font-size: 0.9375rem; }
+  .hy-dv-titlebar { align-items: flex-start; }
+  .hy-dv-title-status { align-items: flex-end; flex-direction: column; gap: 3px; }
+  .hy-dv-search { grid-template-columns: 18px minmax(180px, 1fr); width: min(78vw, 290px); }
+  .hy-dv-desktop { display: none; }
+  .hy-dv-mobile { display: grid; gap: 10px; padding: 10px; background: #f1f0eb; }
+  .hy-dv-mobile-group { display: grid; gap: 8px; }
+  .hy-dv-mobile-group.depth-1,
+  .hy-dv-mobile-group.depth-2 { border-left: 2px solid #cbd0c9; padding-left: 8px; }
+  .hy-dv-mobile-group-title {
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--hy-line);
+    border-radius: 4px;
+    background: #f8f8f4;
+    color: var(--hy-ink);
+    padding: 6px 10px;
+    text-align: left;
+  }
+  .hy-dv-mobile-group-title span { color: var(--hy-muted); font-size: 0.75rem; }
+  .hy-dv-card {
+    border: 1px solid #d0d2cc;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 1px 3px rgb(35 46 39 / 7%);
+    padding: 10px;
+  }
+  .hy-dv-card.is-selected { border-color: #6f9280; background: #f1f8f4; }
+  .hy-dv-card-select { display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: var(--hy-muted); font-size: 0.75rem; }
+  .hy-dv-card dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0; margin: 0; }
+  .hy-dv-card dt,
+  .hy-dv-card dd { min-width: 0; margin: 0; border-bottom: 1px solid #ecece8; padding: 7px 3px; }
+  .hy-dv-card dt { color: var(--hy-muted); font-size: 0.75rem; }
+  .hy-dv-card dd { color: var(--hy-ink); }
+  .hy-dv-cell-button { min-height: 34px; padding: 1px 3px; }
+  .hy-dv-panel { position: fixed; inset: 0; width: 100%; max-height: none; border: 0; border-radius: 0; padding: 14px; }
+  .hy-dv-rule,
+  .hy-dv-filter-rule { grid-template-columns: 28px minmax(0, 1fr); }
+  .hy-dv-filter-rule > :nth-child(3),
+  .hy-dv-filter-rule > :nth-child(4),
+  .hy-dv-rule > :nth-child(3),
+  .hy-dv-rule > :nth-child(4) { grid-column: 2; }
+  .hy-dv-column-list > div { grid-template-columns: 28px minmax(0, 1fr) 76px; }
+  .hy-dv-column-list .hy-dv-pin { grid-column: 2; }
+  .hy-dv-pagination { justify-content: center; flex-wrap: wrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hy-dv-loading span { animation: none; }
+}
+
+.hy-dv-table tbody td { height: var(--hy-row-height, 52px); }
+.hy-dv-column-list > div { grid-template-columns: 20px minmax(90px, 1fr) 105px 70px 146px; gap: 4px; }
+.hy-dv-column-list > div > button { padding-inline: 4px; }
+
+
+@container (max-width: 700px) {
+  .hy-dv-toolbar { flex-wrap: wrap; overflow: visible; }
+  .hy-dv .hy-dv-search { width: 100%; grid-template-columns: 18px minmax(0, 1fr); }
+  .hy-dv .hy-dv-column-list > div { grid-template-columns: 20px minmax(80px, 1fr) 80px; }
+  .hy-dv-panel { width: 100%; max-height: 75vh; }
+}
+
+/* FS dependencies share the existing Gantt rows; no independent business table. */
+.hy-dv-gantt-body { position: relative; }
+.hy-dv-gantt-body .hy-dv-gantt-row { height: 46px; box-sizing: border-box; }
+.hy-dv-gantt-body .hy-dv-gantt-group { height: 32px; box-sizing: border-box; line-height: 18px; overflow: hidden; }
+.hy-dv-dependency-lines { position: absolute; top: 0; left: 240px; width: calc(100% - 240px); overflow: visible; pointer-events: none; z-index: 1; }
+.hy-dv-gantt-track .hy-dv-gantt-outside { position: absolute; top: 8px; min-height: 30px; font-size: .875rem; background: #f0f3f7; color: #38516a; }
+.hy-dv-dependency-list { list-style: none; padding: 0; }
+.hy-dv-dependency-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hy-line-soft); }
+.hy-dv-dependency-list small { display: block; color: var(--hy-muted); }
+.hy-dv-review-scroll { max-height: 55vh; overflow: auto; }
+.hy-dv-reschedule-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
+.hy-dv-reschedule-table th, .hy-dv-reschedule-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--hy-line-soft); vertical-align: top; }
+.hy-dv-reschedule-table td { min-width: 110px; }
+
+/* Named view management and synchronized Gantt panes. */
+.hy-dv-named-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #f3f5f2; border: 1px solid #ccd5cd; }
+.hy-dv-named-tabs button, .hy-dv-view-save button { font: inherit; min-height: 38px; padding: 6px 12px; border: 1px solid #bdc8c0; border-radius: 5px; background: #fff; color: #31413a; cursor: pointer; }
+.hy-dv-named-tabs button[aria-pressed="true"] { background: #dcece2; border-color: #557c69; font-weight: 700; }
+.hy-dv-named-tabs button:disabled { opacity: .5; cursor: default; }
+.hy-dv-view-save { font-size: .8125rem; padding: 4px 10px; color: #52645a; }
+.hy-dv-view-save[role="alert"] { color: #b23730; }
+.hy-dv-gantt-split { display: grid; min-width: 0; max-width: 100%; }
+.hy-dv-gantt-pane { overflow: auto; max-height: 560px; min-width: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.hy-dv-gantt-left .hy-dv-table { min-width: 0; }
+.hy-dv-gantt-left .hy-dv-table thead { height: 48px; }
+.hy-dv-gantt-left .hy-dv-table th { height: 48px; box-sizing: border-box; }
+.hy-dv-gantt-left .hy-dv-table td { height: var(--hy-row-height); box-sizing: border-box; }
+.hy-dv-gantt-left .hy-dv-group button { height: calc(var(--hy-row-height) - 1px); min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hy-dv-gantt-cell { height: calc(var(--hy-row-height) - 1px); display: flex; align-items: center; overflow: hidden; }
+.hy-dv-gantt-cell .hy-dv-editor-wrap { width: 100%; }
+.hy-dv-gantt-cell .hy-dv-cell-button { border: 0; border-radius: 0; min-height: 30px; padding: 4px 7px; }
+.hy-dv-split-handle { background: #dbe2dc; cursor: col-resize; touch-action: none; border-inline: 1px solid #becbc1; }
+.hy-dv-split-handle:hover, .hy-dv-split-handle:focus-visible { background: #739582; outline: 2px solid #355b46; }
+.hy-dv-timeline-header { height: 48px; position: sticky; top: 0; z-index: 4; background: #eef0eb; border-bottom: 1px solid #cdd5ce; box-sizing: border-box; }
+.hy-dv-timeline-header span { position: absolute; top: 16px; font-size: 11px; padding-left: 3px; white-space: nowrap; }
+.hy-dv-timeline-body { position: relative; }
+.hy-dv-timeline-body .hy-dv-gantt-track { border-bottom: 1px solid var(--hy-line-soft); box-sizing: border-box; }
+.hy-dv-timeline-group { height: var(--hy-row-height); background: #f0f1ed; border-bottom: 1px solid var(--hy-line-soft); box-sizing: border-box; position: relative; }
+.hy-dv-timeline-body .hy-dv-gantt-bar { top: calc((var(--hy-row-height) - 30px) / 2); }
+.hy-dv-timeline-body .hy-dv-dependency-lines { left: 0; width: 100%; }
+.hy-dv-time-background { position: absolute; inset: 0; pointer-events: none; }
+.hy-dv-time-background i { position: absolute; top: 0; bottom: 0; background: #edf0f466; }
+.hy-dv-today-line { position: absolute; top: 0; bottom: 0; border-left: 2px solid #6495ff; z-index: 2; }
+.hy-dv-schedule-card { border: 1px solid #d4dbd5; border-radius: 6px; padding: 8px; background: #fff; }
+.hy-dv-schedule-card > button { width: 100%; text-align: left; }
+.hy-dv-schedule-card > button span { display: block; font-size: .8rem; color: #617167; }
+.hy-dv-schedule-fields { display: grid; grid-template-columns: 90px minmax(0, 1fr); margin: 8px 0 0; }
+.hy-dv-schedule-fields dt, .hy-dv-schedule-fields dd { margin: 0; min-width: 0; padding: 4px; border-top: 1px solid #e4e8e2; }
+.hy-dv-schedule-fields dt { font-size: .8rem; color: #617167; }
+.hy-dv-schedule-fields .hy-dv-cell-button { min-height: 44px; border: 0; padding: 4px; }
+.hy-dv-schedule-nav select { font: inherit; min-height: 36px; border: 1px solid #b9c5bd; background: #fff; padding: 4px; border-radius: 4px; }
+@media (max-width: 767px) {
+  .hy-dv-named-tabs { flex-wrap: nowrap; overflow-x: auto; }
+  .hy-dv-named-tabs button { flex-shrink: 0; min-height: 44px; }
+  .hy-dv button { min-height: 40px; }
+  .hy-dv-panel > header { position: sticky; top: -14px; background: #faf9f5; z-index: 2; }
+  .hy-dv .hy-dv-column-list > div { grid-template-columns: 20px minmax(80px, 1fr) 80px; }
+  .hy-dv-column-list > div > select { grid-column: 2; }
+  .hy-dv-column-list > div > input[type="number"] { grid-column: 3; }
+  .hy-dv-schedule-nav label { flex-wrap: wrap; }
+  .hy-dv-schedule-nav input { max-width: 170px; }
+}
+.hy-dv-attachment-cell { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; height: 100%; min-height: 28px; min-width: 0; box-sizing: border-box; padding: 0 4px; }
+.hy-dv-attachment-cell > .hy-dv-attachments { min-width: 0; flex: 0 1 auto; overflow: hidden; }
+.hy-dv .hy-dv-attachment-cell > .hy-dv-attachment-add { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
+.hy-dv-attachment-add:hover { background: #eceeeb; }
+.hy-dv-attachment-add:focus-visible { outline: 2px solid #617b68; outline-offset: -2px; }
+.hy-dv-relation-cell { display: flex; align-items: center; height: 100%; min-width: 0; }
+.hy-dv .hy-dv-relation-select { width: 100%; min-width: 0; height: 100%; min-height: 28px; padding: 0 6px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.hy-dv-relation-select:focus-visible { outline: 2px solid #617b68; outline-offset: -2px; }
+.hy-dv-table-scroll { max-height: 560px; }
+.hy-dv-mobile, .hy-dv-mobile-scroll { max-height: 65vh; overflow: auto; overscroll-behavior: contain; }
+
+/* Public metrics, shared by the table, Gantt, editors and virtual offsets. */
+.hy-dv { font-size: var(--hy-cell-font, 14px); }
+.hy-dv-table th, .hy-dv-gantt-left .hy-dv-table th { height: var(--hy-header-height, 36px); box-sizing: border-box; font-size: var(--hy-header-font, 13px); padding: 0 var(--hy-header-right, 12px) 0 var(--hy-header-left, 6px); }
+.hy-dv-table thead, .hy-dv-gantt-left .hy-dv-table thead, .hy-dv-timeline-header { height: var(--hy-header-height, 36px); }
+.hy-dv-timeline-header span { top: 50%; transform: translateY(-50%); }
+.hy-dv-table td, .hy-dv-gantt-left .hy-dv-table td { height: var(--hy-row-height, 52px); box-sizing: border-box; padding: 0 var(--hy-cell-padding, 6px); font-size: var(--hy-cell-font, 14px); line-height: var(--hy-cell-line, 16px); }
+.hy-dv-cell-content, .hy-dv-gantt-cell, .hy-dv-cell-content:has(.hy-dv-editor-wrap) { height: calc(var(--hy-row-height) - 1px); min-height: 0; overflow: hidden; }
+.hy-dv .hy-dv-cell-button, .hy-dv-gantt-cell .hy-dv-cell-button { font: inherit; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; gap: 4px; }
+.hy-dv-cell-button:disabled { opacity: 1; }
+.hy-dv-cell-button[aria-busy="true"] { opacity: .6; }
+.hy-dv-cell-content .hy-dv-editor-wrap { height: var(--hy-control-height, 28px); min-height: 0; padding: 0; }
+.hy-dv-cell-content .hy-dv-editor { height: var(--hy-control-height, 28px); min-height: 0; padding: 0 6px; font: inherit; box-sizing: border-box; }
+.hy-dv-cell-content .hy-dv-textarea { resize: none; }
+.hy-dv-cell-value { white-space: nowrap; flex: 1; }
+.hy-dv-cell-value .hy-dv-prewrap { white-space: nowrap; }
+.hy-dv-cell-arrow { flex: 0 0 auto; color: var(--hy-muted); }
+.hy-dv-tags { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; }
+.hy-dv-tag, .hy-dv-person, .hy-dv-relation, .hy-dv-group-label { height: var(--hy-badge-height, 20px); max-width: 100%; min-width: 0; box-sizing: border-box; font-size: var(--hy-badge-font, 11px); line-height: var(--hy-badge-height, 20px); padding: 0 var(--hy-badge-padding, 8px); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-weight: 400; }
+.hy-dv-tags > span { min-width: 0; }
+.hy-dv-pill-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.hy-dv-system-value { display: inline-block; background: #eceeeb; color: #667067; border-radius: 3px; min-height: 20px; line-height: 20px; padding: 0 6px; font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+.hy-dv-table .hy-dv-group td, .hy-dv-gantt-left .hy-dv-table .hy-dv-group td { height: inherit; padding: 0; }
+.hy-dv .hy-dv-group button, .hy-dv-gantt-left .hy-dv-group button { min-height: 0; height: var(--hy-group-height, 28px); padding-block: 0; white-space: nowrap; overflow: hidden; }
+.hy-dv-table tr[aria-hidden] td { height: inherit; padding: 0; border: 0; }
+.hy-dv-table-scroll, .hy-dv-table-scroll.is-virtual, .hy-dv-gantt-pane { height: var(--hy-viewport-height, 560px); max-height: var(--hy-viewport-height, 560px); }
+.hy-dv-table .hy-dv-add-column button { min-height: 0; height: 100%; }
+.hy-dv-bottom-scroll { position: sticky; bottom: 0; z-index: 25; overflow-x: auto; height: var(--hy-scrollbar-height, 16px); background: #eff2f4; }
+.hy-dv-bottom-scroll::-webkit-scrollbar { height: var(--hy-scrollbar-thumb, 12px); }
+.hy-dv-bottom-scroll::-webkit-scrollbar-thumb { background: #9aa7ad; border-radius: 6px; }
+.hy-dv-load-status { position: sticky; bottom: 0; padding: 8px 12px; background: #eff6ff; color: #234778; z-index: 26; }
+.hy-dv-load-status[role="alert"] { color: #952525; background: #fff0ed; }
+.hy-dv-row-controls { display: flex; align-items: center; justify-content: center; gap: 2px; }
+.hy-dv-row-controls button { min-height: 0; height: var(--hy-action-height, 24px); padding: 0 3px; }
+.hy-dv .hy-dv-row-drag { cursor: grab; touch-action: none; user-select: none; min-width: 24px; }
+.hy-dv tr.is-moving td { opacity: .55; }
+.hy-dv tr.is-drop-before td { box-shadow: inset 0 2px #246bff; }
+.hy-dv tr.is-drop-after td { box-shadow: inset 0 -2px #246bff; }
+.hy-dv-action-cell { display: flex; align-items: center; min-width: 0; border: 0; margin: 0; padding: 0; }
+.hy-dv-action-cell button { min-height: 0; height: var(--hy-action-height, 24px); padding: 0 6px; font-size: inherit; }
+.hy-dv-reference-editor { display: grid; gap: 8px; }
+.hy-dv-reference-editor > div { display: grid; max-height: 240px; overflow: auto; gap: 4px; }
+.hy-dv-reference-editor button { text-align: left; }
+.hy-dv-reference-editor button[aria-pressed="true"] { background: #e2ebff; }
+.hy-dv-reference-editor footer { display: flex; gap: 8px; }
+.hy-dv-detail .hy-dv-cell-button { min-height: 32px; }
+.hy-dv-mobile-field-settings > div { display: grid; grid-template-columns: minmax(0, 1fr) 146px; align-items: center; gap: 6px; min-width: 0; min-height: 32px; }
+.hy-dv-field-order-actions { display: grid; grid-template-columns: repeat(4, 32px); gap: 6px; min-height: 32px; }
+.hy-dv .hy-dv-field-order-actions > button { width: 32px; min-width: 0; height: 32px; min-height: 32px; padding: 0; }
+.hy-dv-column-list label > span { min-width: 0; overflow-wrap: anywhere; }
+@container (max-width: 700px) {
+  .hy-dv-column-list > div > select { grid-column: 2; }
+  .hy-dv-column-list > div > input[type="number"] { grid-column: 3; }
+  .hy-dv-column-list > div > .hy-dv-field-order-actions { grid-column: 2 / -1; justify-self: end; }
+}
+@media (max-width: 767px) {
+  .hy-dv-column-list > div > .hy-dv-field-order-actions { grid-column: 2 / -1; justify-self: end; }
+}
+.hy-dv-card, .hy-dv-schedule-card { content-visibility: auto; contain-intrinsic-size: auto 180px; }
+@media (max-width: 767px) {
+  .hy-dv-bottom-scroll { display: none; }
+  .hy-dv-mobile .hy-dv-cell-button { min-height: 36px; }
+  .hy-dv-mobile.mobile-compact .hy-dv-card { border-radius: 0; border-inline: 0; padding: 6px 10px; margin: 0; }
+  .hy-dv-mobile.mobile-compact dl { grid-template-columns: 80px minmax(0, 1fr); }
+  .hy-dv-mobile.mobile-compact .hy-dv-cell-button { min-height: 28px; }
+  .hy-dv-dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
+  .hy-dv-dialog input, .hy-dv-dialog textarea { scroll-margin-block: 70px; }
+  .hy-dv-reference-editor > div { max-height: min(240px, 35dvh); }
+}
+
+/* alpha.8: responsive presentation is independent of device viewport width. */
+.hy-dv { container-name: hy-data-view; }
+.hy-dv .hy-dv-desktop { display: block; }
+.hy-dv .hy-dv-mobile { display: none; }
+.hy-dv .hy-dv-bottom-scroll { display: block; }
+.hy-dv-tool-icon { display: none; }
+.hy-dv-heading { min-width: 0; }
+.hy-dv-body { min-width: 0; min-height: 0; }
+.hy-dv.chrome-compact .hy-dv-heading { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--hy-line); }
+.hy-dv.chrome-compact .hy-dv-titlebar { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 2px 6px; gap: 6px; border: 0; flex-wrap: wrap; }
+.hy-dv.chrome-compact .hy-dv-titlebar h2 { font-size: 13px; }
+.hy-dv.chrome-compact .hy-dv-titlebar > div { min-width: 0; flex-wrap: wrap; }
+.hy-dv.chrome-compact .hy-dv-view-tabs { padding: 2px 6px; gap: 4px; border: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
+.hy-dv.chrome-compact .hy-dv-view-tabs button { flex-shrink: 0; min-height: var(--hy-control-height); padding: 2px 6px; font-size: 12px; }
+.hy-dv .hy-dv-toolbar.is-compact { flex-wrap: nowrap; overflow: visible; padding: 3px 6px; min-height: 34px; gap: 4px; z-index: 35; }
+.hy-dv-toolbar.is-compact > button, .hy-dv-toolbar.is-compact select { min-height: var(--hy-control-height); padding: 2px 6px; flex-shrink: 0; font: inherit; }
+.hy-dv .hy-dv-toolbar.is-compact .hy-dv-search { height: var(--hy-control-height); padding: 0 4px; flex: 1 1 180px; min-width: 50px; max-width: 240px; width: auto; grid-template-columns: 16px minmax(0,1fr); }
+.hy-dv-toolbar.is-compact .hy-dv-search input { min-width: 0; width: 100%; height: 100%; min-height: 0; padding: 2px 4px; }
+.hy-dv-toolbar-slot { display: flex; min-width: 0; max-width: 25%; overflow-x: auto; }
+.hy-dv-toolbar-more { position: absolute; right: 6px; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: min(280px, calc(100% - 12px)); max-height: min(420px, 65dvh); overflow: auto; padding: 8px; background: var(--hy-paper); border: 1px solid var(--hy-line); box-shadow: 0 6px 18px #0002; z-index: 50; }
+.hy-dv-toolbar-more button { min-height: 32px; text-align: left; font: inherit; border: 1px solid var(--hy-line); background: #fff; padding: 4px 8px; cursor: pointer; }
+.hy-dv-toolbar-more button.is-active { background: var(--hy-accent-soft); }
+.hy-dv.chrome-compact .hy-dv-schedule-nav { padding: 3px 6px; gap: 4px; }
+.hy-dv.chrome-compact .hy-dv-schedule-nav button, .hy-dv.chrome-compact .hy-dv-schedule-nav select, .hy-dv.chrome-compact .hy-dv-schedule-nav input { min-height: var(--hy-control-height); padding: 2px 4px; font-size: 12px; }
+.hy-dv.chrome-compact .hy-dv-keyboard-help { display: none; }
+.hy-dv.chrome-compact .hy-dv-gantt-help { padding: 3px 6px; font-size: 12px; }
+.hy-dv.density-workbench .hy-dv-group button { height: var(--hy-group-height); min-height: 0; }
+.hy-dv .hy-dv-mobile, .hy-dv .hy-dv-mobile-scroll { max-height: var(--hy-viewport-height); }
+.hy-dv.has-total-height { display: flex; flex-direction: column; min-height: 0; }
+.hy-dv.has-total-height > :not(.hy-dv-body) { flex-shrink: 0; }
+.hy-dv.has-total-height > .hy-dv-body { flex: 1 1 0; display: flex; flex-direction: column; overflow: hidden; }
+.hy-dv.has-total-height .hy-dv-desktop { flex: 1 1 0; min-height: 0; }
+.hy-dv.has-total-height .hy-dv-table-scroll { height: 100%; max-height: none; }
+.hy-dv.has-total-height .hy-dv-mobile { flex: 1 1 0; min-height: 0; max-height: none; }
+.hy-dv.has-total-height .hy-dv-body > .hy-dv-schedule { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.hy-dv.has-total-height .hy-dv-schedule > :not(.hy-dv-schedule-nav):not(.hy-dv-gantt-help):not(.hy-dv-keyboard-help) { flex: 1 1 0; min-height: 0; overflow: auto; }
+.hy-dv.has-total-height .hy-dv-gantt-split { height: 100%; }
+.hy-dv.has-total-height .hy-dv-gantt-pane { height: 100%; max-height: none; }
+.hy-dv.has-total-height .hy-dv-schedule-nav, .hy-dv.has-total-height .hy-dv-gantt-help { flex-shrink: 0; }
+.hy-dv.has-total-height .hy-dv-keyboard-help { margin: 0; padding: 3px 6px; flex-shrink: 0; }
+.hy-dv.has-total-height .hy-dv-state { overflow: auto; }
+.hy-dv.has-total-height .hy-dv-panel-wrap { position: relative; height: 0; z-index: 40; }
+.hy-dv.has-total-height .hy-dv-panel-wrap > .hy-dv-panel { position: absolute; top: 0; right: 0; max-height: min(420px, 70dvh); overflow: auto; }
+@container hy-data-view (max-width: 767px) {
+  .hy-dv.presentation-auto .hy-dv-desktop, .hy-dv.presentation-auto .hy-dv-bottom-scroll { display: none; }
+  .hy-dv.presentation-auto .hy-dv-mobile { display: block; }
+  .hy-dv.chrome-compact .hy-dv-tool .hy-dv-tool-icon { display: inline-flex; gap: 2px; }
+  .hy-dv.chrome-compact .hy-dv-tool .hy-dv-tool-label { display: none; }
+}
+.hy-dv.presentation-cards .hy-dv-desktop, .hy-dv.presentation-cards .hy-dv-bottom-scroll, .hy-dv.presentation-cards .hy-dv-schedule-wide { display: none; }
+.hy-dv.presentation-cards .hy-dv-mobile, .hy-dv.presentation-cards .hy-dv-schedule-narrow { display: block; }
+.hy-dv.presentation-cards .hy-dv-schedule-narrow.hy-dv-agenda { display: grid; }
+.hy-dv.presentation-table .hy-dv-desktop, .hy-dv.presentation-table .hy-dv-schedule-wide { display: block; }
+.hy-dv.presentation-table .hy-dv-calendar.hy-dv-schedule-wide { display: grid; }
+.hy-dv.presentation-table .hy-dv-mobile, .hy-dv.presentation-table .hy-dv-schedule-narrow { display: none; }
+.hy-dv .hy-dv-mobile { background: #f1f0eb; padding: 6px; overflow: auto; }
+.hy-dv .hy-dv-card { border: 1px solid var(--hy-line); padding: 8px; margin-bottom: 6px; background: var(--hy-paper); }
+.hy-dv .hy-dv-card dl { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 4px; margin: 0; }
+.hy-dv .hy-dv-card dt, .hy-dv .hy-dv-card dd { margin: 0; min-width: 0; }
+.hy-dv .hy-dv-card .hy-dv-cell-button { min-height: 36px; }
+.hy-dv .hy-dv-card-select { display: flex; justify-content: flex-end; }
+.hy-dv .hy-dv-mobile-group-title { min-height: 36px; width: 100%; text-align: left; }
+.hy-dv.presentation-cards .hy-dv-keyboard-help { display: none; }
+.hy-dv-workspace.has-total-height { display: flex; flex-direction: column; min-height: 0; }
+.hy-dv-workspace.has-total-height > .hy-dv { flex: 1 1 0; min-height: 0; }
+.hy-dv-workspace.has-total-height > :not(.hy-dv) { flex-shrink: 0; }
+.hy-dv-workspace.chrome-compact > .hy-dv-named-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 2px 6px; gap: 4px; }
+.hy-dv-workspace.chrome-compact > .hy-dv-named-tabs button { min-height: 28px; padding: 2px 6px; white-space: nowrap; }
+.hy-dv-workspace.chrome-compact > .hy-dv-view-save:empty { display: none; }
+
+@media (pointer: coarse) {
+  .hy-dv.chrome-compact .hy-dv-toolbar > button, .hy-dv.chrome-compact .hy-dv-toolbar select,
+  .hy-dv.chrome-compact .hy-dv-view-tabs button, .hy-dv.chrome-compact .hy-dv-schedule-nav button,
+  .hy-dv.chrome-compact .hy-dv-schedule-nav select, .hy-dv.chrome-compact .hy-dv-schedule-nav input,
+  .hy-dv.chrome-compact .hy-dv-toolbar-more button { min-height: 40px; }
+  .hy-dv.chrome-compact .hy-dv-toolbar .hy-dv-search { height: 40px; }
+}
+
+.hy-dv-group-rule { min-width: 0; border: 1px solid var(--hy-line-soft); border-radius: 4px; padding: 8px; }
+.hy-dv-group-order { min-width: 0; }
+.hy-dv-group-order > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
+.hy-dv-group-order h4 { margin: 0; font: inherit; font-weight: 600; }
+.hy-dv-group-order-list { list-style: none; max-height: 280px; overflow: auto; margin: 0; padding: 0; }
+.hy-dv-group-order-list > li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 146px; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--hy-line-soft); }
+.hy-dv-group-order-label { min-width: 0; overflow-wrap: anywhere; }
+
+/* Header actions reserve their space and use the browser top layer above sticky columns. */
+.hy-dv-column-heading { display: flex; align-items: center; gap: 4px; min-width: 0; }
+.hy-dv-column-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hy-dv .hy-dv-header-menu-trigger { flex: 0 0 24px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: 0; }
+.hy-dv th:hover .hy-dv-header-menu-trigger, .hy-dv th:focus-within .hy-dv-header-menu-trigger, .hy-dv .hy-dv-header-menu-trigger[aria-expanded="true"] { opacity: 1; }
+.hy-dv .hy-dv-header-menu-trigger:hover, .hy-dv .hy-dv-header-menu-trigger[aria-expanded="true"] { background: var(--hy-accent-soft); }
+.hy-dv-header-menu { position: fixed; inset: auto; margin: 0; width: 264px; max-width: calc(100vw - 16px); max-height: min(520px, calc(100vh - 16px)); overflow: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--hy-line); border-radius: 6px; background: var(--hy-paper); color: var(--hy-ink); box-shadow: 0 8px 28px #16332530; }
+.hy-dv-header-menu button, .hy-dv-header-menu-fallback button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--hy-ink); font: inherit; text-align: left; cursor: pointer; }
+.hy-dv-header-menu button > span:first-child, .hy-dv-header-menu-fallback button > span:first-child { flex: 0 0 18px; text-align: center; }
+.hy-dv-header-menu button > span:last-child, .hy-dv-header-menu-fallback button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
+.hy-dv-header-menu button.has-separator, .hy-dv-header-menu-fallback button.has-separator { margin-top: 4px; border-top: 1px solid var(--hy-line); border-radius: 0; }
+.hy-dv-header-menu button:enabled:hover, .hy-dv-header-menu-fallback button:enabled:hover { background: var(--hy-accent-soft); }
+.hy-dv-header-menu button.hy-dv-danger, .hy-dv-header-menu-fallback button.hy-dv-danger { color: #9b3025; }
+.hy-dv-header-menu button:disabled, .hy-dv-header-menu-fallback button:disabled { opacity: .5; cursor: default; }
+.hy-dv-header-menu button:focus-visible, .hy-dv-header-menu-fallback button:focus-visible, .hy-dv .hy-dv-header-menu-trigger:focus-visible { outline: 2px solid var(--hy-accent); outline-offset: -2px; }
+@media (hover: none) { .hy-dv .hy-dv-header-menu-trigger { opacity: 1; } }