/* public/theme/xwerp/shell.css - the signed-in shell's rules (the workspace, its pages and the published
   components they restyle), loaded after public.css.
   ============================================
   Moved out of index.html's inline <style> on 27-Oct-2026, rule for rule, as public.css was on 22-Oct: the boot
   document carries the boot contract only, and the xwui-exclusive gate reads it. Colours read the XWUI and
   --xwerp-* tokens (the old teal and gold literals now follow the Cortex accent and the warning family), so a
   theme or brand change reaches these rules too. Lengths stay here: this file is the host brand layer
   (src/kit/styles/tokens.css, rule 3), the one place a host keeps them.
   ============================================ */

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* The ground eases across. The class is added on the theme gesture,
   before the palette attribute flips, and taken off once the fade ends. */
html.xwerp-theme-anim,
html.xwerp-theme-anim * {
  transition-property: background-color, color, border-color, outline-color, fill, stroke, box-shadow !important;
  transition-duration: 0.4s !important;
  transition-timing-function: ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.xwerp-theme-anim,
  html.xwerp-theme-anim * {
    transition: none !important;
  }
}
/* Published components fall back to a light panel and a blue heading
   when these names are unset. Point them at the product surface and teal. */
html {
  --xwui-surface: var(--bg-primary);
  --xwui-text: var(--text-primary);
  --xwui-text-muted: var(--text-secondary);
  --xwui-primary: var(--accent-primary);
  --xwui-border-color: var(--border-color);
  --xwui-bg-subtle: var(--bg-secondary);
  --xwui-bg-hover: var(--bg-hover);
}
html:has(.xwui-shell-app[data-layout="dashboard"]),
body:has(.xwui-shell-app[data-layout="dashboard"]) {
  height: 100%;
  overflow: hidden;
}
#app:has(> .xwui-shell-app[data-layout="dashboard"]) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.xwui-shell-app[data-layout="dashboard"] {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
/* Collapsed, the published brand slot keeps room for an in-sidebar
   toggle this app does not render, so the mark sat at the bottom of
   the rail and was clipped. The mark owns that slot and stays centered. */
.xwui-shell-app-sidebar-collapsed[data-brand-mode="static"] .xwui-shell-app-sidebar-brand {
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-top: var(--spacing-sm) !important;
}
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-sidebar-brand-hit {
  justify-content: center;
  max-width: 100%;
}
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-sidebar-brand .xwui-logo-text-block {
  display: none;
}
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-sidebar-brand .xwui-logo-svg-host {
  width: 2.25rem;
  height: 2.25rem;
}
/* The published logo writes an inline invert on this box in dark mode.
   The mark already uses currentColor and the accent, so the invert
   paints the teal pink and the light ink as a dark smear. */
html[data-theme="dark"] .xwui-shell-app-sidebar-brand .xwui-logo-svg-host {
  filter: none !important;
}
/* The published shell stacks the page title and the host toolbar. One
   row: the title at the start, the toolbar filling the rest. */
.xwui-shell-app .xwui-shell-app-main-header {
  flex-direction: row;
  align-items: center;
}
.xwui-shell-app .xwui-shell-app-main-header-bar {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.xwui-shell-app .xwui-shell-app-main-header-content {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-inline-start: auto;
}
/* A long trail stays one line. The current page gives up space first,
   then the earlier crumbs, and the cut end shows an ellipsis. */
.xwui-shell-app .xwui-shell-app-breadcrumbs,
.xwui-shell-app .xwui-breadcrumbs,
.xwui-shell-app .xwui-breadcrumbs-list {
  max-width: 100%;
  min-width: 0;
}
.xwui-shell-app .xwui-breadcrumbs-list {
  flex-wrap: nowrap;
  overflow: hidden;
}
.xwui-shell-app .xwui-breadcrumbs-item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.xwui-shell-app .xwui-breadcrumbs-separator {
  flex: 0 0 auto;
}
.xwui-shell-app .xwui-breadcrumbs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.35rem;
}
.xwui-shell-app .xwui-breadcrumbs-icon .xwui-icon,
.xwui-shell-app .xwui-breadcrumbs-icon .xwui-icon-content {
  width: 1em;
  height: 1em;
}
.xwui-shell-app .xwui-breadcrumbs-link,
.xwui-shell-app .xwui-breadcrumbs-current {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The ask label shrinks before the shortcut leaves the header. */
.xwui-shell-app-main-header-content .xwui-stack:has(> .xwui-stack-item > .xwui-hidden-container) {
  min-width: 0;
  max-width: 100%;
}
.xwui-shell-app-main-header-content .xwui-stack:has(> .xwui-stack-item > .xwui-hidden-container) > .xwui-stack-item:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.xwui-shell-app-main-header-content .xwui-stack:has(> .xwui-stack-item > .xwui-hidden-container) .xwui-button {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.xwui-shell-app-main-header-content .xwui-stack:has(> .xwui-stack-item > .xwui-hidden-container) .xwui-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xwui-shell-app-main-header-content .xwui-kbd {
  flex-shrink: 0;
}
.xwui-shell-app .xwui-shell-app-main-header-content .xwui-box-container,
.xwui-shell-app .xwui-shell-app-main-header-content .xwui-container,
.xwui-shell-app .xwui-shell-app-main-header-content .xwui-stack,
.xwui-shell-app .xwui-shell-app-main-header-content .xwui-stack-wrapper {
  width: auto;
  max-width: 100%;
  min-width: 0;
}
.xwui-shell-app .xwui-shell-app-main-header-content .xwui-stack {
  flex-wrap: nowrap;
}
.xwui-shell-app-main .xwui-form-master,
.xwui-shell-app-main .xwui-dt {
  width: 100%;
  max-width: 100%;
}
/* The form master caps each panel, so the list stopped short of the
   main column and its action button never reached the end edge. */
.xwui-form-master-panel {
  width: 100%;
  max-width: none !important;
}
/* One rhythm on every screen. The heading, the badge, each section and
   the blocks under it sit the same gap apart. A stack that sets its own
   gap keeps that gap. */
.xwerp-page,
.xwerp-page-body,
.xwerp-page-section,
.xwerp-region,
.xwerp-page-body > div:not([class]),
.xwerp-page-section > div:not([class]),
.xwerp-region > div:not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.xwui-shell-app-main .xwui-form-master,
.xwui-shell-app-main .xwui-form-master-content,
.xwui-shell-app-main .xwui-form-master-panel,
.xwui-shell-app-main .xwui-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
/* The header's content slot is the count, status and actions. They sit
   on the title's line. */
.xwui-shell-app-main .xwui-shell-page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-sm);
}
.xwui-shell-app-main .xwui-shell-page-header-top {
  flex: 1 0 100%;
  margin: 0;
}
.xwui-shell-app-main .xwui-shell-page-header-top:empty {
  display: none;
}
.xwui-shell-app-main .xwui-shell-page-header-heading {
  flex: 0 0 auto;
  margin: 0;
}
/* The back arrow sits on the title's line, immediately before the label. */
.xwui-shell-app-main .xwui-shell-page-header-title:has(.xwerp-page-title) {
  display: flex;
  align-items: center;
  width: auto;
}
.xwerp-page-title {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
  width: auto;
  max-width: 100%;
  min-width: 0;
}
.xwerp-page-title > * {
  width: auto;
  flex: 0 0 auto;
}
.xwerp-page-back {
  flex: 0 0 auto;
}
.xwui-shell-app-main .xwui-shell-page-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  margin: 0;
  margin-inline-start: auto;
  min-width: 0;
}
/* Title row: the fixture badge stays on the label. Everything else in
   this slot sits at the end of the line. */
.xwerp-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  width: 100%;
}
.xwerp-page-actions-end {
  margin-inline-start: 0;
}
/* A list's own header: filters on the start side, table/cards at the end. */
.xwerp-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}
.xwerp-list-toolbar-end {
  margin-inline-start: auto;
}
.xwerp-fixture-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  max-width: 100%;
}
/* Approvals: the waiting count sits inside the control, clear of the
   stroke, in the product accent. */
.xwerp-approvals {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
}
.xwerp-approvals .xwui-stack {
  width: auto;
  flex: 0 0 auto;
}
.xwerp-approvals:has(.xwui-badge) .xwui-button {
  padding-inline-end: calc(var(--spacing-xl) + var(--spacing-md));
}
.xwerp-approvals .xwui-badge {
  position: absolute;
  inset-inline-end: var(--spacing-sm);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--accent-primary);
  color: var(--text-on-accent);
}
/* Row actions sit on the end edge of a full-width table. */
.xwui-dt-col-actions {
  text-align: end;
}
.xwui-dt-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}
.xwerp-actions-end {
  width: 100%;
}
/* Records List puts Add under the title. The title stays at the start
   and Add sits on the end edge of the list. */
.xwui-form-record-list-master-header,
.xwui-list-master-header,
.xwui-list-record-master-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: var(--spacing-md);
}
.xwui-form-record-list-master-header .xwui-form-master-panel-title,
.xwui-list-master-header .xwui-list-master-title,
.xwui-list-record-master-header .xwui-list-master-title {
  margin: 0;
  margin-inline-end: auto;
  text-align: start;
}
/* Only the Add control moves to the end. A lone title is also the last
   child, and pushing that child would park the heading on the right. */
.xwui-form-record-list-master-header > :last-child:not(:first-child),
.xwui-list-master-add {
  margin-inline-start: auto;
}
/* Date and time share the width of the field they replace. */
.xwerp-datetime {
  width: 100%;
}
.xwerp-datetime > * {
  flex: 1 1 0%;
  min-width: 0;
}
.xwui-shell-app .xwui-shell-app-tabstrip {
  flex-basis: 100%;
}
/* Every tab row: plain labels, and only the open one is a light accent
   chip. This covers XWUITabs and the form master's own button row, which
   is not a tab strip. */
