/* @headway/material — layout: header ↔ content spacing (Hiring canon) */

:root {
  /* Header */
  --nav-h: 56px;
  --header-h: var(--nav-h);
  --chrome-pill-h: 40px;
  --header-pad-x: 16px;
  --toolbar-gap: 8px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Content offset under fixed topnav */
  --content-offset-top: calc(var(--nav-h) + var(--safe-top));
  --hub-content-offset-top: 0px;
  --hub-autohide-offset-top: 12px;

  /* Shell / page / frame */
  --shell-gap: 16px;
  --page-inset: 4px;
  --frame-margin-top: 12px;
  --frame-margin-x: 16px;
  --frame-margin-bottom: 16px;
  --frame-radius: 14px;
}

/*
  App shell
  - standalone: pad top = nav height so content clears HwTopNav
  - hub (html.hw-in-hub): no local topnav → offset 0
  - hub autohide: small top gap
*/
.hw-tool-app,
.hw-ehiring-app,
.hw-tasks-v-app {
  height: 100%;
  background: var(--bg, #f4f7fb) !important;
}

.hw-tool-app .v-application__wrap,
.hw-ehiring-app .v-application__wrap,
.hw-tasks-v-app .v-application__wrap {
  min-height: 100% !important;
  height: 100%;
  overflow: hidden;
  background: var(--bg, #f4f7fb) !important;
  padding-top: var(--content-offset-top);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

html.hw-in-hub .hw-tool-app .v-application__wrap,
html.hw-in-hub .hw-ehiring-app .v-application__wrap,
html.hw-in-hub .hw-tasks-v-app .v-application__wrap {
  padding-top: var(--hub-content-offset-top);
}

body.hw-nav-autohide .hw-tool-app .v-application__wrap,
body.hw-nav-autohide .hw-ehiring-app .v-application__wrap,
body.hw-nav-autohide .hw-tasks-v-app .v-application__wrap {
  padding-top: var(--hub-autohide-offset-top);
}

html.hw-in-hub body.hw-nav-autohide .hw-tool-app .v-application__wrap,
html.hw-in-hub body.hw-nav-autohide .hw-ehiring-app .v-application__wrap,
html.hw-in-hub body.hw-nav-autohide .hw-tasks-v-app .v-application__wrap {
  padding-top: var(--hub-autohide-offset-top);
}

.hw-shell,
.hw-ehiring-shell {
  display: flex;
  gap: var(--shell-gap);
  flex: 1 1 auto;
  height: auto;
  max-height: 100%;
  min-height: 0;
  background: transparent;
}

.hw-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

.hw-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--page-inset);
  overflow: hidden;
}

/* List/table pages: page inset → 0; frame owns outer margin */
.hw-page:has(.hw-table-wrap:not(.hw-overview-wrap):not(.hw-settings-wrap)) {
  padding: 0;
  background: transparent;
}