/*
 * TW Frame / SectionBlock.
 *
 * This is the single visual owner for structural blocks: one table-derived
 * outer radius, one border, one chrome header and no ornamental elevation.
 * Feature styles may own layout and content, but must not create another skin.
 */

:is(
  .tw-frame,
  .tw-section-block,
  .tw-section,
  .tw-settings-section,
  .tw-property-group,
  .tw-job-item,
  .tw-preview-flow__node,
  .tw-kanban__column,
  .tw-week-calendar,
  .tw-month-calendar,
  .tw-year-calendar__month,
  .tw-day-calendar,
  .tw-record-hero,
  .tw-settings-hub-link
) {
  min-width: 0;
  overflow: var(--tw-frame-overflow, hidden);
  background: var(--tw-frame-background, var(--tw-color-surface));
  border: var(--tw-frame-border-width, 1px) solid
    var(--tw-frame-border-color, var(--tw-color-border));
  border-top-color: var(
    --tw-frame-border-top-color,
    var(--tw-frame-border-color, var(--tw-color-border))
  );
  border-top-width: var(
    --tw-frame-border-top-width,
    var(--tw-frame-border-width, 1px)
  );
  border-radius: var(--tw-frame-radius);
  box-shadow: none;
}

:is(
  .tw-section-block__header,
  .tw-section__header,
  .tw-settings-section__header,
  .tw-property-group__header,
  .tw-kanban__header
) {
  color: var(--tw-color-text);
  background: var(--tw-color-table-chrome);
  border-bottom: 1px solid var(--tw-color-border);
}

:is(
  .tw-section-block__body,
  .tw-section__body,
  .tw-settings-section__body,
  .tw-property-group__body
) {
  background: var(--tw-color-surface);
}

.tw-section-block {
  display: grid;
}

.tw-section-block__header {
  display: flex;
  min-height: var(--tw-section-header);
  padding: var(--tw-space-2) var(--tw-space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-2);
}

.tw-section-block__body {
  min-width: 0;
  padding: var(--tw-space-3);
}

.tw-section-block__body--flush,
.tw-section-block__body--table {
  padding: 0;
}

.tw-section-block__footer {
  display: flex;
  min-height: 42px;
  padding: var(--tw-space-2) var(--tw-space-3);
  align-items: center;
  justify-content: flex-end;
  gap: var(--tw-space-2);
  background: var(--tw-color-surface);
  border-top: 1px solid var(--tw-color-border);
}

/*
 * PropertyGroup shares the same Frame skin in RecordView, Dialog details and
 * builders. Context owners may place or reorder groups, but do not redraw
 * their header, collapse control or body.
 */
.tw-property-groups {
  display: grid;
  gap: var(--tw-space-3);
}

.tw-property-group {
  overflow: hidden;
}

.tw-property-group__header {
  display: flex;
  min-height: 38px;
  padding: 0 var(--tw-space-2);
  align-items: center;
  gap: var(--tw-space-2);
  cursor: pointer;
}

.tw-property-group__header h3 {
  min-width: 0;
  margin: 0;
  flex: 1;
  color: var(--tw-color-text);
  font-size: var(--tw-font-ui);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-ui);
  text-transform: none;
}

.tw-property-group__drag,
.tw-property-group__collapse {
  display: inline-grid;
  width: 26px;
  height: 26px;
  padding: 0;
  flex: 0 0 auto;
  place-items: center;
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius);
}

.tw-property-group__drag {
  cursor: grab;
  touch-action: none;
}

.tw-property-group__drag:active {
  cursor: grabbing;
}

.tw-property-group__drag:hover,
.tw-property-group__drag:focus-visible,
.tw-property-group__collapse:hover,
.tw-property-group__collapse:focus-visible {
  background: var(--tw-color-muted);
}

.tw-property-group__drag .tw-icon,
.tw-property-group__collapse .tw-icon {
  width: 14px;
  height: 14px;
}

.tw-property-group__body {
  min-width: 0;
  padding: var(--tw-space-3);
}

.tw-property-group[data-collapsed="true"] > :is(
  .tw-property-group__body,
  .tw-record-properties
) {
  display: none;
}

.tw-property-group[data-collapsed="true"] > .tw-property-group__header {
  border-bottom: 0;
}

/*
 * Navigation cards are links, not elevated marketing tiles. Their hover state
 * is the same restrained row feedback used by tables.
 */
.tw-settings-hub-link {
  border-radius: var(--tw-frame-radius);
  box-shadow: none;
  transform: none;
  transition:
    color var(--tw-motion-fast) var(--tw-ease-standard),
    background-color var(--tw-motion-fast) var(--tw-ease-standard),
    border-color var(--tw-motion-fast) var(--tw-ease-standard);
}

.tw-settings-hub-link:hover,
.tw-settings-hub-link:focus-visible {
  background: var(--tw-color-surface-subtle);
  border-color: var(--tw-color-border-strong);
  box-shadow: none;
  transform: none;
}

@media (min-width: 1181px) {
  .dialogs-workspace > [data-context-pane] {
    overflow: hidden;
    border: 1px solid var(--tw-color-border);
    border-radius: var(--tw-frame-radius);
    box-shadow: none;
  }
}