.xwui-tabs.xwui-tabs-button .xwui-tabs-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  gap: var(--spacing-xs);
  padding: 0;
}
.xwui-tabs.xwui-tabs-button .xwui-tab {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: var(--border-width-regular) solid transparent !important;
  border-radius: var(--radius-full);
  box-shadow: none;
}
.xwui-tabs.xwui-tabs-button .xwui-tab:hover:not(.xwui-tab-disabled) {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
  color: var(--text-primary) !important;
}
.xwui-tabs.xwui-tabs-button .xwui-tab-active,
.xwui-tabs.xwui-tabs-button .xwui-tab-active:hover {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary)) !important;
  color: var(--text-primary) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.xwui-form-master-tabs-row .xwui-button.xwui-button-secondary,
.xwui-form-master-tabs-row .xwui-button.xwui-button-primary {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
  border-radius: var(--radius-full);
  box-shadow: none !important;
}
.xwui-form-master-tabs-row .xwui-button.xwui-button-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.xwui-form-master-tabs-row .xwui-button.xwui-button-primary,
.xwui-form-master-tabs-row .xwui-button.xwui-button-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary)) !important;
  color: var(--text-primary) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) !important;
  box-shadow: none !important;
}
/* The diagram canvas, once Open full page moves it onto the document.
   Fixed inside the shell would fill only the main column. */
.xwerp-wf-canvas-full {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}
.xwerp-wf-canvas-full .xwui-flowchart-diagram,
.xwerp-wf-canvas-full .xwui-flowchart-canvas,
.xwerp-wf-canvas-full .xwui-diagram {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.xwerp-wf-full-back {
  position: fixed;
  z-index: 9001;
  inset-block-start: var(--spacing-md);
  inset-inline-start: var(--spacing-md);
}
/* A row inside a section wears its icon. The published menu paints a
   dot there and hides the icon, so every child looked the same. These
   beat that sheet even when it arrives later. */
.xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-vertical .xwui-menu-submenu .xwui-menu-link::before {
  content: none !important;
}
.xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-vertical .xwui-menu-submenu .xwui-menu-link .xwui-icon {
  display: inline-flex !important;
  flex: none;
}
/* Pages sit under their module as rows, not as a card inside the
   module's card. */
.xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-submenu {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--spacing-sm);
  border-radius: 0;
  background: transparent;
}
/* The published sidebar ships its own blue selection and a separate
   black panel. The rail uses the page surface, and a chosen row uses
   the same teal as the rest of the product. */
[data-theme] .xwui-shell-app-sidebar:has(.xwui-shell-app-nav[data-nav-renderer="menu"]) {
  --xwui-shell-app-menu-sidebar-bg: var(--bg-primary);
  --xwui-shell-app-menu-sidebar-edge: color-mix(in srgb, var(--text-primary) 10%, transparent);
  background: var(--bg-primary);
}
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar {
  --xwui-menu-sidebar-fg: var(--text-primary);
  --xwui-menu-sidebar-fill: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary));
  --xwui-menu-sidebar-fill-fg: var(--accent-primary);
  --xwui-menu-sidebar-rule: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --xwui-menu-sidebar-badge-bg: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary));
  --xwui-menu-sidebar-badge-fg: var(--accent-primary);
  --xwui-menu-sidebar-panel-bg: var(--bg-primary);
  --xwui-menu-sidebar-dot: var(--accent-primary);
  color: var(--text-primary);
}
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link,
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-in-trail > .xwui-menu-link,
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item:not(.xwui-menu-item-disabled) > .xwui-menu-link:hover {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary));
  color: var(--accent-primary);
}
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected > .xwui-menu-link .xwui-icon,
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-in-trail > .xwui-menu-link .xwui-icon,
[data-theme] .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item:not(.xwui-menu-item-disabled) > .xwui-menu-link:hover .xwui-icon {
  color: var(--accent-primary);
}
/* Org structure: company card, department cards, people inside each card. */
.xwerp-org-stage { width: 100%; }
.xwerp-org.xwerp-org-fullscreen {
  position: fixed;
  z-index: 50;
  inset: 0;
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
  background: var(--bg-primary);
}
.xwerp-org-lens {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}
.xwerp-org-lens > :first-child {
  flex: 1 1 16rem;
  max-width: 22rem;
}
.xwerp-org {
  position: relative;
  height: 70dvh;
  min-height: 28rem;
  overflow: hidden;
  border: var(--border-width-regular) solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--bg-primary);
}
.xwerp-org-toolbar {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  pointer-events: none;
}
.xwerp-org-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  pointer-events: auto;
}
.xwerp-org-search { width: 16rem; max-width: 100%; }
.xwerp-org-matchnav {
  display: flex;
  align-items: center;
  height: 2.25rem;
  border: var(--border-width-regular) solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
}
.xwerp-org-matchnav[hidden] { display: none; }
.xwerp-org-matchcount {
  min-width: 5rem;
  padding-inline: var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary);
}
.xwerp-org-scroller { position: absolute; inset: 0; overflow: auto; }
.xwerp-org-tree {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-md);
  min-width: max-content;
  padding: 7rem var(--spacing-lg) var(--spacing-lg);
  transform-origin: top center;
}
.xwerp-org-horizontal .xwerp-org-tree {
  flex-direction: column;
  align-items: flex-start;
  transform-origin: center left;
}
.xwerp-org-tree[data-zoom="40"] { transform: scale(0.4); }
.xwerp-org-tree[data-zoom="50"] { transform: scale(0.5); }
.xwerp-org-tree[data-zoom="60"] { transform: scale(0.6); }
.xwerp-org-tree[data-zoom="70"] { transform: scale(0.7); }
.xwerp-org-tree[data-zoom="80"] { transform: scale(0.8); }
.xwerp-org-tree[data-zoom="90"] { transform: scale(0.9); }
.xwerp-org-tree[data-zoom="100"] { transform: scale(1); }
.xwerp-org-tree[data-zoom="110"] { transform: scale(1.1); }
.xwerp-org-tree[data-zoom="120"] { transform: scale(1.2); }
.xwerp-org-tree[data-zoom="130"] { transform: scale(1.3); }
.xwerp-org-tree[data-zoom="140"] { transform: scale(1.4); }
.xwerp-org-tree[data-zoom="150"] { transform: scale(1.5); }
.xwerp-org-tree[data-zoom="160"] { transform: scale(1.6); }
.xwerp-org-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xwerp-org-horizontal .xwerp-org-branch {
  flex-direction: row;
  align-items: center;
}
/* The department card is an XWUICard (outlined, hoverable); this host only gives it its width on the canvas. */
.xwerp-org-card {
  width: 15rem;
}
.xwerp-org-card-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.xwerp-org-card-title { flex: 1 1 auto; min-width: 0; }
.xwerp-org-card-open { cursor: pointer; }
.xwerp-org-card-tools { display: flex; flex: 0 0 auto; gap: var(--spacing-xs); }
.xwerp-org-card-tools .xwui-button { width: auto; }
.xwerp-org-assign { padding: var(--spacing-sm); }
.xwerp-org-assign .xwui-button {
  width: 100%;
  border-style: dashed;
  color: var(--text-secondary);
}
.xwerp-org-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}
/* The context sits in an XWUICard (filled) and its mark is an XWUIIcon circle tile; both rules are layout only. */
.xwerp-org-dialog-context {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.xwerp-org-dialog-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.xwerp-org-dialog-place { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
.xwerp-org-dialog-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.xwerp-org-lead {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.xwerp-org-lead-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--spacing-xl) + var(--spacing-sm));
  height: calc(var(--spacing-xl) + var(--spacing-sm));
  border-radius: 50%;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
}
.xwerp-org-lead-field { flex: 1 1 auto; min-width: 0; }
.xwerp-org-dialog-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.xwerp-org-dialog-footer .xwui-button { width: 100%; }
.xwerp-hr-board {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}
.xwerp-hr-board-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: stretch;
}
.xwerp-hr-board-hero { flex: 0 1 14rem; min-width: min(100%, 12rem); }
/* Layout only: the chips group's surface belongs to the XWUICard or XWUIPaper that holds it. */
.xwerp-hr-board-chips {
  flex: 1 1 18rem;
  min-width: min(100%, 16rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}
.xwerp-hr-board-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}
.xwerp-hr-board-stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: stretch;
}
.xwerp-hr-board-diagram { flex: 1 1 100%; min-width: min(100%, 18rem); }
.xwerp-hr-board-rail { flex: 1 1 18rem; min-width: min(100%, 16rem); }
.xwerp-hr-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 100%;
}
.xwerp-hr-chart-title,
.xwerp-hr-chart-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
.xwerp-hr-chart-plot { width: 100%; min-height: 20rem; }
/* Studio glass, on the tokens this shell already uses. The wash is the
   accent at a low mix, so the hero, the workforce, the chart and the
   rail read as one set. These beat the earlier board rules by specificity. */
.xwerp-hr-board-hero .xwui-card,
.xwerp-hr-board-diagram .xwui-card,
.xwerp-hr-board-rail .xwui-card,
.xwerp-hr-board + .xwui-box .xwui-card {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary)),
      var(--bg-primary) 5.5rem
    );
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, var(--accent-primary) 8%, transparent);
  overflow: clip;
}
.xwerp-hr-board-hero .xwui-card { height: 100%; }
.xwerp-hr-board .xwerp-hr-board-chips { justify-content: center; }
.xwerp-hr-board .xwerp-hr-board-hero {
  flex: 1 1 14rem;
  max-width: 18rem;
}
.xwerp-hr-board .xwerp-hr-board-diagram,
.xwerp-hr-board .xwerp-hr-board-stage,
.xwerp-hr-board .xwerp-hr-board-rail,
.xwerp-hr-board .xwerp-hr-chart-plot {
  min-width: 0;
  max-width: 100%;
}
.xwerp-hr-board .xwerp-hr-chart-plot {
  overflow: hidden;
}
.xwerp-hr-board .xwerp-hr-chart-plot > * {
  max-width: 100%;
}
@media (min-width: 1100px) {
  .xwerp-hr-board .xwerp-hr-board-diagram { flex: 1 1 32rem; }
  .xwerp-hr-board .xwerp-hr-board-rail { flex: 0 1 22rem; }
}
.xwerp-hr-board-rail .xwerp-hr-person:last-child { border-bottom: none; }
/* The pay card and the link list sit under the chart. Same glass as the
   cards above, and each figure gets its own tile so a long label cannot
   collide with the next value. */
.xwerp-hr-board > :last-child .xwui-card,
.xwerp-hr-board ~ .xwerp-page-section {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary)),
      var(--bg-primary) 5.5rem
    );
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, var(--accent-primary) 8%, transparent);
}
.xwerp-hr-board ~ .xwerp-page-section { padding: var(--spacing-lg); }
.xwerp-hr-board > :last-child .xwui-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.xwerp-hr-board > :last-child .xwui-alert { border-radius: 0.75rem; }
/* The published warning is a gold box with gold copy. On this card it
   reads as a quiet note: amber only on the mark and the fact, the
   reason in the same secondary ink as the figure labels. */
.xwerp-hr-board > :last-child .xwui-alert.xwui-alert-warning {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: none;
  border-inline-start: 3px solid var(--xwerp-warn);
  background: color-mix(in srgb, var(--xwerp-warn) 12%, var(--bg-primary));
  color: var(--text-secondary);
}
.xwerp-hr-board > :last-child .xwui-alert-glyph {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--xwerp-warn) 22%, transparent);
  color: var(--xwerp-warning-text);
}
html[data-theme="dark"] .xwerp-hr-board > :last-child .xwui-alert-glyph { color: var(--xwerp-warn); }
.xwerp-hr-board > :last-child .xwui-alert-content {
  gap: 0.2rem;
  min-width: 0;
}
.xwerp-hr-board > :last-child .xwui-alert-title {
  color: var(--xwerp-warning-text);
  font-weight: 650;
  line-height: 1.35;
}
html[data-theme="dark"] .xwerp-hr-board > :last-child .xwui-alert-title { color: var(--xwerp-warn); }
.xwerp-hr-board > :last-child .xwui-alert-message {
  color: var(--text-secondary);
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
}
.xwerp-hr-board > :last-child .xwui-card-body .xwui-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--spacing-sm);
  width: 100%;
  align-items: stretch;
}
.xwerp-hr-board > :last-child .xwui-stack-item {
  min-width: 0;
  min-height: 5.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.xwerp-hr-board > :last-child .xwui-statistic-title,
.xwerp-hr-board > :last-child .xwui-typography-caption {
  color: var(--text-secondary);
  line-height: 1.35;
}
.xwerp-hr-board > :last-child .xwui-statistic-value,
.xwerp-hr-board > :last-child .xwui-display-monetary,
.xwerp-hr-board > :last-child .xwui-display-monetary__figure,
.xwerp-hr-board > :last-child .xwui-display-monetary__currency {
  color: var(--text-primary);
}
.xwerp-report-plot { width: 100%; min-height: 20rem; }
.xwerp-report-plot--radial { max-width: 36rem; margin-inline: auto; }
.xwerp-leave-board .xwui-hr-leave-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.xwerp-leave-board .xwui-hr-leave-card {
  flex: 1 1 8rem;
  min-width: 8rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin: 0;
  padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-lg, 0.9rem);
  text-align: start;
  background: oklch(96% 0.02 250);
  color: oklch(40% 0.04 250);
}
.xwerp-leave-board .xwui-hr-leave-mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(91% 0.04 250);
}
.xwerp-leave-board .xwui-hr-leave-card > strong {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.xwerp-leave-board .xwui-hr-leave-card > div,
.xwerp-leave-board .xwui-hr-leave-ratio {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.xwerp-leave-board .xwerp-leave-tone--green { background: oklch(96.2% 0.03 155); color: oklch(42% 0.11 155); }
.xwerp-leave-board .xwerp-leave-tone--green .xwui-hr-leave-mark { background: oklch(91% 0.07 155); }
.xwerp-leave-board .xwerp-leave-tone--peach { background: oklch(96.5% 0.03 75); color: oklch(48% 0.1 65); }
.xwerp-leave-board .xwerp-leave-tone--peach .xwui-hr-leave-mark { background: oklch(92% 0.07 75); }
.xwerp-leave-board .xwerp-leave-tone--sky { background: oklch(96% 0.025 250); color: oklch(45% 0.12 255); }
.xwerp-leave-board .xwerp-leave-tone--sky .xwui-hr-leave-mark { background: oklch(91% 0.05 250); }
.xwerp-leave-board .xwerp-leave-tone--pink { background: oklch(96% 0.03 350); color: oklch(48% 0.12 350); }
.xwerp-leave-board .xwerp-leave-tone--pink .xwui-hr-leave-mark { background: oklch(92% 0.06 350); }
.xwerp-leave-board .xwerp-leave-tone--rose { background: oklch(96% 0.03 15); color: oklch(48% 0.14 20); }
.xwerp-leave-board .xwerp-leave-tone--rose .xwui-hr-leave-mark { background: oklch(91% 0.07 15); }
.xwerp-leave-board .xwerp-leave-tone--amber { background: oklch(96.5% 0.04 85); color: oklch(48% 0.12 70); }
.xwerp-leave-board .xwerp-leave-tone--amber .xwui-hr-leave-mark { background: oklch(92% 0.08 85); }
.xwerp-leave-board .xwerp-leave-tone--violet { background: oklch(96% 0.03 300); color: oklch(45% 0.12 295); }
.xwerp-leave-board .xwerp-leave-tone--violet .xwui-hr-leave-mark { background: oklch(91% 0.06 300); }
.xwerp-leave-board .xwerp-leave-tone--slate { background: oklch(96% 0.01 250); color: oklch(42% 0.03 255); }
.xwerp-leave-board .xwerp-leave-tone--slate .xwui-hr-leave-mark { background: oklch(91% 0.02 250); }
html[data-theme="dark"] .xwerp-leave-board .xwui-hr-leave-card { background: oklch(30% 0.025 250); color: oklch(88% 0.03 250); }
html[data-theme="dark"] .xwerp-leave-board .xwui-hr-leave-mark { background: oklch(38% 0.04 250); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--green { background: oklch(32% 0.05 155); color: oklch(88% 0.08 155); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--green .xwui-hr-leave-mark { background: oklch(40% 0.08 155); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--peach { background: oklch(33% 0.05 75); color: oklch(90% 0.07 75); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--peach .xwui-hr-leave-mark { background: oklch(41% 0.08 75); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--sky { background: oklch(32% 0.04 250); color: oklch(88% 0.06 250); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--sky .xwui-hr-leave-mark { background: oklch(40% 0.07 250); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--pink { background: oklch(32% 0.05 350); color: oklch(90% 0.07 350); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--pink .xwui-hr-leave-mark { background: oklch(40% 0.08 350); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--rose { background: oklch(32% 0.05 20); color: oklch(88% 0.08 20); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--rose .xwui-hr-leave-mark { background: oklch(40% 0.08 20); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--amber { background: oklch(34% 0.05 85); color: oklch(90% 0.07 85); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--amber .xwui-hr-leave-mark { background: oklch(42% 0.08 85); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--violet { background: oklch(32% 0.05 300); color: oklch(90% 0.07 300); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--violet .xwui-hr-leave-mark { background: oklch(40% 0.08 300); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--slate { background: oklch(32% 0.015 250); color: oklch(86% 0.02 250); }
html[data-theme="dark"] .xwerp-leave-board .xwerp-leave-tone--slate .xwui-hr-leave-mark { background: oklch(40% 0.03 250); }
.xwerp-day-board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.xwerp-day-card {
  flex: 1 1 8rem;
  min-width: 8rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  text-align: start;
}
.xwerp-day-mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xwerp-day-label { font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.xwerp-day-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.xwerp-day-tone--green { background: oklch(96.2% 0.03 155); color: oklch(42% 0.11 155); }
.xwerp-day-tone--green .xwerp-day-mark { background: oklch(91% 0.07 155); }
.xwerp-day-tone--rose { background: oklch(96% 0.03 15); color: oklch(48% 0.14 20); }
.xwerp-day-tone--rose .xwerp-day-mark { background: oklch(91% 0.07 15); }
.xwerp-day-tone--amber { background: oklch(96.5% 0.04 85); color: oklch(48% 0.12 70); }
.xwerp-day-tone--amber .xwerp-day-mark { background: oklch(92% 0.08 85); }
.xwerp-day-tone--sky { background: oklch(96% 0.025 250); color: oklch(45% 0.12 255); }
.xwerp-day-tone--sky .xwerp-day-mark { background: oklch(91% 0.05 250); }
.xwerp-day-tone--slate { background: oklch(96% 0.01 250); color: oklch(42% 0.03 255); }
.xwerp-day-tone--slate .xwerp-day-mark { background: oklch(91% 0.02 250); }
.xwerp-day-tone--violet { background: oklch(96% 0.03 300); color: oklch(45% 0.12 295); }
.xwerp-day-tone--violet .xwerp-day-mark { background: oklch(91% 0.06 300); }
html[data-theme="dark"] .xwerp-day-tone--green { background: oklch(32% 0.05 155); color: oklch(88% 0.08 155); }
html[data-theme="dark"] .xwerp-day-tone--green .xwerp-day-mark { background: oklch(40% 0.08 155); }
html[data-theme="dark"] .xwerp-day-tone--rose { background: oklch(32% 0.05 20); color: oklch(88% 0.08 20); }
html[data-theme="dark"] .xwerp-day-tone--rose .xwerp-day-mark { background: oklch(40% 0.08 20); }
html[data-theme="dark"] .xwerp-day-tone--amber { background: oklch(34% 0.05 85); color: oklch(90% 0.07 85); }
html[data-theme="dark"] .xwerp-day-tone--amber .xwerp-day-mark { background: oklch(42% 0.08 85); }
html[data-theme="dark"] .xwerp-day-tone--sky { background: oklch(32% 0.04 250); color: oklch(88% 0.06 250); }
html[data-theme="dark"] .xwerp-day-tone--sky .xwerp-day-mark { background: oklch(40% 0.07 250); }
html[data-theme="dark"] .xwerp-day-tone--slate { background: oklch(32% 0.015 250); color: oklch(86% 0.02 250); }
html[data-theme="dark"] .xwerp-day-tone--slate .xwerp-day-mark { background: oklch(40% 0.03 250); }
html[data-theme="dark"] .xwerp-day-tone--violet { background: oklch(32% 0.05 300); color: oklch(90% 0.07 300); }
html[data-theme="dark"] .xwerp-day-tone--violet .xwerp-day-mark { background: oklch(40% 0.08 300); }
.xwerp-attend-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-sm);
}
.xwerp-attend-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  min-width: 0;
  min-height: 7.25rem;
  padding: var(--spacing-sm);
  text-align: start;
  font: inherit;
  color: inherit;
}
.xwerp-attend-card[role="button"] { cursor: pointer; }
/* The attendance card and chip surfaces, their "on" state and their focus ring are the XWUI card / chip / item
   that hosts them (selected style), so these rules keep layout only. */
.xwerp-attend-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
}
.xwerp-attend-mark {
  display: inline-flex;
  flex: 0 0 auto;
}
.xwerp-attend-title .xwui-typography {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.xwerp-attend-hint .xwui-typography {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary, oklch(48% 0.02 250));
}
.xwerp-attend-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: auto;
  direction: ltr;
  unicode-bidi: isolate;
}
.xwerp-attend-figure .xwui-typography {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.xwerp-attend-sep .xwui-typography {
  font-weight: 500;
  color: var(--text-tertiary, oklch(62% 0.02 250));
}
.xwerp-attend-ink--green,
.xwerp-attend-ink--green .xwui-typography { color: oklch(40% 0.12 155); }
.xwerp-attend-ink--rose,
.xwerp-attend-ink--rose .xwui-typography { color: oklch(46% 0.16 25); }
.xwerp-attend-ink--amber,
.xwerp-attend-ink--amber .xwui-typography { color: oklch(46% 0.13 70); }
.xwerp-attend-ink--teal,
.xwerp-attend-ink--teal .xwui-typography { color: oklch(38% 0.09 195); }
.xwerp-attend-ink--violet,
.xwerp-attend-ink--violet .xwui-typography { color: oklch(44% 0.13 295); }
.xwerp-attend-dot.xwerp-attend-ink--green { background: oklch(52% 0.14 155); }
.xwerp-attend-dot.xwerp-attend-ink--rose { background: oklch(58% 0.16 25); }
.xwerp-attend-dot.xwerp-attend-ink--amber { background: oklch(68% 0.14 80); }
.xwerp-attend-dot.xwerp-attend-ink--teal { background: oklch(55% 0.1 195); }
.xwerp-attend-dot.xwerp-attend-ink--sky { background: oklch(58% 0.12 250); }
.xwerp-attend-dot.xwerp-attend-ink--slate { background: oklch(55% 0.03 255); }
.xwerp-attend-dot.xwerp-attend-ink--violet { background: oklch(55% 0.14 295); }
html[data-theme="dark"] .xwerp-attend-ink--green,
html[data-theme="dark"] .xwerp-attend-ink--green .xwui-typography { color: oklch(82% 0.12 155); }
html[data-theme="dark"] .xwerp-attend-ink--rose,
html[data-theme="dark"] .xwerp-attend-ink--rose .xwui-typography { color: oklch(80% 0.1 25); }
html[data-theme="dark"] .xwerp-attend-ink--amber,
html[data-theme="dark"] .xwerp-attend-ink--amber .xwui-typography { color: oklch(84% 0.1 85); }
html[data-theme="dark"] .xwerp-attend-ink--teal,
html[data-theme="dark"] .xwerp-attend-ink--teal .xwui-typography { color: oklch(82% 0.08 195); }
html[data-theme="dark"] .xwerp-attend-ink--violet,
html[data-theme="dark"] .xwerp-attend-ink--violet .xwui-typography { color: oklch(84% 0.08 300); }
.xwerp-attend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}
.xwerp-attend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.xwerp-attend-chip-label .xwui-typography {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.xwerp-attend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .xwerp-attend-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .xwerp-attend-strip { grid-template-columns: minmax(0, 1fr); }
}
.xwerp-attend-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
  align-items: start;
}
@media (max-width: 800px) {
  .xwerp-attend-controls { grid-template-columns: minmax(0, 1fr); }
}
.xwerp-office { display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.xwerp-day {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem 0.95rem;
  border: var(--border-width-regular) solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 1rem;
  background: var(--bg-primary);
}
html[data-theme="dark"] .xwerp-day {
  background: color-mix(in srgb, white 4%, var(--bg-primary));
  border-color: color-mix(in srgb, white 10%, transparent);
}
.xwerp-day-top { display: flex; align-items: center; gap: 1rem; }
.xwerp-day-mix {
  flex: 1 1 auto;
  display: flex;
  height: 0.7rem;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.xwerp-day-seg { flex: 0 0 var(--share); width: var(--share); min-width: 0; }
.xwerp-day-seg[data-status="present"] { background: var(--accent-primary); }
.xwerp-day-seg[data-status="partial"] { background: var(--xwerp-warn); }
.xwerp-day-seg[data-status="on_leave"] { background: var(--xwerp-accent-text); }
.xwerp-day-seg[data-status="absent"] { background: color-mix(in srgb, currentColor 38%, transparent); }
.xwerp-day-seg[data-status="holiday"],
.xwerp-day-seg[data-status="weekend"] { background: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.xwerp-day-total { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.xwerp-day-total-figure { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--accent-primary); }
html[data-theme="dark"] .xwerp-day-total-figure { color: var(--xwerp-accent-text); }
.xwerp-day-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* The status chip is an XWUIItem (appearance card, selected style ring): it draws the surface and the chip that is
   on. This rule spaces its parts only. */
.xwerp-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.xwerp-day-swatch { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, currentColor 35%, transparent); }
.xwerp-day-swatch[data-status="present"] { background: var(--accent-primary); }
.xwerp-day-swatch[data-status="partial"] { background: var(--xwerp-warn); }
.xwerp-day-swatch[data-status="on_leave"] { background: var(--xwerp-accent-text); }
.xwerp-day-chip-count { font-weight: 700; }
.xwerp-lanes { display: flex; flex-direction: column; }
.xwerp-lane {
  display: grid;
  grid-template-columns: auto minmax(9rem, 0.9fr) minmax(11rem, 1.5fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.15rem;
  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.xwerp-lane:first-child { border-top: none; }
/* XWUIAvatar paints the accent face itself (hue, gradient fill, ink); the host only holds its place in the lane. */
.xwerp-lane-avatar { display: inline-flex; flex: 0 0 auto; }
.xwerp-lane-who { display: flex; flex-direction: column; min-width: 0; gap: 0.05rem; }
.xwerp-lane-name { font-weight: 600; }
.xwerp-lane-role,
.xwerp-lane-times { color: var(--text-secondary); }
.xwerp-lane-track { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.xwerp-lane-rail {
  position: relative;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.xwerp-lane-fill,
.xwerp-lane-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--from);
  border-radius: 999px;
  background: var(--accent-primary);
}
html[data-theme="dark"] .xwerp-lane-fill,
html[data-theme="dark"] .xwerp-lane-mark { background: var(--xwerp-accent-text); }
.xwerp-lane-fill { width: calc(var(--to) - var(--from)); }
.xwerp-lane-mark { width: 3px; }
.xwerp-lane[data-status="partial"] .xwerp-lane-fill,
.xwerp-lane[data-status="partial"] .xwerp-lane-mark { background: var(--xwerp-warn); }
.xwerp-lane-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.xwerp-lane-worked { font-weight: 700; font-variant-numeric: tabular-nums; }
.xwerp-ranks { display: flex; flex-direction: column; gap: 0.7rem; }
.xwerp-rank {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
}
.xwerp-rank-name { font-weight: 600; min-width: 0; }
.xwerp-rank-track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  overflow: hidden;
}
.xwerp-rank-fill { height: 100%; width: var(--share); background: var(--accent-primary); border-radius: 999px; }
html[data-theme="dark"] .xwerp-rank-fill { background: var(--xwerp-accent-text); }
.xwerp-rank-line { color: var(--text-secondary); white-space: nowrap; }
.xwerp-shift-ruler {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.xwerp-shift-end { font-weight: 700; font-variant-numeric: tabular-nums; }
.xwerp-shift-rail {
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(to inline-end, var(--accent-primary), var(--xwerp-accent-text) 70%, var(--xwerp-warn));
}
html[data-theme="dark"] .xwerp-shift-rail {
  background: linear-gradient(to inline-end, var(--accent-primary), var(--xwerp-accent-text) 62%, var(--xwerp-warn));
}
/* The attendance register tabs are XWUITabs in its line variant, which draws the underline bar; no theme repaint. */
@media (max-width: 800px) {
  .xwerp-lane, .xwerp-rank { grid-template-columns: minmax(0, 1fr); }
  .xwerp-lane-meta, .xwerp-day-total { justify-content: flex-start; align-items: flex-start; }
}
/* The KPI card is an XWUICard in its filled variant (no outline, no shadow, its own corners); the theme only lets it
   fill the grid row. */
.xwerp-kpi-card.xwui-card,
.xwerp-kpi-card .xwui-card {
  height: 100%;
}
.xwerp-kpi-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.xwerp-kpi-head > .xwui-stack {
  flex-wrap: nowrap;
  align-items: center;
}
.xwerp-kpi-head .xwui-stack-item:last-child {
  flex: 1 1 auto;
  min-width: 0;
}
.xwerp-area-mark .xwerp-kpi-mark {
  border-radius: var(--radius-lg, 0.9rem);
}
.xwerp-area-mark {
  flex: 0 0 auto;
}
.xwerp-area-mark.xwerp-kpi-tone--sky { color: oklch(42% 0.1 255); }
.xwerp-area-mark.xwerp-kpi-tone--amber { color: oklch(46% 0.11 70); }
.xwerp-area-mark.xwerp-kpi-tone--green { color: oklch(40% 0.1 155); }
.xwerp-area-mark.xwerp-kpi-tone--violet { color: oklch(42% 0.11 295); }
.xwerp-area-mark.xwerp-kpi-tone--slate { color: oklch(40% 0.03 255); }
html[data-theme="dark"] .xwerp-area-mark.xwerp-kpi-tone--sky { color: oklch(88% 0.06 250); }
html[data-theme="dark"] .xwerp-area-mark.xwerp-kpi-tone--amber { color: oklch(90% 0.07 85); }
html[data-theme="dark"] .xwerp-area-mark.xwerp-kpi-tone--green { color: oklch(88% 0.08 155); }
html[data-theme="dark"] .xwerp-area-mark.xwerp-kpi-tone--violet { color: oklch(90% 0.07 300); }
html[data-theme="dark"] .xwerp-area-mark.xwerp-kpi-tone--slate { color: oklch(86% 0.02 250); }
.xwerp-kpi-card .xwui-statistic-title,
.xwerp-kpi-card .xwui-statistic-value,
.xwerp-kpi-card .xwui-statistic-content,
.xwerp-kpi-card .xwui-typography,
.xwerp-kpi-card .xwui-tag {
  color: inherit;
}
.xwerp-kpi-card .xwui-typography { opacity: 0.82; }
.xwerp-kpi-tone--sky .xwui-card,
.xwerp-kpi-tone--sky.xwui-card { background: oklch(96% 0.025 250); color: oklch(42% 0.1 255); }
.xwerp-kpi-tone--sky .xwerp-kpi-mark { background: oklch(91% 0.05 250); }
.xwerp-kpi-tone--amber .xwui-card,
.xwerp-kpi-tone--amber.xwui-card { background: oklch(96.5% 0.04 85); color: oklch(46% 0.11 70); }
.xwerp-kpi-tone--amber .xwerp-kpi-mark { background: oklch(92% 0.08 85); }
.xwerp-kpi-tone--green .xwui-card,
.xwerp-kpi-tone--green.xwui-card { background: oklch(96.2% 0.03 155); color: oklch(40% 0.1 155); }
.xwerp-kpi-tone--green .xwerp-kpi-mark { background: oklch(91% 0.07 155); }
.xwerp-kpi-tone--violet .xwui-card,
.xwerp-kpi-tone--violet.xwui-card { background: oklch(96% 0.03 300); color: oklch(42% 0.11 295); }
.xwerp-kpi-tone--violet .xwerp-kpi-mark { background: oklch(91% 0.06 300); }
.xwerp-kpi-tone--slate .xwui-card,
.xwerp-kpi-tone--slate.xwui-card { background: oklch(96% 0.01 250); color: oklch(40% 0.03 255); }
.xwerp-kpi-tone--slate .xwerp-kpi-mark { background: oklch(91% 0.02 250); }
html[data-theme="dark"] .xwerp-kpi-tone--sky .xwui-card,
html[data-theme="dark"] .xwerp-kpi-tone--sky.xwui-card { background: oklch(32% 0.04 250); color: oklch(88% 0.06 250); }
html[data-theme="dark"] .xwerp-kpi-tone--sky .xwerp-kpi-mark { background: oklch(40% 0.07 250); }
html[data-theme="dark"] .xwerp-kpi-tone--amber .xwui-card,
html[data-theme="dark"] .xwerp-kpi-tone--amber.xwui-card { background: oklch(34% 0.05 85); color: oklch(90% 0.07 85); }
html[data-theme="dark"] .xwerp-kpi-tone--amber .xwerp-kpi-mark { background: oklch(42% 0.08 85); }
html[data-theme="dark"] .xwerp-kpi-tone--green .xwui-card,
html[data-theme="dark"] .xwerp-kpi-tone--green.xwui-card { background: oklch(32% 0.05 155); color: oklch(88% 0.08 155); }
html[data-theme="dark"] .xwerp-kpi-tone--green .xwerp-kpi-mark { background: oklch(40% 0.08 155); }
html[data-theme="dark"] .xwerp-kpi-tone--violet .xwui-card,
html[data-theme="dark"] .xwerp-kpi-tone--violet.xwui-card { background: oklch(32% 0.05 300); color: oklch(90% 0.07 300); }
html[data-theme="dark"] .xwerp-kpi-tone--violet .xwerp-kpi-mark { background: oklch(40% 0.08 300); }
html[data-theme="dark"] .xwerp-kpi-tone--slate .xwui-card,
html[data-theme="dark"] .xwerp-kpi-tone--slate.xwui-card { background: oklch(32% 0.015 250); color: oklch(86% 0.02 250); }
html[data-theme="dark"] .xwerp-kpi-tone--slate .xwerp-kpi-mark { background: oklch(40% 0.03 250); }
.xwerp-day-badge--green .xwui-badge,
.xwerp-day-badge--rose .xwui-badge,
.xwerp-day-badge--amber .xwui-badge,
.xwerp-day-badge--sky .xwui-badge,
.xwerp-day-badge--slate .xwui-badge,
.xwerp-day-badge--violet .xwui-badge {
  height: auto;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.xwerp-day-badge--green .xwui-badge { background: oklch(96.2% 0.03 155); color: oklch(42% 0.11 155); }
.xwerp-day-badge--rose .xwui-badge { background: oklch(96% 0.03 15); color: oklch(48% 0.14 20); }
.xwerp-day-badge--amber .xwui-badge { background: oklch(96.5% 0.04 85); color: oklch(48% 0.12 70); }
.xwerp-day-badge--sky .xwui-badge { background: oklch(96% 0.025 250); color: oklch(45% 0.12 255); }
.xwerp-day-badge--slate .xwui-badge { background: oklch(96% 0.01 250); color: oklch(42% 0.03 255); }
.xwerp-day-badge--violet .xwui-badge { background: oklch(96% 0.03 300); color: oklch(45% 0.12 295); }
.xwui-badge.xwui-badge-success:not(.xwui-badge-dot),
.xwui-badge.xwui-badge-warning:not(.xwui-badge-dot),
.xwui-badge.xwui-badge-error:not(.xwui-badge-dot),
.xwui-badge.xwui-badge-primary:not(.xwui-badge-dot),
.xwui-badge.xwui-badge-default:not(.xwui-badge-dot) {
  height: auto;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.xwui-badge.xwui-badge-success:not(.xwui-badge-dot) { background: oklch(96.2% 0.03 155); color: oklch(42% 0.11 155); }
.xwui-badge.xwui-badge-warning:not(.xwui-badge-dot) { background: oklch(96.5% 0.04 85); color: oklch(48% 0.12 70); }
.xwui-badge.xwui-badge-error:not(.xwui-badge-dot) { background: oklch(96% 0.03 15); color: oklch(48% 0.14 20); }
.xwui-badge.xwui-badge-primary:not(.xwui-badge-dot) { background: oklch(96% 0.025 190); color: oklch(40% 0.08 190); }
.xwui-badge.xwui-badge-default:not(.xwui-badge-dot) { background: oklch(96% 0.01 250); color: oklch(42% 0.03 255); }
html[data-theme="dark"] .xwerp-day-badge--green .xwui-badge,
html[data-theme="dark"] .xwui-badge.xwui-badge-success:not(.xwui-badge-dot) { background: oklch(32% 0.05 155); color: oklch(86% 0.08 155); }
html[data-theme="dark"] .xwerp-day-badge--rose .xwui-badge,
html[data-theme="dark"] .xwui-badge.xwui-badge-error:not(.xwui-badge-dot) { background: oklch(32% 0.05 20); color: oklch(86% 0.08 20); }
html[data-theme="dark"] .xwerp-day-badge--amber .xwui-badge,
html[data-theme="dark"] .xwui-badge.xwui-badge-warning:not(.xwui-badge-dot) { background: oklch(34% 0.05 85); color: oklch(88% 0.07 85); }
html[data-theme="dark"] .xwerp-day-badge--sky .xwui-badge { background: oklch(32% 0.04 250); color: oklch(86% 0.06 250); }
html[data-theme="dark"] .xwerp-day-badge--violet .xwui-badge { background: oklch(32% 0.05 300); color: oklch(86% 0.07 300); }
html[data-theme="dark"] .xwui-badge.xwui-badge-primary:not(.xwui-badge-dot) { background: oklch(32% 0.04 190); color: oklch(86% 0.06 190); }
html[data-theme="dark"] .xwerp-day-badge--slate .xwui-badge,
html[data-theme="dark"] .xwui-badge.xwui-badge-default:not(.xwui-badge-dot) { background: oklch(32% 0.012 250); color: oklch(82% 0.02 250); }
.xwerp-profile {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  margin-inline: calc(var(--spacing-lg) * -1);
}
/* Reserve the scrollbar so a taller tab does not narrow the column.
   The page itself still scrolls; nothing here is pinned. */
.xwui-shell-app-main:has(.xwerp-profile) > .xwui-panel > .xwui-panel-body {
  scrollbar-gutter: stable;
}
.xwerp-profile-picks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}
.xwerp-profile-pick { min-width: 0; }
.xwerp-profile-pick-control {
  width: 16rem;
  max-width: 42vw;
  min-width: 0;
}
.xwerp-profile-pick-control > * { width: 100%; }
.xwerp-profile-pick-control .xwui-select-value {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.xwerp-profile-pick-control .xwui-select-value::before {
  content: attr(data-label);
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.xwerp-profile-pick-control .xwui-select-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xwerp-profile-cover {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: none;
  border-radius: 0;
  background: var(--bg-primary);
}
.xwerp-profile-withheld {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 1.5rem 0.2rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--xwerp-warn) 11%, var(--bg-primary));
}
.xwerp-profile-withheld-mark {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--xwerp-warn) 20%, transparent);
  color: var(--xwerp-warning-text);
}
html[data-theme="dark"] .xwerp-profile-withheld-mark { color: var(--xwerp-warn); }
.xwerp-profile-withheld-copy { flex: 1 1 auto; min-width: 0; }
.xwerp-profile-withheld-title,
.xwerp-profile-withheld-title .xwui-typography {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--xwerp-warning-text);
}
html[data-theme="dark"] .xwerp-profile-withheld-title,
html[data-theme="dark"] .xwerp-profile-withheld-title .xwui-typography { color: var(--xwerp-warn); }
.xwerp-profile-withheld-body,
.xwerp-profile-withheld-body .xwui-typography {
  margin: 0.15rem 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}
.xwerp-profile-banner {
  height: 14rem;
  width: 100%;
  /* audit-xwui-conformance-ignore: decorative aria-hidden cover art above the profile, not a notification banner */
  background:
    radial-gradient(80% 140% at 8% 0%, color-mix(in srgb, var(--accent-primary) 34%, white), transparent 62%),
    radial-gradient(70% 130% at 100% 100%, color-mix(in srgb, var(--xwerp-warn) 30%, white), transparent 58%),
    linear-gradient(100deg, var(--xwerp-tint) 0%, var(--xwerp-tint) 52%, var(--xwerp-warning-tint) 100%);
}
html[data-theme="dark"] .xwerp-profile-banner {
  background:
    radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--xwerp-accent-text) 55%, transparent), transparent 58%),
    radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--xwerp-warn) 42%, var(--accent-primary)), transparent 62%),
    linear-gradient(100deg, var(--xwerp-tint-2) 0%, var(--accent-primary) 58%, var(--xwerp-tint-2) 100%);
}
.xwerp-profile-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.75rem;
  padding: 0.55rem 1.5rem 0.7rem;
  padding-inline-start: calc(1.5rem + 9rem + 1.15rem);
}
/* XWUIAvatar (size 144 = 9rem, bordered, accent hue) paints the face and its ring over the cover; the host places
   it. --border-avatar-width is the avatar's own ring token, doubled so the ring still cuts the avatar from the cover. */
.xwerp-profile-avatar {
  position: absolute;
  inset-inline-start: 1.5rem;
  top: -5.6rem;
  width: 9rem;
  height: 9rem;
  --border-avatar-width: calc(var(--border-width-thick) * 2);
}
.xwerp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xwerp-profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}
.xwerp-profile-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.xwerp-profile-name { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.xwerp-profile-role,
.xwerp-profile-role .xwui-typography { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.xwerp-profile-pay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.05rem;
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.xwerp-profile-pay-label,
.xwerp-profile-pay-label .xwui-typography { color: var(--text-secondary); }
.xwerp-profile-pay-figure,
.xwerp-profile-pay-figure * {
  color: var(--text-primary) !important;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button { gap: 0; }
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tabs-list {
  position: relative;
  z-index: 2;
  width: 100%;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important;
  border-radius: 0 !important;
  padding: 0 1.5rem !important;
  gap: 1.6rem !important;
  background: transparent !important;
  min-height: 2.85rem;
}
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  padding: 0.75rem 0 0.6rem !important;
  font-weight: 600;
}
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab:hover:not(.xwui-tab-disabled) {
  background: transparent !important;
  color: var(--text-primary) !important;
}
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab-active,
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab-active:hover {
  background: transparent !important;
  border-bottom-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab-active,
html[data-theme="dark"] .xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab-active:hover {
  border-bottom-color: var(--xwerp-accent-text) !important;
}
.xwerp-profile-cover .xwui-tabs-content {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: 1rem 1.5rem 1.15rem;
}
.xwerp-profile-cover .xwui-tab-panel {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.xwerp-profile-cover .xwui-tab-panel:not([hidden]) {
  z-index: 1;
}
.xwerp-profile-cover .xwui-tab-panel[hidden] {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab {
  transition: color 0.22s ease, border-color 0.22s ease;
}
@media (prefers-reduced-motion: reduce) {
  .xwerp-profile-cover .xwui-tab-panel,
  .xwerp-profile-cover .xwui-tab-panel[hidden],
  .xwerp-profile-cover .xwui-tabs.xwui-tabs-button .xwui-tab {
    transition: none;
  }
}
.xwerp-profile-cover .xwerp-list-toolbar { width: 100%; }
.xwerp-profile-cover .xwerp-list-toolbar > :last-child { margin-inline-start: auto; }
.xwerp-profile-cover .xwui-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important;
}
.xwerp-cal {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 0.75rem;
  overflow: hidden;
}
.xwerp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.xwerp-cal-title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.xwerp-cal-title .xwui-typography { margin: 0; font-weight: 700; }
.xwerp-cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.xwerp-cal-month { font-weight: 700; white-space: nowrap; }
.xwerp-cal-week,
.xwerp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.xwerp-cal-week {
  background: color-mix(in srgb, currentColor 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.xwerp-cal-week .xwui-typography {
  margin: 0;
  padding: 0.45rem 0.2rem;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 600;
}
.xwerp-cal-day {
  min-height: 6.75rem;
  padding: 0.4rem 0.45rem 0.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-inline-start: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}
.xwerp-cal-day:nth-child(7n + 1) { border-inline-start: none; }
.xwerp-cal-day.is-out { opacity: 0.4; }
.xwerp-cal-day.is-today {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent);
}
.xwerp-cal-num { font-weight: 700; line-height: 1.2; }
.xwerp-cal-clocks { font-variant-numeric: tabular-nums; font-weight: 600; }
.xwerp-daylines { display: flex; flex-direction: column; width: 100%; }
.xwerp-dayline {
  display: grid;
  grid-template-columns: 9.5rem auto max-content max-content;
  justify-content: start;
  align-items: center;
  gap: 0.65rem 1.25rem;
  width: 100%;
  padding: 0.7rem 0.1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.xwerp-dayline:first-child { border-top: none; }
.xwerp-dayline-date { font-weight: 700; }
.xwerp-dayline-pair { display: inline-flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.xwerp-dayline-label,
.xwerp-dayline-label .xwui-typography { color: var(--text-secondary); }
.xwerp-dayline-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.xwerp-salary-list { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.xwerp-salary-head { display: flex; align-items: center; gap: 0.65rem; }
.xwerp-salary-title,
.xwerp-salary-title .xwui-typography { margin: 0; font-size: 1.15rem; font-weight: 600; }
.xwerp-salary-list td:nth-child(2) { white-space: nowrap; }
.xwerp-salary-list .xwui-data-table,
.xwerp-salary-list table { width: 100%; }
@media (max-width: 720px) {
  .xwerp-dayline { grid-template-columns: 1fr 1fr; }
  .xwerp-cal-head { flex-wrap: wrap; }
  .xwerp-cal-day { min-height: 4.6rem; padding: 0.25rem; }
  .xwerp-cal-clocks { font-size: 0.65rem; }
}
.xwerp-profile-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  align-items: stretch;
}
@media (max-width: 800px) {
  .xwerp-profile-banner { height: 10rem; }
  /* WHY scale and not a smaller box: the avatar's size is its own (inline --xwui-avatar-size), so the phone shrinks
     the whole 9rem host to 6rem around its top centre; -0.35rem puts the shrunk face at the old 1.15rem start. */
  .xwerp-profile-avatar { top: -3.6rem; inset-inline-start: -0.35rem; scale: calc(2 / 3); transform-origin: top; }
  .xwerp-profile-person {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 0;
    padding: 2.6rem 1.15rem 0.75rem;
  }
  .xwerp-profile-split { grid-template-columns: minmax(0, 1fr); }
  .xwerp-profile-pay { align-items: flex-start; margin-inline-start: 0; width: 100%; }
}
.xwerp-profile-sheet,
.xwerp-profile-sheet > * {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
}
.xwerp-profile-sheet .xwui-card {
  flex: 1 1 auto;
  height: 100%;
}
.xwerp-profile-sheet-body { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; }
.xwerp-profile-sheet-title { margin: 0 0 var(--spacing-xs); }
.xwerp-profile-cover .xwui-tabs,
.xwerp-profile-cover .xwui-tabs-content,
.xwerp-profile-cover .xwui-tab-panel,
.xwerp-profile-tabs,
.xwerp-profile-split,
.xwerp-profile-sheet {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.xwerp-profile-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.4rem;
  padding-block: 0.4rem;
  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.xwerp-profile-sheet-body > .xwerp-profile-row:first-of-type { border-top: none; }
.xwerp-profile-row-mark {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}
html[data-theme="dark"] .xwerp-profile-row-mark { color: var(--xwerp-accent-text); }
.xwerp-profile-row-text {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.xwerp-profile-row-label,
.xwerp-profile-row-label .xwui-typography {
  flex: 0 1 auto;
  color: var(--text-secondary);
  min-width: 0;
}
.xwerp-profile-row-value,
.xwerp-profile-row-value .xwui-typography {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: end;
  white-space: normal;
}
.xwerp-pii {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  padding: 1.1rem 1.15rem 1.15rem;
  border: var(--border-width-regular) solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 1rem;
  background: var(--bg-primary);
}
html[data-theme="dark"] .xwerp-pii {
  background: color-mix(in srgb, white 4%, var(--bg-primary));
  border-color: color-mix(in srgb, white 10%, transparent);
}
.xwerp-profile-cover .xwerp-pii,
html[data-theme="dark"] .xwerp-profile-cover .xwerp-pii {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
.xwerp-profile-cover .xwui-pp {
  --xwui-pp-accent: var(--accent-primary);
  --xwui-pp-card-bg: color-mix(in srgb, currentColor 4%, var(--bg-primary));
  --xwui-pp-border: color-mix(in srgb, currentColor 12%, transparent);
  --xwui-pp-card-radius: 0.85rem;
  gap: 0.85rem;
}
.xwerp-profile-cover .xwui-pp-heading-icon { display: none; }
.xwerp-profile-cover .xwui-pp-badge { unicode-bidi: isolate; }
.xwerp-profile-cover .xwui-pp-grid {
  overflow: visible;
  padding-inline-end: 0;
}
.xwerp-profile-cover .xwui-pp-check:disabled { opacity: 1; cursor: default; }
.xwerp-profile-cover .xwui-pp-row:has(.xwui-pp-check:disabled) { cursor: default; }
.xwerp-profile-cover .xwui-pp-row.is-muted .xwui-pp-text { opacity: 1; }
.xwerp-profile-cover .xwui-pp-card:has(input[data-code="base_salary"]:checked) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-primary));
}
.xwerp-pii-salary {
  margin-inline-start: auto;
  color: var(--area-ink, var(--accent-primary));
  font-weight: 600;
}
.xwerp-pii-note,
.xwerp-pii-note .xwui-typography {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
}
.xwerp-hr-person {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-block: var(--spacing-sm);
  border-bottom: var(--border-width-regular) solid var(--border-color);
}
.xwerp-org-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs);
}
.xwerp-org-head-text { min-width: 0; flex: 1 1 auto; }
.xwerp-org-members { padding: 0 var(--spacing-sm) var(--spacing-sm); }
.xwerp-org-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  max-height: 5.5rem;
  overflow: hidden;
}
.xwerp-org-member-row-open { max-height: 12.5rem; overflow: auto; }
.xwerp-org-person { position: relative; }
/* The search ring. The match class sits on the XWUIAvatar or XWUICard root, so the ring follows that component's
   own shape (circle or card corners) and nothing here sets a radius. */
.xwerp-org-match {
  box-shadow: 0 0 0 0.125rem var(--accent-primary);
}
.xwerp-org-match-active {
  box-shadow: 0 0 0 0.1875rem var(--accent-primary);
}
.xwerp-org-popup {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + var(--spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  width: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: var(--border-width-regular) solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--text-primary) 16%, transparent);
}
.xwerp-org-foot {
  border-top: var(--border-width-regular) solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.xwerp-org-people {
  border-top: var(--border-width-regular) solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.xwerp-org-people .xwui-button,
.xwerp-org-foot .xwui-button,
.xwerp-org-more .xwui-button {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
}
.xwerp-org-people .xwui-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xwerp-org-more { display: flex; justify-content: center; }
.xwerp-org-empty {
  padding: var(--spacing-xl, 2rem);
  color: var(--text-secondary);
}
.xwerp-org-children { display: flex; flex-direction: column; align-items: center; }
.xwerp-org-horizontal .xwerp-org-children { flex-direction: row; align-items: center; }
.xwerp-org-stem {
  width: 0.125rem;
  height: var(--spacing-md);
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}
.xwerp-org-horizontal .xwerp-org-stem {
  width: var(--spacing-md);
  height: 0.125rem;
}
.xwerp-org-row { display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.xwerp-org-horizontal .xwerp-org-row { flex-direction: column; }
.xwerp-org-slot { display: flex; flex-direction: column; align-items: center; }
.xwerp-org-horizontal .xwerp-org-slot { flex-direction: row; align-items: center; }
.xwerp-org-elbow { position: relative; width: 100%; height: var(--spacing-md); }
.xwerp-org-horizontal .xwerp-org-elbow { width: var(--spacing-md); height: 100%; min-height: var(--spacing-md); }
.xwerp-org-elbow-only::before,
.xwerp-org-elbow-mid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.125rem;
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}
.xwerp-org-elbow-first::before,
.xwerp-org-elbow-last::before,
.xwerp-org-elbow-mid::before {
  content: "";
  position: absolute;
  top: 0;
  height: 0.125rem;
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}
.xwerp-org-elbow-first::before { left: 50%; right: calc(var(--spacing-sm) / -2); }
.xwerp-org-elbow-last::before { right: 50%; left: calc(var(--spacing-sm) / -2); }
.xwerp-org-elbow-mid::before { left: calc(var(--spacing-sm) / -2); right: calc(var(--spacing-sm) / -2); }
.xwerp-org-horizontal .xwerp-org-elbow-only::before,
.xwerp-org-horizontal .xwerp-org-elbow-mid::after {
  top: 50%;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 0.125rem;
}
.xwerp-org-horizontal .xwerp-org-elbow-first::before,
.xwerp-org-horizontal .xwerp-org-elbow-last::before,
.xwerp-org-horizontal .xwerp-org-elbow-mid::before {
  width: 0.125rem;
  height: auto;
  left: 0;
  right: auto;
}
.xwerp-org-horizontal .xwerp-org-elbow-first::before { top: 50%; bottom: calc(var(--spacing-sm) / -2); }
.xwerp-org-horizontal .xwerp-org-elbow-last::before { bottom: 50%; top: calc(var(--spacing-sm) / -2); }
.xwerp-org-horizontal .xwerp-org-elbow-mid::before { top: calc(var(--spacing-sm) / -2); bottom: calc(var(--spacing-sm) / -2); }
@media print {
  html:has(.xwui-shell-app[data-layout="dashboard"]),
  body:has(.xwui-shell-app[data-layout="dashboard"]),
  #app:has(> .xwui-shell-app[data-layout="dashboard"]),
  .xwui-shell-app[data-layout="dashboard"] {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}
/* Prepared for you and the briefing read as one pair: a quiet header,
   the figure on its own, checks in a single well, sentences divided. */
.xwerp-prepared,
.xwerp-briefing {
  min-width: 0;
}
.xwerp-prepared-actions .xwui-stack {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.xwerp-decision-amount {
  color: var(--accent-primary);
  white-space: nowrap;
}
.xwerp-decision-title .xwui-stack {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.xwerp-decision-title .xwui-stack-item:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.xwerp-decision-by {
  min-width: 0;
}
.xwerp-decision-checks {
  padding: var(--spacing-sm);
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
}
.xwerp-decision .xwui-card-header {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.xwerp-decision .xwui-ai-autonomy {
  display: none !important;
}
.xwerp-decision .xwui-approve-reject-bar {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: var(--border-width-regular) solid color-mix(in srgb, currentColor 14%, transparent);
}
.xwerp-briefing-card .xwui-icon {
  color: var(--accent-primary);
  margin-top: 0.15rem;
}
.xwerp-prepared-cards .xwui-stack,
.xwerp-briefing-cards .xwui-stack {
  gap: var(--spacing-lg);
}
/* Pulse tiles share one row of each piece: the figure, the delta, the
   sparkline, the note, and Explain this number. */
.xwerp-pulse-tile,
.xwerp-pulse-tile > .xwui-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.xwerp-pulse-tile .xwui-card-body,
.xwerp-pulse-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.xwerp-pulse-tile .xwui-card-header,
.xwerp-pulse-tile .xwui-card-title {
  min-height: 2.5rem;
}
.xwerp-pulse-main > .xwui-stack {
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}
.xwerp-pulse-main .xwui-stack-item:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.xwerp-pulse-main .xwui-stack-item:last-child {
  flex: 0 0 auto;
}
.xwerp-pulse-lead .xwui-statistic,
.xwerp-pulse-lead .xwui-statistic-container {
  max-width: 100%;
  white-space: normal;
}
.xwerp-pulse-delta > .xwui-stack {
  flex-wrap: wrap;
  align-items: center;
}
.xwerp-pulse-delta .xwui-stack-item {
  flex: 0 0 auto;
}
.xwerp-pulse-delta .xwui-typography {
  white-space: nowrap;
}
.xwerp-pulse-delta--up .xwui-icon { color: oklch(46% 0.14 155); }
.xwerp-pulse-delta--down .xwui-icon { color: oklch(52% 0.17 25); }
.xwerp-pulse-spark {
  width: 7rem;
  min-height: 2rem;
}
.xwerp-close-metric > .xwui-stack {
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}
.xwerp-close-metric .xwui-stack-item:first-child {
  flex: 0 1 auto;
  min-width: 0;
}
.xwerp-close-metric .xwui-stack-item:last-child {
  flex: 1 1 12rem;
  min-width: 8rem;
}
.xwerp-metric-progress {
  width: 100%;
}
.xwerp-person-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-primary));
  color: var(--accent-primary);
  font-weight: 600;
}
.xwerp-face-card,
.xwerp-face-card > .xwui-card {
  height: 100%;
}
.xwerp-face-head > .xwui-stack {
  flex-wrap: nowrap;
  align-items: center;
}
.xwerp-face-head .xwui-stack-item:last-child {
  min-width: 0;
  flex: 1 1 auto;
}
.xwerp-policy-card,
.xwerp-policy-card > .xwui-card {
  height: 100%;
}
/* XWUICard (outlined) draws the frame and its own footer rule. The statute's tone reaches the frame through the
   card's container border token, not a stripe painted over the card. */
.xwerp-policy-card {
  --border-container-color: color-mix(in srgb, var(--xwerp-policy, var(--accent-primary)) 45%, var(--border-color));
}
.xwerp-policy-card > .xwui-card {
  display: flex;
  flex-direction: column;
}
.xwerp-policy-card .xwui-card-body {
  flex: 1 1 auto;
}
.xwerp-policy-card .xwui-card-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--spacing-sm);
}
.xwerp-policy-foot {
  margin: 0;
  padding: 0;
  border: 0;
}
.xwerp-policy-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--xwerp-policy, var(--accent-primary)) 16%, var(--bg-primary));
  color: var(--xwerp-policy, var(--accent-primary));
}
.xwerp-policy-head > .xwui-stack {
  flex-wrap: nowrap;
  align-items: center;
}
.xwerp-policy-head .xwui-stack-item:last-child {
  min-width: 0;
  flex: 1 1 auto;
}
.xwerp-policy-count p,
.xwerp-policy-count .xwui-typography {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--xwerp-policy, var(--text-primary));
}
.xwerp-policy-figure .xwui-stack {
  align-items: baseline;
}
.xwerp-policy-cite,
.xwerp-policy-note {
  direction: ltr;
  unicode-bidi: isolate;
}
.xwerp-policy-note {
  color: var(--text-secondary);
}
.xwerp-policy-tone--green { --xwerp-policy: oklch(42% 0.11 155); }
.xwerp-policy-tone--peach { --xwerp-policy: oklch(48% 0.1 65); }
.xwerp-policy-tone--sky { --xwerp-policy: oklch(45% 0.12 255); }
.xwerp-policy-tone--pink { --xwerp-policy: oklch(48% 0.12 350); }
.xwerp-policy-tone--rose { --xwerp-policy: oklch(48% 0.14 20); }
.xwerp-policy-tone--amber { --xwerp-policy: oklch(48% 0.12 70); }
.xwerp-policy-tone--violet { --xwerp-policy: oklch(45% 0.12 295); }
.xwerp-policy-tone--slate { --xwerp-policy: oklch(42% 0.03 255); }
.xwerp-pulse-detail {
  min-height: 2.5em;
}
.xwerp-pulse-explain {
  margin-top: auto;
}
/* Prepared for you and the briefing share one title line, then their
   cards start on the next. An empty notice must not open a gap. */
.xwerp-prepared-head,
.xwerp-briefing-head {
  min-height: 4.5rem;
  display: flex;
  align-items: flex-start;
}
.xwerp-prepared-head > *,
.xwerp-briefing-head > * {
  flex: 1 1 auto;
  min-width: 0;
}
.xwerp-prepared .xwui-stack-item:has(> .xwerp-prepared-notice:empty) {
  display: none;
}
.xwerp-prepared-cards,
.xwerp-briefing-cards {
  gap: var(--spacing-lg);
}
.xwerp-today {
  gap: var(--spacing-xl);
}
.xwerp-decision .xwui-card,
.xwerp-briefing-card .xwui-card {
  height: auto;
}
.xwerp-decision button[hidden] {
  display: none !important;
}
.xwerp-briefing-card .xwui-card-header {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* Point-of-sale item tiles. The category is a hue (teal, gold, aqua),
   the price is a plate under the name, and Add sits on the bottom edge
   so a row of tiles shares one baseline. An item with no price keeps
   the warning tag and drops the wash.
   WHY tokens and no paint: the tile is an XWUICard (outlined, hoverable)
   and the price an XWUIDisplayTag; the hue reaches them through their own
   theming tokens (container border, card surface, primary tag), so the
   components draw the frame, the wash, the plate and the hover lift. */
.xwerp-pos-tile {
  --pos-hue: var(--accent-primary);
  --pos-ink: var(--accent-primary);
  --border-container-color: color-mix(in srgb, var(--pos-hue) 42%, transparent);
  --bg-tag-primary: color-mix(in srgb, var(--pos-hue) 18%, var(--bg-primary));
  --text-tag-primary: var(--pos-ink);
  --border-tag-primary-color: color-mix(in srgb, var(--pos-hue) 48%, transparent);
  height: 100%;
}
.xwerp-pos-tile:not(.is-unpriced) {
  --bg-card: color-mix(in srgb, var(--pos-hue) 6%, var(--bg-primary));
}
.xwerp-pos-tile[data-cat="drinks"] { --pos-hue: var(--accent-primary); --pos-ink: var(--accent-primary); }
.xwerp-pos-tile[data-cat="bakery"] { --pos-hue: var(--xwerp-warn); --pos-ink: var(--xwerp-warning-text); }
.xwerp-pos-tile[data-cat="grocery"] { --pos-hue: var(--xwerp-accent-text); --pos-ink: var(--accent-primary); }
.xwerp-pos-tile.is-unpriced { --pos-hue: var(--xwerp-warn); --pos-ink: var(--xwerp-warning-text); }
.xwerp-pos-tile > .xwui-box-container,
.xwerp-pos-tile .xwui-card {
  height: 100%;
}
.xwerp-pos-tile .xwui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.xwerp-pos-tile .xwui-card-header {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.7rem !important;
}
.xwerp-pos-tile .xwui-titled-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.xwerp-pos-tile .xwui-titled-subtitle {
  order: -1;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pos-ink);
}
.xwerp-pos-tile .xwui-titled-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
}
.xwerp-pos-tile .xwui-card-tags-inline,
.xwerp-pos-tile .xwui-card-tags-inline > span {
  display: block;
  width: 100%;
}
.xwerp-pos-tile .xwui-tag {
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0.5rem 0.8rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.xwerp-pos-tile .xwui-card-body {
  margin-top: auto;
}
html[data-theme="dark"] .xwerp-pos-tile {
  --pos-ink: color-mix(in srgb, var(--pos-hue) 62%, white);
}
html[data-theme="dark"] .xwerp-pos-tile .xwui-titled-title {
  color: var(--xwerp-tool-ink);
}
/* A function page listed workflow, links, events and the report as one
   narrow column, and parked Show report on the far edge. The three
   facts share a grid, and the report actions sit on the title's line. */
div:has(> .xwerp-page-section [data-section="workflow"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: stretch;
}
.xwerp-page-section:has([data-section]),
.xwerp-page-section:has(.xwerp-actions-end) {
  box-sizing: border-box;
  height: auto;
  padding: var(--spacing-lg);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary)),
      var(--bg-primary) 5.5rem
    );
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, var(--accent-primary) 8%, transparent);
}
@media (min-width: 900px) {
  div:has(> .xwerp-page-section [data-section="workflow"]) {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr);
    grid-template-rows: 1fr 1fr;
  }
  .xwerp-page-section:has([data-section="workflow"]) {
    grid-row: span 2;
  }
}
[data-section="workflow"] .xwui-step-icon {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-primary));
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
}
[data-section="workflow"] .xwui-typography-caption {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-family: var(--xwerp-font-mono);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-color));
}
[data-section="links"] .xwui-description-list,
[data-section="links"] .xwui-description-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
[data-section="links"] .xwui-description-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  padding-block: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}
[data-section="links"] .xwui-description-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
[data-section="links"] .xwui-description-list-desc {
  text-align: end;
  font-family: var(--xwerp-font-mono);
}
[data-section="events"] .xwui-stack {
  width: 100%;
}
/* Only a row that starts with the Emits or Consumes label. The column
   that holds those rows also matches a bare stack. */
[data-section="events"] .xwui-stack[style*="wrap"] > :nth-child(2) {
  margin-inline-start: auto;
}
.xwerp-page-section:has(.xwerp-actions-end) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-md);
}
.xwerp-page-section:has(.xwerp-actions-end) > :nth-child(2) {
  display: contents;
}
.xwerp-page-section:has(.xwerp-actions-end) .xwerp-actions-end {
  width: auto;
  justify-self: end;
}
.xwerp-page-section:has(.xwerp-actions-end) > :nth-child(2) > :last-child {
  grid-column: 1 / -1;
}
/* A record card keeps the title, the facts and the action in three bands.
   The action stays on the shared bottom edge, clear of the last line. */
.xwui-grid--equal-row-heights > .xwui-box-container:has(> .xwui-card-outlined .xwui-description-list) {
  display: flex;
  height: 100%;
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-color: color-mix(in srgb, currentColor 14%, transparent);
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) .xwui-card-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) .xwui-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 14px;
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) .xwui-card-body > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) .xwui-description-list-container {
  padding-bottom: 0.75rem;
}
.xwui-grid--equal-row-heights .xwui-card-outlined:has(.xwui-description-list) .xwui-card-body > div > .xwui-button-container {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* Data model, stored-record graph (src/pages/record-graph.ts): the controls row. Moved here from
   src/pages/record-graph.css on 27-Oct-2026: app CSS lives in the host theme layer, never under src/pages. */
.xwerp-record-graph-controls { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: end; margin-block: var(--spacing-md); }