/*
 * ProjectFlow Carbon workspace
 *
 * This file is the migration boundary between the legacy product styling and one coherent
 * Carbon-aligned shell. New shell and task-workspace work belongs here; legacy component rules
 * can be removed from styles.css as each remaining screen migrates.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/IBMPlexSans-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 12px;
  --cds-spacing-05: 16px;
  --cds-spacing-06: 24px;
  --cds-spacing-07: 32px;
  --cds-spacing-08: 40px;
  --cds-spacing-09: 48px;
  --cds-spacing-10: 64px;
  /* Product typography is expressed through Carbon's installed type roles. These aliases keep
     the migration readable without inventing another independent scale. */
  --cds-type-label: var(--cds-label-01-font-size, 12px);
  --cds-type-label-line: var(--cds-label-01-line-height, 16px);
  --cds-type-body: var(--cds-body-compact-01-font-size, 14px);
  --cds-type-body-line: var(--cds-body-compact-01-line-height, 18px);
  --cds-type-copy: var(--cds-body-01-font-size, 14px);
  --cds-type-copy-line: var(--cds-body-01-line-height, 20px);
  --cds-type-heading: var(--cds-heading-03-font-size, 20px);
  --cds-type-heading-line: var(--cds-heading-03-line-height, 28px);
  --cds-type-page: var(--cds-heading-04-font-size, 28px);
  --cds-type-page-line: var(--cds-heading-04-line-height, 36px);
  --topbar-h: 48px;
  --page-header-h: 96px;
  --sidebar-w: 256px;
  --cds-interactive-hover: var(--cds-button-primary-hover);
}

/* Make Carbon's official role tokens authoritative for migrated and legacy primitives. The
   theme-qualified selectors intentionally outrank the old theme blocks during migration. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bg: var(--cds-background);
  --surface: var(--cds-layer-01);
  --surface-2: var(--cds-layer-02);
  --text: var(--cds-text-primary);
  --text-2: var(--cds-text-secondary);
  --text-3: var(--cds-text-helper);
  --border: var(--cds-border-subtle-00);
  --border-strong: var(--cds-border-subtle-01);
  --accent: var(--cds-interactive);
  --accent-hover: var(--cds-link-primary-hover);
  --accent-weak: var(--cds-background-selected);
  --accent-solid: var(--cds-button-primary);
  --accent-solid-hover: var(--cds-button-primary-hover);
  --green: var(--cds-support-success);
  --danger: var(--cds-support-error);
  --orange: var(--cds-support-warning);
  --radius: 0;
  --radius-sm: 0;
  --radius-pill: 0;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.16);
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html {
  /* Carbon's rem type scale is calibrated against a 16px root. Explicitly establishing that
     baseline prevents embedded browser defaults from shrinking every productive type role. */
  font-size: 16px;
  scroll-padding-top: calc(var(--topbar-h) + var(--page-header-h));
}

html,
body,
button,
input,
textarea,
select {
  font-family: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

body {
  color: var(--cds-text-primary);
  background: var(--cds-background);
  font-size: var(--cds-type-copy);
  line-height: var(--cds-type-copy-line);
}
:root[data-theme="light"] .main,
:root[data-theme="dark"] .main { background: var(--cds-background); }
:root[data-theme="light"] .sidebar,
:root[data-theme="dark"] .sidebar { background: var(--cds-layer-01); }

/* Shared productive controls: the same token, type, shape and focus rules now carry across views. */
.btn {
  min-height: 40px;
  box-sizing: border-box;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-05);
  border: 1px solid var(--cds-button-secondary, var(--cds-border-strong-01));
  border-radius: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 400;
  line-height: var(--cds-type-body-line);
  box-shadow: none;
  transition: background 70ms cubic-bezier(0.2, 0, 1, 0.9);
}
.btn:hover { background: var(--cds-layer-hover-01); box-shadow: none; }
.btn:active { transform: none; background: var(--cds-layer-active-01); }
.btn-primary,
:root[data-theme="dark"] .btn-primary {
  border-color: var(--cds-button-primary);
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
}
.btn-primary:hover,
:root[data-theme="dark"] .btn-primary:hover {
  border-color: var(--cds-button-primary-hover);
  background: var(--cds-button-primary-hover);
}
.btn-ghost { border-color: transparent; color: var(--cds-link-primary); }
.btn-danger { border-color: var(--cds-button-danger-secondary); color: var(--cds-button-danger-secondary); }
.btn-danger:hover { border-color: var(--cds-button-danger-hover); background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
.btn-sm { min-height: 32px; padding-inline: var(--cds-spacing-04); font-size: var(--cds-type-body); }

.field { gap: var(--cds-spacing-02); }
.field > span {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: 1rem;
}
.field input,
.input,
textarea,
select {
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  outline: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  box-shadow: none;
}
textarea { min-height: 80px; padding-block: var(--cds-spacing-04); }
.field input:focus,
.input:focus,
textarea:focus,
select:focus {
  border-color: transparent;
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  box-shadow: none;
}
.field [aria-invalid="true"] {
  border-bottom-color: var(--cds-support-error);
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
}
.field > .field-error {
  display: block;
  margin-top: var(--cds-spacing-02);
  color: var(--cds-text-error);
  font-size: var(--cds-type-helper);
  font-weight: 400;
  line-height: 1rem;
}

.carbon-empty-state {
  min-height: 240px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-07);
  border: 0;
  background: var(--cds-layer-01);
  text-align: left;
}
.carbon-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--cds-icon-primary);
}
.carbon-empty-state h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.carbon-empty-state p {
  max-width: 40rem;
  margin: 0 0 var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: 1.25rem;
}
.carbon-empty-state .btn { margin-top: var(--cds-spacing-03); }

.login-body { background: var(--cds-background); }
.login-card {
  padding: var(--cds-spacing-07);
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}
.login-brand h1 { font-size: 1.75rem; font-weight: 300; }

.modal-overlay {
  background: var(--cds-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal {
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
.modal-head { padding: var(--cds-spacing-06) var(--cds-spacing-06) var(--cds-spacing-05); }
.modal-head h2,
.modal-head h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
.modal-body { padding: 0 var(--cds-spacing-06) var(--cds-spacing-05); }
.modal-foot { padding: var(--cds-spacing-05) var(--cds-spacing-06) var(--cds-spacing-06); }

/* Task editor: Carbon modal hierarchy with productive controls and an explicit primary action. */
.task-modal {
  width: 640px;
  max-height: calc(100dvh - var(--cds-spacing-10));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cds-layer-01);
}
.task-modal .task-modal-head {
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.task-modal-heading { min-width: 0; flex: 1; }
.task-modal-eyebrow {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 1rem;
}
.task-modal .task-modal-heading h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.task-modal-subtitle,
.project-modal-subtitle {
  max-width: 32rem;
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: 1.25rem;
}
.task-modal .task-modal-close {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0 calc(-1 * var(--cds-spacing-03)) 0 0;
  padding: 0;
  border: 0;
  color: var(--cds-icon-primary);
}
.task-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
}
.task-modal .field { min-width: 0; gap: var(--cds-spacing-03); }
.task-modal .field > span,
.task-modal .field > legend {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.task-modal .task-title-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.task-modal .task-title-input:focus {
  border-color: transparent;
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.task-modal .task-description { gap: var(--cds-spacing-03); }
.creation-options { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.creation-options[hidden] { display: none; }
.creation-options-toggle {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cds-spacing-04);
  border: 0;
  border-top: 1px solid var(--cds-border-subtle-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: transparent;
  color: var(--cds-link-primary);
  font: inherit;
  font-size: var(--cds-type-body);
  cursor: pointer;
}
.creation-options-toggle:hover { background: var(--cds-layer-hover-01); }
.creation-options-toggle:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.creation-options-toggle svg { transition: transform .12s ease; }
.creation-options-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.task-modal .rt-toolbar {
  display: flex;
  gap: 1px;
  margin: 0;
}
.task-modal .rt-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-icon-secondary);
  font-size: var(--cds-type-body);
}
.task-modal .rt-btn:hover { background: var(--cds-layer-hover-02); color: var(--cds-icon-primary); }
.task-modal .rt-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.task-modal .rt-editor {
  min-height: 88px;
  box-sizing: border-box;
  padding: var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  outline: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  line-height: 1.5;
  box-shadow: none;
}
.task-modal .rt-editor:focus {
  border-color: transparent;
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  box-shadow: none;
}
.task-modal .rt-editor ul,
.task-modal .rt-view ul {
  margin: var(--cds-spacing-03) 0;
  padding-inline-start: var(--cds-spacing-06);
  list-style: disc outside;
}
.task-modal .rt-editor ol,
.task-modal .rt-view ol {
  margin: var(--cds-spacing-03) 0;
  padding-inline-start: var(--cds-spacing-06);
  list-style: decimal outside;
}
.task-modal .rt-editor li,
.task-modal .rt-view li { padding-inline-start: var(--cds-spacing-02); }
.task-modal .rt-editor li::marker,
.task-modal .rt-view li::marker { color: var(--cds-icon-primary); }
.task-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cds-spacing-06);
}
.task-people-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.task-people-field legend { margin-bottom: var(--cds-spacing-03); padding: 0; }
.task-modal .collab-row { gap: var(--cds-spacing-03); }
.task-modal .task-column-select { min-height: 40px; }
.task-modal .collab-chip {
  min-height: 40px;
  padding: 0 var(--cds-spacing-04) 0 var(--cds-spacing-03);
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
}
.task-modal .collab-chip:hover { background: var(--cds-layer-hover-02); color: var(--cds-text-primary); }
.task-modal .collab-chip.on {
  border-color: var(--cds-interactive);
  background: var(--cds-background-selected);
  color: var(--cds-text-primary);
}
.task-complete-control {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-04);
  border: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.task-complete-control:hover { background: var(--cds-layer-hover-02); }
.task-complete-control:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.task-complete-box {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cds-icon-primary);
}
.task-complete-control.done .task-complete-box {
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
  color: var(--cds-icon-on-color);
}
.task-modal .form-row { gap: var(--cds-spacing-05); }
.task-modal .form-row .input { min-height: 48px; }
.task-modal .detail-section {
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01);
}
.task-modal .detail-section h3 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: 1.25rem;
}
.task-section-helper {
  margin: var(--cds-spacing-02) 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-helper, 0.75rem);
  line-height: 1rem;
}
.task-attachments-empty {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-body);
}
.task-modal .task-attach-action {
  min-height: 48px;
  margin-top: var(--cds-spacing-03);
  padding-inline: var(--cds-spacing-05);
}
.task-modal .modal-foot {
  min-height: 64px;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: var(--cds-spacing-03);
  margin: 0;
  padding: var(--cds-spacing-03) var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.task-modal .modal-foot .btn { min-width: 144px; min-height: 48px; }
.task-modal .modal-foot .btn-danger { border-color: transparent; }
.task-modal .task-modal-primary { min-width: 176px; }

/* Project and space editor: Carbon modal hierarchy with labelled form sections. */
.project-modal {
  width: min(768px, calc(100vw - var(--cds-spacing-07)));
  max-height: calc(100dvh - var(--cds-spacing-10));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cds-layer-01);
}
.project-modal .project-modal-head {
  min-height: 96px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.project-modal-heading { min-width: 0; flex: 1; }
.project-modal-eyebrow {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 1rem;
  text-transform: none;
}
.project-modal .project-modal-heading h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.project-modal .project-modal-close {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0 calc(-1 * var(--cds-spacing-03)) 0 0;
  padding: 0;
  border: 0;
  color: var(--cds-icon-primary);
}
.project-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  gap: 0;
  padding: 0;
}
.project-modal .field,
.project-modal fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.project-modal .field { gap: var(--cds-spacing-03); }
.project-modal .field > span,
.project-modal .field > legend,
.project-modal fieldset > legend {
  margin: 0;
  padding: 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: 1rem;
}
.project-section-helper {
  margin: calc(-1 * var(--cds-spacing-02)) 0 var(--cds-spacing-02);
  color: var(--cds-text-helper);
  font-size: var(--cds-type-helper, 0.75rem);
  line-height: 1rem;
}
.project-modal .project-name-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.project-modal .project-name-input:focus,
.project-modal textarea:focus,
.project-modal input:focus,
.project-modal select:focus {
  border-color: transparent;
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  box-shadow: none;
}
.project-modal textarea {
  min-height: 96px;
  padding: var(--cds-spacing-05);
  background: var(--cds-field-01);
}
.project-modal .project-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05);
  min-width: 0;
  padding: var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.project-modal .project-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
}
.project-modal .project-section-heading h3 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: 1.25rem;
}
.project-modal .project-section-heading p {
  max-width: 80%;
  margin: 0;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-helper, .75rem);
  line-height: 1rem;
}
.project-modal .project-okr-block { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.project-modal .kr-column-headings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px 40px;
  gap: var(--cds-spacing-03);
  margin-bottom: var(--cds-spacing-02);
  color: var(--cds-text-helper);
  font-size: var(--cds-type-helper, .75rem);
  line-height: 1rem;
}
.project-modal .kr-inputs { display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
.project-modal .kr-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px 40px;
  gap: var(--cds-spacing-03);
}
.project-modal .kr-input-row .input {
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--cds-spacing-04);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-field-01);
}
.project-modal .kr-remove {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-icon-secondary);
  opacity: 1;
}
.project-modal .kr-remove:hover { background: var(--cds-layer-hover-01); color: var(--cds-icon-primary); }
.project-modal .kr-remove:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.project-modal .project-add-kr,
.project-modal .project-doc-picker-btn {
  min-height: 40px;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-04);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-link-primary);
  font-size: var(--cds-type-body);
}
.project-modal .project-add-kr:hover,
.project-modal .project-doc-picker-btn:hover { background: var(--cds-layer-hover-01); color: var(--cds-link-primary-hover); }
.project-modal .pick-chips { gap: var(--cds-spacing-03); }
.project-modal .pick-chip {
  min-height: 40px;
  padding: 0 var(--cds-spacing-04) 0 var(--cds-spacing-03);
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
}
.project-modal .pick-chip:hover { background: var(--cds-layer-hover-02); color: var(--cds-text-primary); }
.project-modal .pick-chip.on { border-color: var(--cds-interactive); background: var(--cds-background-selected); color: var(--cds-text-primary); }
.project-modal .seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cds-border-subtle-01);
}
.project-modal .seg-opt {
  min-height: 40px;
  padding: 0 var(--cds-spacing-04);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font: inherit;
  font-size: var(--cds-type-body);
}
.project-modal .seg-opt:hover { background: var(--cds-layer-hover-02); color: var(--cds-text-primary); }
.project-modal .seg-opt.active {
  border-bottom-color: var(--cds-interactive);
  background: var(--cds-layer-selected-02);
  color: var(--cds-text-primary);
  font-weight: 600;
}
.project-modal .project-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cds-spacing-05); }
.project-modal .project-dates .input { min-height: 48px; padding-inline: var(--cds-spacing-04); font-size: var(--cds-type-body); }
.project-modal .project-creation-options {
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.project-modal > .modal-body > .creation-options-toggle {
  flex: 0 0 auto;
  padding-inline: var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.project-modal .project-management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-04) var(--cds-spacing-06);
  background: var(--cds-layer-01);
}
.project-modal .project-management-actions .btn {
  min-height: 40px;
  padding-inline: var(--cds-spacing-04);
  color: var(--cds-text-secondary);
}
.project-modal .project-management-actions .btn:hover {
  background: var(--cds-layer-hover-01);
  color: var(--cds-text-primary);
}
.project-modal .project-management-actions .project-delete-action { color: var(--cds-support-error); }
.project-modal .project-management-actions .project-delete-action:hover { color: var(--cds-support-error); }
.project-modal .modal-foot {
  min-height: 64px;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.project-modal .modal-foot .btn {
  min-width: 0;
  min-height: 64px;
  flex: 1 1 50%;
  border-radius: 0;
}
.project-modal .project-modal-primary { min-width: 0; }

@media (max-width: 671px) {
  .modal-overlay:has(> .task-modal) { padding: 0; }
  .task-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  .task-modal .task-modal-head,
  .task-modal .modal-body { padding-inline: var(--cds-spacing-05); }
  .task-modal .modal-body { flex: 1 1 auto; }
  .task-meta-grid { grid-template-columns: 1fr; gap: var(--cds-spacing-05); }
  .task-modal .form-row { flex-direction: column; gap: var(--cds-spacing-05); }
  .task-modal .modal-foot {
    padding: 0;
    gap: 0;
  }
  .task-modal .modal-foot .btn,
  .task-modal .task-modal-primary { min-width: 0; flex: 1 1 50%; }
  .task-modal .modal-foot .spacer { display: none; }
  .modal-overlay:has(> .project-modal) { padding: 0; }
  .project-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  .project-modal .project-modal-head,
  .project-modal .project-form-section,
  .project-modal .project-creation-options { padding-inline: var(--cds-spacing-05); }
  .project-modal > .modal-body > .creation-options-toggle { padding-inline: var(--cds-spacing-05); }
  .project-modal .project-management-actions { padding-inline: var(--cds-spacing-05); }
  .project-modal .project-dates { grid-template-columns: 1fr; gap: var(--cds-spacing-05); }
  .project-modal .kr-input-row { grid-template-columns: minmax(0, 1fr) 96px 40px; }
  .project-modal .kr-column-headings { grid-template-columns: minmax(0, 1fr) 96px 40px; }
  .project-modal .modal-foot { padding: 0; gap: 0; }
  .project-modal .modal-foot > :not(.spacer):not([hidden]) { min-width: 0; flex: 1 1 50%; }
  .project-modal .modal-foot .spacer { display: none; }
}
.pop-panel,
.menu {
  padding: var(--cds-spacing-02) 0;
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
  background: var(--cds-layer-02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.pop-item,
.menu button { min-height: 32px; padding: 0 var(--cds-spacing-05); border-radius: 0; font-size: var(--cds-type-body); }
.toast { border-radius: 0; background: var(--cds-background-inverse); color: var(--cds-text-inverse); font-size: var(--cds-type-body); }
.toast.err { background: var(--cds-support-error); color: var(--cds-text-on-color); }

.settings-wrap { max-width: 960px; gap: var(--cds-spacing-05); }
.set-card {
  padding: var(--cds-spacing-06);
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}
.set-card-head h2 { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
.set-card-head p { font-size: var(--cds-type-body); }
.swatch {
  min-height: 40px;
  padding: 0 var(--cds-spacing-04);
  border-radius: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
}
.swatch.on { border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
.vitem-sub:is(a) { min-height: 24px; display: inline-flex; align-items: center; }
.meet-card,
.ptl-row,
.picker-row {
  width: 100%;
  color: var(--cds-text-primary);
  font: inherit;
  text-align: left;
}
.picker-row { border: 0; background: transparent; }
.cmdk-item,
.notif-item,
.kr-row,
.cal2-label,
.asset-app-row.unavailable {
  border: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  text-align: left;
}
.cmdk-item,
.notif-item,
.kr-row,
.cal2-label { min-height: 40px; }
.asset-app-row.unavailable { width: 100%; cursor: pointer; }
.cmdk-item:focus-visible,
.notif-item:focus-visible,
.kr-row:focus-visible,
.cal2-label:focus-visible,
.asset-app-row.unavailable:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.ptl-group-label { margin: var(--cds-spacing-05) 0 var(--cds-spacing-03); font-size: var(--cds-type-label); font-weight: 600; }
.metrics-table-wrap,
.metrics-table { border-radius: 0; }
.metric-open {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cds-link-primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
}
.metric-open:hover { text-decoration: underline; }
.plan-task-schedule,
.plan-project-schedule {
  display: inline-grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -8px 0 -8px var(--cds-spacing-02);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cds-icon-secondary);
}
.plan-project-schedule { margin-left: auto; }
.plan-task-schedule:hover,
.plan-project-schedule:hover { background: var(--cds-layer-hover-01); color: var(--cds-icon-primary); }
.plan-task-schedule:focus-visible,
.plan-project-schedule:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.res-chip-open {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--cds-spacing-03);
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.res-chip-x {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  opacity: 1;
  max-width: 32px;
}
.res-people-group {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.res-person-avatar {
  position: relative;
  display: block;
  margin-inline-start: -4px;
}
.res-person-avatar:first-child { margin-inline-start: 0; }
.res-person-avatar .avatar {
  width: 24px;
  height: 24px;
  border: 2px solid var(--cds-layer-01);
  font-size: 11px;
}
.res-person-avatar:hover { z-index: 1; }
.res-chip-open:focus-visible,
.res-chip-x:focus-visible,

/* Persistent global shell: product and global actions only. */
.topbar {
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: #161616;
  color: #f4f4f4;
}

.shell-brand {
  width: var(--sidebar-w);
  flex-basis: var(--sidebar-w);
  height: 100%;
  padding-inline: var(--cds-spacing-05);
  display: flex;
  align-items: center;
  border-right: 1px solid #393939;
  color: #f4f4f4;
  font-size: var(--cds-type-body);
  font-weight: 600;
}

.topbar-spacer { flex: 1 1 auto; }
.topbar .iconbtn,
.topbar .search-trigger {
  height: 48px;
  min-height: 48px;
  border-radius: 0;
  border: 0;
  border-left: 1px solid #393939;
  color: #c6c6c6;
  background: transparent;
}
.topbar .iconbtn:hover,
.topbar .search-trigger:hover { color: #f4f4f4; background: #353535; }

/* Active time blocks read as part of the global shell, not as a bright status pill. */
.topbar .block-countdown {
  align-self: stretch;
  min-height: 48px;
  padding: 0 var(--cds-spacing-05);
  border-left: 1px solid #393939;
  border-radius: 0;
  background: #161616;
  color: #f4f4f4;
  font-size: var(--cds-type-body);
  font-weight: 600;
}
.topbar .block-countdown .ic { color: currentColor; }

.topbar .search.search-trigger {
  width: auto;
  min-width: 168px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-04);
  font-size: var(--cds-type-body);
}
.topbar .search.search-trigger:focus-within {
  width: auto;
  min-width: 168px;
  padding: 0 var(--cds-spacing-04);
  border-color: #393939;
  background: #353535;
}
.search-trigger-label { color: inherit; }
.search-trigger kbd {
  margin-left: auto;
  padding: 1px var(--cds-spacing-02);
  border: 1px solid #525252;
  color: #a8a8a8;
  background: transparent;
  font: inherit;
  font-size: 0.6875rem;
}

/* Primary navigation is a stable product layer, not part of the scrolling page canvas. */
.sidebar {
  padding: var(--cds-spacing-03) 0 0;
  border-right: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.nav-item,
.project-pill {
  min-height: 32px;
  margin: 0;
  padding: 0 var(--cds-spacing-05);
  border-radius: 0;
}
.nav-item {
  min-height: 32px;
  gap: var(--cds-spacing-06);
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
  line-height: var(--cds-heading-compact-01-line-height, 1.125rem);
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
}
.nav-item .ic,
.project-pill .ic {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.project-pill {
  gap: var(--cds-spacing-04);
  padding-left: var(--cds-spacing-07);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: var(--cds-body-compact-01-font-weight, 400);
  line-height: var(--cds-body-compact-01-line-height, 1.125rem);
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
}
.nav-item:hover,
.project-pill:hover { background: var(--cds-layer-hover-01); }
.nav-item.active,
.project-pill.active {
  position: relative;
  background: var(--cds-layer-selected-01);
  font-weight: 600;
}
.nav-item.active::before,
.project-pill.active::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--cds-interactive);
}
.side-scroll { padding: 0; }
.side-divider { margin: var(--cds-spacing-03) var(--cds-spacing-05); }
.pf-nav-sections,
.pf-sec-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-nav-sections > li,
.pf-sec-body > li { margin: 0; padding: 0; }
.pf-sec { margin: 0; }
.pf-sec-head {
  min-height: 32px;
  padding: 0 var(--cds-spacing-03) 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
  line-height: var(--cds-heading-compact-01-line-height, 1.125rem);
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
}
.pf-sec-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.pf-sec-toggle:focus-visible,
.pf-sec-add:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.pf-sec-add {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.pf-sec-add:hover { background: var(--cds-background-hover); color: var(--cds-icon-primary); }
.project-pill .pill-folder { position: static; }
.project-pill .pill-due,
.project-pill .pill-unread {
  position: static;
  width: auto;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 var(--cds-spacing-02);
  border-radius: 10px;
  background: var(--cds-layer-accent-01);
  box-shadow: none;
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: 600;
  line-height: 20px;
}
.project-pill .pill-due { color: var(--cds-support-error); }
.project-pill .pill-unread { color: var(--cds-link-primary); }
.project-pill.active .pill-due,
.project-pill.active .pill-unread { background: var(--cds-layer-accent-01); }
.sidebar-footer { padding: 0; border-color: var(--cds-border-subtle-00); }
.sidebar-footer .sidebar-toggle { border-radius: 0; }
.nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list > li { margin: 0; padding: 0; }
.nav-list .nav-item { width: 100%; }
@media (max-width: 860px) {
  .nav-item,
  .project-pill { min-height: 48px; }
  .pf-sec-head,
  .pf-sec-toggle { min-height: 48px; }
  .pf-sec-add { width: 48px; height: 48px; }
}
.topbar .account-btn { border-left: 1px solid #393939; }
.topbar .account-btn .avatar { width: 24px; height: 24px; }

/* The global Carbon shell follows the selected theme. G90/G100 retain the familiar dark header;
   White/G10 use a light application bar so global actions remain distinct without becoming an
   unrelated dark strip. Every foreground, divider and hover state comes from the active theme. */
:root[data-theme="light"] .topbar {
  border-bottom-color: var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
}
:root[data-theme="light"] .shell-brand {
  border-right-color: var(--cds-border-subtle-01);
  color: var(--cds-text-primary);
}
:root[data-theme="light"] .topbar .iconbtn,
:root[data-theme="light"] .topbar .search-trigger,
:root[data-theme="light"] .topbar .account-btn {
  border-left-color: var(--cds-border-subtle-01);
  color: var(--cds-icon-secondary);
  background: transparent;
}
:root[data-theme="light"] .topbar .iconbtn:hover,
:root[data-theme="light"] .topbar .search-trigger:hover,
:root[data-theme="light"] .topbar .account-btn:hover {
  color: var(--cds-icon-primary);
  background: var(--cds-layer-hover-01);
}
:root[data-theme="light"] .topbar .block-countdown {
  border-left-color: var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
}
:root[data-theme="light"] .topbar .search.search-trigger:focus-within {
  border-color: var(--cds-border-subtle-01);
  background: var(--cds-layer-hover-01);
}
:root[data-theme="light"] .search-trigger kbd {
  border-color: var(--cds-border-strong-01);
  color: var(--cds-text-helper);
}

/* The page header and work surface are separate logical Carbon grids. */
.main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--cds-background);
}
.page-header {
  min-height: var(--page-header-h);
  box-sizing: border-box;
  display: block;
  padding-top: var(--cds-spacing-05);
  padding-right: var(--cds-spacing-07);
  padding-bottom: var(--cds-spacing-05);
  padding-left: var(--cds-spacing-07);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-background);
}
.page-header-row { min-height: calc(var(--page-header-h) - (2 * var(--cds-spacing-05))); align-items: end; }
.page-header.board-page-header {
  min-height: 80px;
  padding-block: var(--cds-spacing-04);
}
.page-header.board-page-header .page-header-row { min-height: 56px; }
.page-header-copy { min-width: 0; align-self: end; }
.page-header h1 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-page);
  font-weight: 400;
  line-height: var(--cds-type-page-line);
  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
}
.page-header h1[tabindex="-1"]:focus { outline: none; }
.page-header-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--cds-spacing-03);
}
.page-action-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 1px;
  background: var(--cds-border-subtle-01);
}
.page-action-group .edit-project-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cds-layer-01);
  color: var(--cds-icon-primary);
}
.page-action-group .edit-project-btn:hover { background: var(--cds-layer-hover-01); }
.page-action-group .edit-project-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.page-search {
  width: min(100%, 320px);
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-strong-01);
  background: var(--cds-field-01);
  color: var(--cds-icon-secondary);
}
.page-search:focus-within { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.page-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
}
.page-header .btn,
.page-header .iconbtn {
  min-height: 40px;
  border-radius: 0;
}
:root[data-theme="dark"] .page-header .page-primary-action,
.page-header .page-primary-action {
  padding-inline: var(--cds-spacing-05);
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
  color: #ffffff;
}
:root[data-theme="dark"] .page-header .page-primary-action:hover,
.page-header .page-primary-action:hover {
  border-color: var(--cds-interactive-hover);
  background: var(--cds-interactive-hover);
}
.content { min-height: 0; padding: 0; }
.content:not([data-view="board"]) {
  box-sizing: border-box;
  padding: var(--cds-spacing-08) var(--cds-spacing-07) var(--cds-spacing-10);
}

/* Content-led screens use a comfortable measure instead of clinging to the navigation rail. */
.content[data-view="documents"] .docs-head-stack,
.content[data-view="documents"] .docs-grid,
.content[data-view="sop"] .docs-head-stack,
.content[data-view="sop"] .docs-grid {
  width: 100%;
  max-width: 1040px;
}
.content[data-view="assets"] { max-width: 1120px; }
.content[data-view="metrics"] { max-width: 1200px; }
.content[data-view="meetings"] .meet-list { max-width: 960px; }

.content[data-view="documents"] .docs-head-stack,
.content[data-view="sop"] .docs-head-stack {
  min-height: 56px;
  margin-bottom: var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-05);
  gap: var(--cds-spacing-04);
  background: var(--cds-layer-01);
}
.content[data-view="documents"] .docs-toolbar,
.content[data-view="sop"] .docs-toolbar { min-height: 40px; }
.content[data-view="documents"] .docs-grid,
.content[data-view="sop"] .docs-grid {
  border-top: 0;
  background: var(--cds-layer-01);
}
.content[data-view="documents"] .doc-card,
.content[data-view="sop"] .doc-card {
  min-height: 56px;
  padding-inline: var(--cds-spacing-05);
}
.content[data-view="documents"] .doc-card-art,
.content[data-view="sop"] .doc-card-art {
  width: 40px;
  height: 55px;
  flex-basis: 40px;
}
.content[data-view="documents"] .doc-card-foot,
.content[data-view="sop"] .doc-card-foot { padding-inline: var(--cds-spacing-03) var(--cds-spacing-05); }
.content[data-view="meetings"] .meet-list { gap: var(--cds-spacing-03); }
.content[data-view="meetings"] .meet-card {
  min-height: 64px;
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-01);
}

/* My Tasks: an 11/5 Carbon grid split at large gives the work list a useful measure and the
   interactive schedule enough room to remain legible. The calendar becomes its own destination
   below lg rather than being squeezed into an unusable rail. */
.content[data-view="board"] { overflow: hidden; }
.board-grid { height: 100%; padding-inline: 0; }
.board-layout {
  height: 100%;
  align-items: stretch;
  margin-inline: 0;
  gap: 0;
}
.board-main {
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 68.75%;
  max-width: 68.75%;
  padding: var(--cds-spacing-08) var(--cds-spacing-07) var(--cds-spacing-10);
  overflow-y: auto;
  background: var(--cds-background);
}
.board-cal {
  position: relative;
  width: auto;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  flex: 0 0 31.25%;
  max-width: 31.25%;
  border-left: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.board-cal-content { width: 100%; height: 100%; min-width: 0; }
.board-cal-toggle {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-icon-secondary);
  padding: 0;
  justify-content: center;
}
.board-cal-toggle:hover { background: var(--cds-layer-hover-01); color: var(--cds-icon-primary); }
.board-cal-toggle .ic { width: 20px; height: 20px; }
.board-cal-toggle:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.board-cal.is-collapsed {
  flex-basis: 48px;
  max-width: 48px;
}
.board-cal.is-collapsed .board-cal-toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}
.board-layout:has(> .board-cal.is-collapsed) .board-main {
  flex-basis: calc(100% - 48px);
  max-width: calc(100% - 48px);
}
/* The shell consumes 256px before the work surface reaches the viewport breakpoint. The existing
   ResizeObserver therefore supplies the authoritative content-width state. Do not let the legacy
   narrow layout stack a second full calendar below a deliberately narrowed task list. */
.content.board-narrow[data-view="board"] { overflow: hidden; }
.content.board-narrow .board-layout { display: flex; height: 100%; }
.content.board-narrow .board-main {
  flex-basis: 100%;
  max-width: 100%;
  padding: var(--cds-spacing-07) var(--cds-spacing-05) var(--cds-spacing-09);
  overflow-y: auto;
}
.content.board-narrow .board-cal { display: none; }
.board-main > .task-list,
.board-main > .proj-header,
.board-main > .proj-header:has(> .res-bar:only-child),
.board-main > .shared-strip {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.board-main > .proj-header,
.board-main > .proj-header:has(> .res-bar:only-child) {
  border-radius: 0;
  background: var(--cds-layer-01);
}
.task-list { gap: var(--cds-spacing-07); }
.task-list > .tl-section:nth-child(2)::before { display: none; }
.tl-section { min-width: 0; }
.tl-head {
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.tl-head h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: 48px;
}
.tl-head-count {
  min-width: 24px;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 48px;
  text-align: center;
}
.tl-head-add {
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 0;
  color: var(--cds-icon-secondary);
}
.tl-head-add:hover {
  background: var(--cds-layer-hover-01);
  color: var(--cds-icon-primary);
}
.tl-head-add:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.tl-drop {
  position: relative;
  gap: 0;
  background: var(--cds-layer-01);
}
.tl-section-empty > .tl-drop { min-height: 64px; }
.tl-drop.drag-over {
  background: var(--cds-layer-selected-01, var(--cds-layer-selected));
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--cds-focus);
}
.tl-section:has(> .tl-drop.drag-over) > .tl-head {
  background: var(--cds-layer-selected-01, var(--cds-layer-selected));
  box-shadow: inset 2px 0 0 var(--cds-focus);
}
.tl-section-empty > .tl-drop.drag-over::before {
  content: attr(data-drop-label);
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--cds-spacing-06);
  color: var(--cds-link-primary);
  font-size: var(--cds-type-label);
  font-weight: 600;
}
.task-card { border-bottom: 1px solid var(--cds-border-subtle-00); }
.task-card:last-child { border-bottom: 0; }
.task-row {
  min-height: 48px;
  box-sizing: border-box;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-02) var(--cds-spacing-05) var(--cds-spacing-02) var(--cds-spacing-06);
  border-radius: 0;
  background: transparent;
}
.task-row:hover,
.task-row:has(:focus-visible) { background: var(--cds-layer-hover-01); }
.task-row.kbd-sel {
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--cds-focus);
}
.task-row-title {
  min-width: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
}
.task-row-open {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-align: left;
}
.task-row-open:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.task-row-meta {
  margin-left: auto;
  opacity: 1;
  color: var(--cds-text-secondary);
}
.task-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 1rem;
  white-space: nowrap;
}
.task-status-shape {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.task-status-failed { color: var(--cds-text-error); }
.task-status-failed .task-status-shape {
  border-radius: 50%;
  background: var(--cds-support-error);
}
.task-status-warning { color: var(--cds-text-primary); }
.task-status-warning .task-status-shape {
  background: var(--cds-support-warning);
  transform: rotate(45deg);
}
.task-status-neutral .task-status-shape {
  border-radius: 50%;
  background: transparent;
}
.task-meta-item,
.task-due.task-meta-item,
.task-row-project {
  min-height: 20px;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 20px;
}
.task-row-actions {
  display: flex;
  flex: 0 0 40px;
  opacity: 1;
  gap: 0;
}
.task-row > .task-check,
.task-row > .task-check.done {
  order: 0;
  flex: 0 0 40px;
  opacity: 1;
}
.task-quick-action,
.task-menu,
.task-check,
.task-check.done {
  width: 40px;
  height: 40px;
  border-radius: 0;
}
.task-quick-action:hover,
.task-menu:hover { background: var(--cds-layer-02); }
.task-check:hover { background: transparent; }
.task-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--cds-icon-primary);
  opacity: 1;
  cursor: pointer;
}
.task-menu svg { width: 16px; height: 16px; }
.task-menu:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* Compact Carbon-style labels for custom icon-only controls. The aria-label remains the
   accessible name; this visual label appears on both hover and keyboard focus. */
.carbon-icon-tooltip { position: relative; }
.carbon-icon-tooltip::after {
  position: absolute;
  z-index: 7000;
  inset-block-end: calc(100% + var(--cds-spacing-03));
  inset-inline-start: 50%;
  max-width: 176px;
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  background: var(--cds-background-inverse);
  color: var(--cds-text-inverse);
  content: attr(data-tooltip);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 110ms ease, transform 110ms ease;
  visibility: hidden;
  white-space: nowrap;
}
.carbon-icon-tooltip.tooltip-bottom::after {
  inset-block: calc(100% + var(--cds-spacing-03)) auto;
  transform: translate(-50%, -4px);
}
.carbon-icon-tooltip.tooltip-align-end::after {
  inset-inline: auto 0;
  transform: translateY(4px);
}
.carbon-icon-tooltip.tooltip-bottom.tooltip-align-end::after { transform: translateY(-4px); }
.carbon-icon-tooltip:hover::after,
.carbon-icon-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.carbon-icon-tooltip.tooltip-align-end:hover::after,
.carbon-icon-tooltip.tooltip-align-end:focus-visible::after { transform: translateY(0); }
.task-check { opacity: 0.72; }
.task-check::before,
.task-check.done::before {
  inset: 11px;
  border-width: 1px;
  border-radius: 0;
  border-color: var(--cds-icon-primary);
  background: transparent;
}
.task-check.done::before {
  border-color: var(--cds-icon-primary);
  background: var(--cds-icon-primary);
}
.task-check.done { color: var(--cds-icon-inverse); }
.tl-sec-empty {
  min-height: 64px;
  box-sizing: border-box;
  padding: var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
}
.tl-empty-state { align-items: center; justify-content: space-between; gap: var(--cds-spacing-06); }
.tl-empty-state-compact { min-height: 48px; padding-block: var(--cds-spacing-04); }
.tl-empty-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
}
.tl-empty-copy strong {
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
}
.tl-empty-copy > span:last-child {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 1rem;
}
.tl-completed-toggle { min-height: 48px; padding: 0; }
.tl-completed-toggle h2 { line-height: 48px; }
.tl-completed-body { padding-top: 0; background: var(--cds-layer-01); }
.tl-completed-tools { padding: var(--cds-spacing-05) var(--cds-spacing-06); }
.tl-completed-searchwrap,
.tl-completed-period { border-radius: 0; }

.task-skeleton {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(120px, 42%) minmax(64px, 18%);
  justify-content: space-between;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.task-skeleton span {
  height: 12px;
  background: linear-gradient(90deg, var(--cds-layer-02), var(--cds-layer-hover-01), var(--cds-layer-02));
  background-size: 200% 100%;
  animation: pf-carbon-skeleton 1.4s ease infinite;
}
@keyframes pf-carbon-skeleton { to { background-position: -200% 0; } }

.view-loading {
  width: 100%;
  min-height: 320px;
  padding-block: var(--cds-spacing-07);
  align-items: flex-start;
  justify-content: stretch;
}
.view-loading-row { width: 100%; }
.view-loading-column { display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.view-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--cds-layer-01), var(--cds-layer-hover-01), var(--cds-layer-01));
  background-size: 200% 100%;
  animation: pf-carbon-skeleton 1.4s ease infinite;
}
.view-skeleton-title { width: min(240px, 55%); height: 28px; }
.view-skeleton-copy { width: min(420px, 80%); height: 16px; margin-bottom: var(--cds-spacing-06); }
.view-skeleton-panel { display: flex; flex-direction: column; background: var(--cds-layer-01); }
.view-skeleton-row { width: 100%; height: 48px; border-bottom: 1px solid var(--cds-border-subtle-00); }

.board-cal-content .cal2-embedded {
  border: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--cds-layer-01);
}
.board-cal-content > .carbon-empty-state {
  min-height: calc(100% - (2 * var(--cds-spacing-07)));
  margin: var(--cds-spacing-07) var(--cds-spacing-06);
}
.board-cal-head,
.cal2-toolbar-min {
  min-height: 48px;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.cal2-toolbar-min {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 0 48px;
}
.cal2-date-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal2-date-nav > .iconbtn {
  width: 40px;
  min-width: 40px;
  height: 48px;
  border-radius: 0;
}
.cal2-toolbar-min > .board-cal-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0;
}
.cal2-toolbar-min > .board-cal-toggle .ic {
  width: 20px;
  height: 20px;
}
.cal2-toolbar-context {
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--cds-spacing-03);
}
.cal2-toolbar-context .cal2-label {
  min-height: 18px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cds-text-primary);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carbon project roadmap: grid layout, data-table anatomy, content switcher and status shapes. */
.content[data-view="timeline"] .plan-wrap {
  width: 100%;
  max-width: none;
  gap: var(--cds-spacing-09);
  padding-bottom: var(--cds-spacing-10);
}
.content[data-view="timeline"] .plan-grid-row { width: 100%; }
.content[data-view="timeline"] .plan-grid-col { min-width: 0; }
.content[data-view="timeline"] .plan-roadmap {
  min-width: 0;
  border: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.content[data-view="timeline"] .tl-table-title {
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.tl-chart-title { min-width: 0; }
.tl-chart-title h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}
.tl-chart-title p {
  max-width: 640px;
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: 1.43;
}
.tl-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 48px;
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.tl-toolbar-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-variant-numeric: tabular-nums;
}
.tl-summary-divider { width: 1px; height: 16px; background: var(--cds-border-subtle-01); }
.tl-chart-actions { display: flex; min-width: 0; align-items: stretch; }
/* 2026-08 task, project, timeline and meeting refinements. These stay in the
   existing framework while following Carbon's spacing, list and focus model. */
.task-modal { width: min(768px, calc(100vw - var(--cds-spacing-07))); }
.task-modal .task-modal-more {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: var(--cds-icon-primary);
}
.task-modal .task-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-05);
  min-width: 0;
}
.task-modal .task-form-section > h3,
.task-modal .task-section-heading {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: 1.25rem;
}
.task-modal .task-creation-options {
  gap: var(--cds-spacing-07);
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle-01);
}
.task-modal .task-details-section .field { gap: var(--cds-spacing-03); }
.task-modal .task-details-section .task-description { margin-top: var(--cds-spacing-02); }
.task-modal .task-schedule-section,
.task-modal .detail-section {
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle-01);
}
.task-modal .task-section-helper { margin: calc(-1 * var(--cds-spacing-03)) 0 0; }
.task-modal .rt-check {
  min-height: 24px;
  margin: var(--cds-spacing-03) 0;
  padding-left: var(--cds-spacing-07);
  line-height: 1.5;
}
.task-modal .rt-check::before {
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--cds-icon-primary);
  border-radius: 0;
  background: var(--cds-field-01);
}
.task-modal .rt-check:hover::before { border-color: var(--cds-interactive); }
.task-modal .rt-check[data-checked="true"]::before {
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
}
.task-modal .rt-check::after { left: 5px; top: 5px; }
.task-save-state {
  align-self: center;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-helper, .75rem);
  line-height: 1rem;
}
.task-modal .modal-foot { padding: 0; gap: 0; }
.task-modal .modal-foot .task-modal-primary {
  flex: 0 0 50%;
  min-width: 160px;
  min-height: 64px;
  border-radius: 0;
}
.task-modal .modal-foot .task-save-state { margin-left: var(--cds-spacing-06); }

.proj-header,
.proj-header:has(> .res-bar:only-child) {
  padding: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
}
.ph-summary-head,
.ph-results-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.ph-summary-head h2,
.ph-results-head h3 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
}
.ph-summary-progress {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-variant-numeric: tabular-nums;
}
.proj-header .ph-main { padding: var(--cds-spacing-05); }
.proj-header .kr-list { gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--cds-border-subtle-01); }
.proj-header .ph-results-head { min-height: 40px; border-bottom: 1px solid var(--cds-border-subtle-01); }
.proj-header .kr-row {
  width: 100%;
  min-height: 48px;
  gap: var(--cds-spacing-04);
  margin: 0;
  padding: 0 var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
}
.proj-header .kr-check {
  width: 16px;
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--cds-icon-primary);
  color: var(--cds-icon-on-color);
}
.proj-header .kr-row:hover .kr-check,
.proj-header .kr-row:focus-visible .kr-check {
  border: 1px solid var(--cds-icon-primary);
  background: transparent;
  color: var(--cds-icon-primary);
}
.proj-header .kr-row.done .kr-check { border-color: var(--cds-interactive); background: var(--cds-interactive); color: var(--cds-icon-on-color); }
.proj-header .kr-target { color: var(--cds-text-secondary); font-size: var(--cds-type-label); white-space: nowrap; }
.proj-header > .res-bar:not(:first-child) { margin: 0; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-top: 0; }
.proj-header.space-summary {
  padding: 0;
  border: 0;
  background: transparent;
}
.proj-header.space-summary .ph-desc {
  max-width: 640px;
  margin: 0 0 var(--cds-spacing-04);
  padding: 0;
  color: var(--cds-text-secondary);
  line-height: 1.5;
}
.proj-header.space-summary > .res-bar:not(:first-child) { padding: 0; }
.res-panel .res-head {
  min-height: 32px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cds-spacing-03);
  line-height: 1;
}
.res-panel .res-people-group,
.res-panel .res-person-avatar,
.res-panel .res-person-avatar .avatar { align-self: center; }
.res-panel .res-head .res-add { margin-inline-start: auto; }

.tl-progress-cell { display: flex; align-items: center; gap: var(--cds-spacing-03); }
.tl-progress-mini {
  width: 40px;
  height: 4px;
  overflow: hidden;
  background: var(--cds-border-subtle-01);
}
.tl-progress-mini > span { display: block; height: 100%; background: var(--cds-icon-secondary); }
.tl-range-progress { display: block; height: 100%; background: var(--cds-interactive); }

.vault-toolbar,
.meet-list { width: min(100%, 960px); margin-inline: auto; }
.vault-toolbar {
  min-height: 64px;
  margin-bottom: var(--cds-spacing-07);
  padding-bottom: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.vault-toolbar h2 { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
.vault-toolbar .sub { color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.meet-list { display: flex; flex-direction: column; gap: var(--cds-spacing-07); max-width: 960px; }
.meeting-day .ptl-group-label { margin: 0 0 var(--cds-spacing-03); color: var(--cds-text-secondary); }
.meet-day-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cds-border-subtle-01); }
.meet-row { margin: 0; padding: 0; }
.meet-card {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 24px minmax(200px, 1fr) minmax(176px, auto) 104px 24px;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
  color: var(--cds-text-primary);
  text-align: left;
}
.meet-card:hover { border-color: var(--cds-border-subtle-01); background: var(--cds-layer-hover-01); box-shadow: none; }
.meet-card:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.meet-icon { width: 24px; height: 24px; border-radius: 0; background: transparent; color: var(--cds-icon-secondary); }
.meet-primary { min-width: 0; }
.meet-title { overflow: hidden; color: var(--cds-text-primary); font-size: var(--cds-type-body); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.meet-sub,
.meet-date,
.meet-actions-count { color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.meet-date { white-space: nowrap; }
.meet-actions-count { text-align: right; }
.meet-actions-count.empty { color: var(--cds-text-helper); }
.meet-open-icon { display: inline-flex; justify-content: flex-end; color: var(--cds-icon-secondary); transform: rotate(-90deg); }

/* Meetings is an audio library, deliberately stripped of transcription and note-taking UI. */
.meeting-audio-page { width: 100%; padding-inline: 0; }
.recording-header-row,
.recording-list-row { width: 100%; margin-inline: 0; }
.recording-header-row > [class*="cds--col"],
.recording-list-row > [class*="cds--col"] { padding-inline: 0; }
.recording-toolbar {
  width: min(100%, 1040px);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  margin-inline: auto;
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.recording-count { margin: 0; color: var(--cds-text-secondary); font-size: var(--cds-type-label); white-space: nowrap; }
.recording-toolbar-actions { min-width: 0; display: flex; align-items: stretch; gap: 1px; }
.recording-filter { display: flex; }
.recording-filter > select {
  min-width: 144px;
  min-height: 48px;
  padding-inline: var(--cds-spacing-05) 40px;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background-color: var(--cds-field-01);
  color: var(--cds-text-primary);
}
.recording-search {
  min-width: 240px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding-inline: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-strong-01);
  background: var(--cds-field-01);
  color: var(--cds-icon-secondary);
}
.recording-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cds-text-primary); font: inherit; }
.recording-search:focus-within { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.recording-helper,
.recording-meta { margin: 0; color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.recording-list-column { width: min(100%, 1040px); margin-inline: auto; }
.recording-list { margin: var(--cds-spacing-07) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cds-border-subtle-01); }
.recording-row {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(208px, 1fr) minmax(240px, 1.25fr) auto;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.recording-row:hover { background: var(--cds-layer-hover-01); }
.recording-title-block { min-width: 0; display: flex; align-items: center; gap: var(--cds-spacing-04); }
.recording-icon { flex: 0 0 24px; display: inline-flex; color: var(--cds-icon-secondary); }
.recording-copy { min-width: 0; }
.recording-title { margin: 0; overflow: hidden; color: var(--cds-text-primary); font-size: var(--cds-type-body); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recording-player { width: 100%; min-width: 220px; height: 40px; accent-color: var(--cds-interactive); }
.recording-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.recording-actions .btn { min-height: 40px; border-radius: 0; }
.recording-name-modal .recording-helper { margin-top: var(--cds-spacing-03); }
.recording-save-bar { max-width: min(720px, calc(100vw - 32px)); border-radius: 0; background: var(--cds-background-inverse); }
.recording-save-bar .rec-label { max-width: 240px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recording-save-bar .rec-status { color: var(--cds-text-inverse); }

@media (max-width: 1055px) {
  .recording-row { grid-template-columns: minmax(208px, 1fr) minmax(240px, 1.4fr); }
  .recording-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 40px; }
}

@media (max-width: 672px) {
  .task-modal { width: 100vw; height: 100dvh; max-height: 100dvh; }
  .task-modal .task-modal-head,
  .task-modal .modal-body { padding-inline: var(--cds-spacing-05); }
  .task-modal .task-meta-grid,
  .task-modal .form-row { grid-template-columns: 1fr; flex-direction: column; }
  .task-save-state { display: none; }
  .task-modal .modal-foot .spacer { display: none; }
  .task-modal .modal-foot .task-modal-primary { flex: 1 1 100%; min-width: 0; }
  .ph-summary-head { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: var(--cds-spacing-04); }
  .meet-card { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: var(--cds-spacing-04); padding-block: var(--cds-spacing-04); }
  .meet-date,
  .meet-actions-count { grid-column: 2; }
  .meet-actions-count { text-align: left; }
  .meet-open-icon { grid-column: 3; grid-row: 1 / span 3; }
  .recording-toolbar { min-height: 88px; padding: var(--cds-spacing-04) var(--cds-spacing-05); }
  .recording-toolbar { align-items: stretch; flex-direction: column; }
  .recording-toolbar-actions { flex-wrap: wrap; }
  .recording-search { min-width: 100%; flex: 1 1 100%; }
  .recording-filter,
  .recording-toolbar-actions > .btn { flex: 1 1 calc(50% - 1px); }
  .recording-filter > select { width: 100%; }
  .recording-row { grid-template-columns: 1fr; gap: var(--cds-spacing-04); padding: var(--cds-spacing-05); }
  .recording-player { min-width: 0; }
  .recording-actions { grid-column: 1; padding-left: 0; flex-wrap: wrap; }
  .recording-actions .btn { flex: 1 1 auto; }
  .recording-save-bar { align-items: flex-start; }
  .tl-progress-mini { display: none; }
}
.tl-today-control {
  min-width: 72px;
  min-height: 48px;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-left: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
  background: var(--cds-layer-01);
  color: var(--cds-link-primary);
  font: inherit;
  font-size: var(--cds-type-label);
  cursor: pointer;
}
.tl-today-control:hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }
.tl-today-control:focus-visible { z-index: 2; outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.tl-chart-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  min-height: 40px;
  padding: 0 var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
}
.tl-key-label { color: var(--cds-text-helper); }
.tl-legend { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-04); margin: 0; padding: 0; color: var(--cds-text-secondary); font-size: var(--cds-type-label); list-style: none; }
.tl-legend li { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; }
.tl-legend-compact { align-items: center; padding: 0 var(--cds-spacing-05); }
.tl-key { position: relative; display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; color: var(--cds-icon-secondary); }
.tl-key-target { border: 1.5px solid currentColor; border-radius: 50%; }
.tl-key-deadline { width: 2px; background: currentColor; }
.tl-key-deadline::before { content: ''; position: absolute; top: 0; left: 0; width: 7px; height: 2px; background: currentColor; }

.plan-roadmap .timeline-scroll {
  --tl-label-width: 320px;
  border: 0;
  background: var(--cds-layer-01);
  scroll-padding-left: var(--tl-label-width);
  scrollbar-gutter: stable;
}
.plan-roadmap .tl-headwrap,
.plan-roadmap .tl-monthband,
.plan-roadmap .tl-header { background: var(--cds-layer-01); }
.plan-roadmap .tl-rowlabel-col,
.plan-roadmap .tl-rowlabel {
  width: var(--tl-label-width);
  flex-basis: var(--tl-label-width);
  border-right-color: var(--cds-border-strong-01);
  background: var(--cds-layer-01);
}
.plan-roadmap .tl-monthband { min-height: 32px; }
.plan-roadmap .tl-month { height: 32px; padding: var(--cds-spacing-03) 0; color: var(--cds-text-helper); font-size: var(--cds-type-label); }
.plan-roadmap .tl-month-label { padding-left: var(--cds-spacing-04); }
.plan-roadmap .tl-header { min-height: 40px; border-bottom-color: var(--cds-border-strong-01); }
.plan-roadmap .tl-project-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 52px;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 600;
}
.plan-roadmap .tl-project-label span:last-child { text-align: right; }
.plan-roadmap .tl-day,
.plan-roadmap .tl-cell { width: var(--tl-day-width); flex-basis: var(--tl-day-width); }
.plan-roadmap .tl-day { position: relative; min-height: 40px; padding: var(--cds-spacing-03) 0; color: var(--cds-text-helper); font-size: var(--cds-type-label); }
.plan-roadmap .tl-day .dnum {
  position: absolute;
  top: var(--cds-spacing-03);
  left: var(--cds-spacing-02);
  z-index: 1;
  min-width: 48px;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 400;
  white-space: nowrap;
}
.plan-roadmap .tl-day.today .dnum { border-radius: 0; background: var(--cds-interactive); color: var(--cds-text-on-color); font-weight: 600; }
.plan-roadmap .tl-row { min-height: 48px; border-bottom-color: var(--cds-border-subtle-00); }
.plan-roadmap .tl-rowlabel { padding: 0; }
.plan-roadmap .tl-project-button {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 72px 52px;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-02) var(--cds-spacing-05);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-roadmap .tl-project-button:hover { background: var(--cds-layer-hover-01); }
.plan-roadmap .tl-project-button:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.plan-roadmap .tl-rl-text { display: flex; min-width: 0; flex-direction: column; gap: var(--cds-spacing-02); }
.plan-roadmap .tl-rl-name { overflow: hidden; color: var(--cds-text-primary); font-size: var(--cds-type-body); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.plan-roadmap .tl-rl-meta { overflow: hidden; color: var(--cds-text-secondary); font-size: var(--cds-type-label); text-overflow: ellipsis; white-space: nowrap; }
.tl-derived-label { margin-left: var(--cds-spacing-03); color: var(--cds-text-helper); }
.tl-derived-label::before { content: '· '; }
.plan-roadmap .tl-health-cell { display: inline-flex; min-width: 0; align-items: center; gap: var(--cds-spacing-03); color: var(--cds-text-secondary); font-size: var(--cds-type-label); white-space: nowrap; }
.plan-roadmap .tl-progress-cell { display: flex; min-width: 0; align-items: center; justify-content: flex-end; }
.plan-roadmap .tl-rl-progress { color: var(--cds-text-secondary); font-size: var(--cds-type-label); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
.tl-health-mark { width: 8px; height: 8px; flex: 0 0 8px; border: 1px solid currentColor; background: transparent; }
.h-on_track { --tl-health: var(--cds-support-success); }
.h-buffer { --tl-health: var(--cds-support-warning); }
.h-late { --tl-health: var(--cds-support-error); }
.h-done { --tl-health: var(--cds-icon-secondary); }
.h-none { --tl-health: var(--cds-interactive); }
.tl-rowlabel .tl-health-mark { border-color: var(--tl-health); background: var(--tl-health); }
.plan-roadmap .tl-cell.week-start { border-left-color: var(--cds-border-subtle-01); }
.plan-roadmap .tl-cell.month-start { border-left-color: var(--cds-border-strong-01); }
.plan-roadmap .tl-cell.weekend { background: transparent; }
.plan-roadmap .tl-cell.today { background: var(--cds-background-selected); }
.plan-roadmap .tl-today-line { width: 2px; background: var(--cds-focus); opacity: 1; }
.plan-roadmap .tl-range { height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.plan-roadmap .tl-range-track {
  inset: 18px 0;
  border: 0;
  border-radius: 0;
  background: var(--cds-border-subtle-01);
}
.plan-roadmap .tl-range.h-on_track .tl-range-track,
.plan-roadmap .tl-range.h-buffer .tl-range-track,
.plan-roadmap .tl-range.h-late .tl-range-track,
.plan-roadmap .tl-range.h-done .tl-range-track,
.plan-roadmap .tl-range.h-none .tl-range-track { background: var(--cds-border-subtle-01); }
.plan-roadmap .tl-range.h-on_track .tl-range-progress,
.plan-roadmap .tl-range.h-buffer .tl-range-progress,
.plan-roadmap .tl-range.h-late .tl-range-progress,
.plan-roadmap .tl-range.h-done .tl-range-progress,
.plan-roadmap .tl-range.h-none .tl-range-progress { background: var(--cds-interactive); }
.plan-roadmap .tl-range:hover .tl-range-track,
.plan-roadmap .tl-range:focus-visible .tl-range-track { background: var(--cds-border-strong-01); }
.plan-roadmap .tl-range:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 0; }
.plan-roadmap .tl-range-milestone { display: grid; place-items: center; }
.plan-roadmap .tl-milestone {
  width: 12px;
  height: 12px;
  border: 2px solid var(--cds-layer-01);
  outline: 1px solid var(--cds-interactive);
  background: var(--cds-interactive);
}
.plan-roadmap .tl-marker { color: var(--cds-icon-secondary); }
.plan-roadmap .tl-target { width: 8px; height: 8px; border-width: 1.5px; border-radius: 50%; background: var(--cds-layer-01); }
.plan-roadmap .tl-deadline { width: 2px; height: 16px; border-radius: 0; color: var(--cds-icon-primary); }
.plan-roadmap .tl-deadline::before { display: none; }
.tl-hover-tip {
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  border: 0;
  border-radius: 0;
  background: var(--cds-background-inverse);
  color: var(--cds-text-inverse);
  box-shadow: none;
  font-size: var(--cds-type-label);
}

/* Metrics workspace: Carbon grid groups, data-table anatomy and accessible compact trends. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.content[data-view="metrics"] {
  width: 100%;
  max-width: none;
  padding: 0 0 var(--cds-spacing-10);
  background: var(--cds-background);
}
.metrics-toolbar,
.metrics-custom,
.metrics-summary,
.metrics-data,
.metrics-empty-grid { padding-inline: var(--cds-spacing-07); }
.metrics-toolbar {
  margin: 0;
  padding-top: var(--cds-spacing-07);
  padding-bottom: var(--cds-spacing-07);
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.metrics-toolbar-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 6fr);
  align-items: flex-end;
  gap: var(--cds-spacing-07);
}
.metrics-period-block { min-width: 0; }
.metrics-control-label,
.metrics-date-field label {
  display: block;
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metrics-period-controls {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.metrics-period-btn {
  position: relative;
  min-width: 88px;
  min-height: 48px;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  background: transparent;
  color: var(--cds-text-secondary);
  font: inherit;
  font-size: var(--cds-type-body);
  cursor: pointer;
}
.metrics-period-btn:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
.metrics-period-btn.on { color: var(--cds-text-primary); font-weight: 600; }
.metrics-period-btn.on::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--cds-border-interactive);
  content: '';
}
.metrics-period-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.metrics-period-description {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metrics-primary-action { display: flex; justify-content: flex-end; }
.metrics-add { min-width: 144px; min-height: 48px; }
.metrics-custom {
  margin: 0;
  padding-top: var(--cds-spacing-06);
  padding-bottom: var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.metrics-custom .cds--row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cds-spacing-05);
}
.metrics-date-field .input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-field-01);
}
.metrics-summary {
  padding-top: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-06);
}
.metrics-summary-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cds-spacing-05);
}
.metrics-summary-row > div,
.metrics-toolbar-inner > div,
.metrics-custom .cds--row > div { width: auto; max-width: none; }
.metrics-summary-tile {
  min-height: 88px;
  box-sizing: border-box;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.metrics-summary-tile.positive { border-top-color: var(--cds-support-success); }
.metrics-summary-tile.negative { border-top-color: var(--cds-support-error); }
.metrics-summary-label {
  margin: 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
}
.metrics-summary-value {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-05-font-size, 32px);
  font-weight: 300;
  line-height: var(--cds-heading-05-line-height, 40px);
  font-variant-numeric: tabular-nums;
}
.metrics-summary-description {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metrics-data { padding-bottom: var(--cds-spacing-08); }
.metrics-data-heading { margin-bottom: var(--cds-spacing-03); }
.metrics-data-heading h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading);
  font-weight: 400;
  line-height: var(--cds-type-heading-line);
}
.metrics-table-column { min-width: 0; }
.metrics-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  -webkit-overflow-scrolling: touch;
}
.metrics-table {
  width: 100%;
  min-width: 960px;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: var(--cds-layer-01);
  table-layout: fixed;
}
.metrics-table th,
.metrics-table td {
  box-sizing: border-box;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
  text-align: left;
  vertical-align: middle;
}
.metrics-table thead th {
  height: 48px;
  background: var(--cds-layer-accent-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-heading-compact-01-font-size, 14px);
  font-weight: 600;
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
  text-transform: none;
}
.metrics-table tbody th,
.metrics-table tbody td { height: 64px; }
.metrics-table tbody tr:last-child th,
.metrics-table tbody tr:last-child td { border-bottom: 0; }
.metrics-table tbody tr:hover th,
.metrics-table tbody tr:hover td { background: var(--cds-layer-hover-01); }
.metrics-table th:first-child { width: 23%; }
.metrics-table .col-trend { width: 15%; }
.metrics-table .col-owner { width: 14%; }
.metrics-table .col-source { width: 10%; }
.metrics-table .col-target { width: 10%; }
.metric-open {
  width: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--cds-spacing-02);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.metric-open:hover { color: var(--cds-link-primary); text-decoration: none; }
.metric-open:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.metric-name { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.metric-direction {
  color: var(--cds-text-helper);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: var(--cds-type-label-line);
}
.mt-val { font-variant-numeric: tabular-nums; }
.mt-delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-delta.up,
.metric-trend.up { color: var(--cds-support-success); }
.mt-delta.down,
.metric-trend.down { color: var(--cds-support-error); }
.mt-delta.flat,
.metric-trend.flat { color: var(--cds-text-secondary); }
.metric-status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: var(--cds-spacing-03);
  border: 1px solid currentColor;
  background: currentColor;
}
.metric-spark { display: block; width: 120px; height: 32px; overflow: visible; }
.metric-spark-baseline { stroke: var(--cds-border-subtle-01); stroke-width: 1; }
.metric-spark-line { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.metric-spark-point { fill: currentColor; }
.metrics-table td.col-owner { overflow: hidden; }
.metric-owner { width: 100%; display: inline-flex; align-items: center; gap: var(--cds-spacing-03); min-width: 0; }
.metric-owner > span:last-child { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--cds-spacing-03);
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 999px;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
  white-space: nowrap;
}
.src-fitcrm { border-color: var(--cds-border-interactive); color: var(--cds-link-primary); }
.metrics-empty-grid { padding-top: var(--cds-spacing-07); }
.metrics-empty {
  min-height: 320px;
  border-top: 1px solid var(--cds-border-subtle-01);
  border-radius: 0;
  background: var(--cds-layer-01);
}

/* Metric dialogs follow the same productive modal anatomy as task and project creation. */
.metric-modal {
  width: 672px;
  max-height: calc(100dvh - var(--cds-spacing-10));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cds-layer-01);
}
.metric-modal-head {
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.metric-modal-heading { min-width: 0; flex: 1; }
.metric-modal-eyebrow {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metric-modal-heading h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading);
  font-weight: 400;
  line-height: var(--cds-type-heading-line);
}
.metric-modal-subtitle {
  max-width: 32rem;
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-copy-line);
}
.metric-modal-close {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0 calc(-1 * var(--cds-spacing-03)) 0 0;
  padding: 0;
}
.metric-modal > .modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--cds-spacing-06);
}
.metric-modal > .modal-foot {
  min-height: 64px;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: var(--cds-spacing-03);
  margin: 0;
  padding: var(--cds-spacing-03) var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle-01);
}
.metric-modal > .modal-foot .btn { min-width: 144px; min-height: 48px; }
.metric-template-list { border-top: 1px solid var(--cds-border-subtle-01); }
.metric-template-item { border-bottom: 1px solid var(--cds-border-subtle-01); }
.metric-template-button {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.metric-template-button:hover { background: var(--cds-layer-hover-01); }
.metric-template-button:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.metric-template-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: var(--cds-spacing-02); }
.metric-template-name { font-weight: 600; }
.metric-template-description { color: var(--cds-text-secondary); font-size: var(--cds-type-body); line-height: var(--cds-type-body-line); }
.metric-template-custom .metric-template-button { min-height: 56px; color: var(--cds-link-primary); }
.metric-custom-modal .modal-body { display: flex; flex-direction: column; gap: var(--cds-spacing-06); }
.metric-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cds-spacing-05); }
.metric-field { min-width: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
.metric-field label {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metric-field .input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-field-01);
}
.metric-field-helper,
.metric-section-helper {
  margin: 0;
  color: var(--cds-text-helper);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.metric-detail-modal { width: 768px; }
.metric-detail-body { display: flex; flex-direction: column; gap: var(--cds-spacing-07); }
.metric-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cds-border-subtle-01);
  border-left: 1px solid var(--cds-border-subtle-01);
}
.metric-detail-fact {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-04);
  border-right: 1px solid var(--cds-border-subtle-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.metric-detail-fact span { color: var(--cds-text-secondary); font-size: var(--cds-type-label); line-height: var(--cds-type-label-line); }
.metric-detail-fact strong { color: var(--cds-text-primary); font-size: var(--cds-type-body); line-height: var(--cds-type-body-line); text-transform: capitalize; }
.metric-detail-section { padding-top: var(--cds-spacing-06); border-top: 1px solid var(--cds-border-subtle-01); }
.metric-detail-section h3,
.metric-danger-zone h3 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: var(--cds-type-body-line);
}
.metric-detail-section > .metric-section-helper { margin: var(--cds-spacing-02) 0 var(--cds-spacing-05); }
.metric-log {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--cds-spacing-05);
  align-items: end;
  margin: 0;
}
.metric-log-submit { min-width: 128px; min-height: 48px; }
.metric-source-notice {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: 0 var(--cds-spacing-05);
  background: var(--cds-notification-background-info, var(--cds-layer-02));
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
}
.metric-history-table { width: 100%; border-collapse: collapse; }
.metric-history-table th,
.metric-history-table td {
  height: 48px;
  padding: 0 var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  text-align: left;
}
.metric-history-table thead th { background: var(--cds-layer-accent-01); font-weight: 600; }
.metric-history-table th:last-child,
.metric-history-table td:last-child { text-align: right; }
.metric-history-action { width: 48px; padding: 0 !important; }
.metric-delete-value { width: 48px; min-width: 48px; height: 48px; padding: 0; }
.metric-history-empty { margin: 0; padding: var(--cds-spacing-05); background: var(--cds-layer-02); color: var(--cds-text-secondary); font-size: var(--cds-type-body); }
.metric-share-people { gap: var(--cds-spacing-03); }
.metric-share-people .share-person { min-height: 40px; border-radius: 0; background: var(--cds-layer-02); }
.metric-share-people .share-person.on { border-color: var(--cds-border-interactive); background: var(--cds-background-selected); }
.metric-danger-zone {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-support-error);
}
.metric-danger-zone p { margin: var(--cds-spacing-02) 0 0; color: var(--cds-text-secondary); font-size: var(--cds-type-body); }
.btn-danger-ghost { border-color: var(--cds-support-error); color: var(--cds-support-error); background: transparent; }
.btn-danger-ghost:hover { background: var(--cds-hover-danger); color: var(--cds-text-on-color); }

@media (max-width: 1055px) {
  .metrics-toolbar,
  .metrics-custom,
  .metrics-summary,
  .metrics-data,
  .metrics-empty-grid { padding-inline: var(--cds-spacing-05); }
  .metrics-table { min-width: 880px; }
  .metrics-table .col-owner { display: none; }
  .metrics-toolbar-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .metrics-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-custom .cds--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 671px) {
  .content[data-view="metrics"] { padding: 0 0 var(--cds-spacing-08); }
  .metrics-toolbar,
  .metrics-custom,
  .metrics-summary,
  .metrics-data,
  .metrics-empty-grid { padding-inline: 0; }
  .metrics-toolbar { padding-top: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-05); }
  .metrics-toolbar-inner { grid-template-columns: 1fr; gap: var(--cds-spacing-05); }
  .metrics-period-block { padding-inline: var(--cds-spacing-05); }
  .metrics-period-controls { width: 100%; }
  .metrics-period-btn { min-width: 80px; flex: 1 0 auto; }
  .metrics-primary-action { justify-content: stretch; padding-inline: var(--cds-spacing-05); }
  .metrics-add { width: 100%; }
  .metrics-custom .cds--row { grid-template-columns: 1fr; padding-inline: var(--cds-spacing-05); }
  .metrics-summary-row { grid-template-columns: 1fr; gap: 1px; }
  .metrics-summary-tile { min-height: 120px; }
  .metrics-data-heading { padding-inline: var(--cds-spacing-05); }
  .metrics-table { min-width: 640px; }
  .metrics-table .col-trend,
  .metrics-table .col-owner,
  .metrics-table .col-source { display: none; }
  .metrics-table th:first-child { width: 34%; }
  .metrics-table .col-target { width: 20%; }
  .metric-modal,
  .metric-detail-modal { width: 100%; max-height: 100dvh; }
  .metric-modal-head { min-height: 112px; padding: var(--cds-spacing-05); }
  .metric-modal > .modal-body { padding: var(--cds-spacing-05); }
  .metric-modal > .modal-foot { padding: var(--cds-spacing-05); }
  .metric-form-grid,
  .metric-detail-summary,
  .metric-log { grid-template-columns: 1fr; }
  .metric-detail-fact { min-height: 64px; }
  .metric-danger-zone { align-items: stretch; flex-direction: column; }
}

@media (min-width: 1584px) {
  .page-header { padding-inline: var(--cds-spacing-08); }
  .content:not([data-view="board"]) { padding-inline: var(--cds-spacing-08); }
  .board-main { padding-inline: var(--cds-spacing-08); }
}

/* Carbon md: 8 columns. Calendar remains a dedicated primary destination rather than stacking. */
@media (max-width: 1055px) {
  :root { --page-header-h: 112px; }
  .page-header-row { min-height: calc(var(--page-header-h) - (2 * var(--cds-spacing-05))); }
  .page-header.board-page-header { min-height: 112px; }
  .page-header.board-page-header .page-header-row {
    min-height: 88px;
    flex-wrap: wrap;
    align-content: end;
    row-gap: var(--cds-spacing-03);
  }
  .board-page-header .page-header-copy,
  .board-page-header .page-header-actions {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .board-page-header .page-header-actions { justify-content: flex-start; }
  .board-layout,
  .content.board-narrow .board-layout {
    height: 100%;
  }
  .board-main,
  .content.board-narrow .board-main {
    flex-basis: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding: var(--cds-spacing-07) var(--cds-spacing-05) var(--cds-spacing-09);
  }
  .content[data-view="board"] .board-cal { display: none; }
  .content[data-view="timeline"] .tl-chart-head { flex-direction: column; gap: var(--cds-spacing-05); }
  .tl-chart-actions { align-self: stretch; justify-content: flex-end; margin: 0; }
  .tl-chart-meta { align-items: flex-start; flex-direction: column; }
}

/* Carbon sm: 4 columns and vertically stacked page controls. */
@media (max-width: 671px) {
  :root { --page-header-h: auto; }
  .topbar .search.search-trigger,
  .topbar .search.search-trigger:focus-within {
    min-width: 48px;
    width: 48px;
    padding: 0;
    justify-content: center;
  }
  .search-trigger-label,
  .search-trigger kbd { display: none; }
  .page-header {
    padding-top: var(--cds-spacing-05);
    padding-right: var(--cds-spacing-05);
    padding-bottom: var(--cds-spacing-05);
    padding-left: var(--cds-spacing-05);
  }
  .content:not([data-view="board"]) {
    padding: var(--cds-spacing-06) var(--cds-spacing-05) var(--cds-spacing-08);
  }
  .page-header-row { min-height: 0; row-gap: var(--cds-spacing-05); }
  .page-header h1 { font-size: 1.5rem; }
  .page-header-actions { justify-content: stretch; }
  .page-search { flex: 1 1 auto; width: auto; }
  .page-primary-action { flex: 0 0 auto; }
  .page-header.board-page-header { min-height: 0; }
  .page-header.board-page-header .page-header-row { min-height: 0; }
  .board-task-toolbar { flex-wrap: wrap; }
  .board-task-toolbar .page-search { min-width: 0; }
  .board-layout,
  .content.board-narrow .board-layout { height: auto; }
  .board-main,
  .content.board-narrow .board-main,
  .content.board-compact .board-main {
    padding: var(--cds-spacing-05) 0 var(--cds-spacing-07);
  }
  .task-list { gap: var(--cds-spacing-06); }
  .task-row { align-items: flex-start; flex-wrap: wrap; }
  .task-row-title { flex: 1 1 calc(100% - 176px); }
  .task-row-meta { order: 3; width: 100%; margin-left: 0; padding-left: 0; }
  .task-row-actions { margin-left: auto; opacity: 1; }
  .task-row-open,
  .task-quick-action,
  .task-menu,
  .task-check,
  .task-check.done { min-width: 44px; min-height: 44px; }
  .task-row-actions [data-action="project"],
  .task-row-actions [data-action="people"] { display: none; }
  .tl-empty-state { align-items: flex-start; flex-direction: column; }
  .content[data-view="timeline"] .plan-roadmap { border-right: 0; border-left: 0; }
  .content[data-view="timeline"] .tl-table-title { min-height: 0; align-items: flex-start; flex-direction: column; padding: var(--cds-spacing-05); }
  .tl-toolbar { flex-direction: column; }
  .tl-toolbar-summary { min-height: 40px; border-bottom: 1px solid var(--cds-border-subtle-00); }
  .tl-chart-actions { width: 100%; flex-wrap: wrap; justify-content: stretch; overflow: visible; }
  .tl-legend-compact {
    width: 100%;
    min-height: 32px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--cds-border-subtle-00);
  }
  .tl-today-control { min-width: 64px; border-left: 0; }
  .tl-chart-meta { align-items: flex-start; padding: var(--cds-spacing-04) var(--cds-spacing-05); }
  .tl-key-label { display: none; }
  .tl-legend { column-gap: var(--cds-spacing-04); row-gap: var(--cds-spacing-03); }
  .plan-roadmap .timeline-scroll { --tl-label-width: 248px; scroll-padding-left: var(--tl-label-width); }
  .plan-roadmap .tl-rowlabel-col,
  .plan-roadmap .tl-rowlabel { width: var(--tl-label-width); flex-basis: var(--tl-label-width); }
  .plan-roadmap .tl-project-label,
  .plan-roadmap .tl-project-button { grid-template-columns: minmax(0, 1fr) 64px; }
  .plan-roadmap .tl-project-label span:nth-child(2),
  .plan-roadmap .tl-health-cell { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  #modal-root *,
  #toast-root * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .task-skeleton span,
  .view-skeleton { animation: none; }
}

@media (forced-colors: active) {
  .task-status-shape { forced-color-adjust: none; border-color: currentColor; background: currentColor; }
  .task-status-neutral .task-status-shape { background: transparent; }
  .task-menu:focus-visible { outline-color: Highlight; }
  .tl-health-mark,
  .tl-key,
  .tl-range-track,
  .tl-range-progress,
  .tl-marker { forced-color-adjust: none; }
}

/* Native mobile shell -------------------------------------------------------
   The desktop information architecture stays intact; frequent destinations become thumb-reachable
   while the Carbon side navigation remains the complete workspace switcher. */
.mobile-nav { display: none; }
.nav-search {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin: var(--cds-spacing-03) var(--cds-spacing-05) var(--cds-spacing-04);
  padding-inline: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-strong-01);
  background: var(--cds-field-01);
  color: var(--cds-icon-secondary);
}
.nav-search:focus-within { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.nav-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cds-text-primary);
  font: inherit;
  font-size: var(--cds-body-compact-01-font-size, .875rem);
}
.connection-banner {
  position: fixed;
  z-index: 1200;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  right: 0;
  left: 0;
  min-height: 32px;
  box-sizing: border-box;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background: var(--cds-support-warning);
  color: #161616;
  font-size: var(--cds-label-01-font-size, .75rem);
  font-weight: 600;
  text-align: center;
}
.connection-banner[hidden] { display: none; }
.pf-offline .main { padding-top: 32px; }

@media (max-width: 860px) {
  :root { --mobile-nav-h: 64px; }
  .app-shell,
  .app-shell.sidebar-collapsed,
  .desktop-app .app-shell,
  .desktop-app .app-shell.sidebar-collapsed {
    grid-template-rows:
      calc(var(--topbar-h) + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    grid-template-areas: "header" "main" "mobile-nav";
  }
  .sidebar {
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    width: min(88vw, 360px);
  }
  .scrim { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
  .mobile-nav {
    grid-area: mobile-nav;
    z-index: 1100;
    display: block;
    border-top: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav > ul {
    height: var(--mobile-nav-h);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobile-nav li { min-width: 0; }
  .mobile-nav-item {
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--mobile-nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 var(--cds-spacing-02);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cds-icon-secondary);
    font: inherit;
    font-size: .6875rem;
    line-height: 1rem;
    touch-action: manipulation;
  }
  .mobile-nav-item:hover { background: var(--cds-layer-hover-01); color: var(--cds-icon-primary); }
  .mobile-nav-item.active { color: var(--cds-link-primary); font-weight: 600; }
  .mobile-nav-item.active::before {
    content: "";
    position: absolute;
    inset: 0 20% auto;
    height: 3px;
    background: var(--cds-interactive);
  }
  .mobile-nav-create {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
    font-weight: 600;
  }
  .mobile-nav-create:hover { background: var(--cds-interactive-hover); color: var(--cds-text-on-color); }
  .mobile-nav-item:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
  .nav-search { min-height: 48px; margin-top: var(--cds-spacing-04); }
  .main { min-height: 0; }
  .content { overscroll-behavior-y: contain; }
  .modal,
  .popover,
  .sidebar { overscroll-behavior: contain; }
}

@media (max-width: 671px) {
  .page-header {
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
  }
  .page-header-row { row-gap: var(--cds-spacing-03); }
  .page-header h1 {
    font-size: 1.25rem;
    line-height: 1.4;
    text-wrap: balance;
  }
  .page-header-actions { align-items: stretch; }
  .page-search,
  .page-primary-action { min-height: 44px; }
  .page-primary-action { min-width: 48px; }
  .task-list { gap: var(--cds-spacing-05); }
  .task-row {
    min-height: 64px;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) var(--cds-spacing-03) var(--cds-spacing-03) var(--cds-spacing-04);
  }
  .task-row-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .task-row-meta {
    order: initial;
    width: auto;
    max-width: 34%;
    margin-left: auto;
    padding-left: 0;
  }
  .task-row-actions { margin-left: 0; }
  .task-row > .task-check,
  .task-row > .task-check.done,
  .task-quick-action,
  .task-menu { min-width: 44px; min-height: 44px; }
  .tl-head { padding-inline: var(--cds-spacing-04); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item { transition: none; }
}

/* Assets and SOPs: Carbon tile workspaces. Base tiles group related information and actions on
   a flat layer; structured rows keep individual resources scannable without adding elevation. */
.content[data-view="assets"],
.content[data-view="sop"] {
  width: 100%;
  max-width: 1200px;
}

.assets-apps { margin: 0 0 var(--cds-spacing-09); }
.assets-section-heading,
.sop-region-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-05);
}
.assets-section-heading h2,
.sop-region-heading h2 {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading);
  font-weight: 400;
  line-height: var(--cds-type-heading-line);
}
.assets-section-heading p,
.sop-region-heading p,
.sop-location p {
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-copy);
  line-height: var(--cds-type-copy-line);
}
.assets-app-grid,
.asset-section-grid,
.sop-section-grid,
.sop-procedure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cds-spacing-05);
}
.asset-app-tile {
  min-height: 192px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--cds-spacing-05) var(--cds-spacing-05) 0;
  background: var(--cds-layer-01);
}
.asset-app-tile-top,
.sop-procedure-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cds-spacing-04);
}
.asset-app-icon,
.sop-tile-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--cds-layer-02);
  color: var(--cds-icon-primary);
}
.asset-app-icon .favicon { border-radius: 0; }
.asset-status,
.asset-access-tag,
.sop-public-tag {
  min-height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.asset-status-connected { color: var(--cds-support-success); }
.asset-status-connected::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.asset-app-name {
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading);
  font-weight: 400;
  line-height: var(--cds-type-heading-line);
}
.asset-app-description {
  flex: 1;
  margin: var(--cds-spacing-02) 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
}
.asset-app-open,
.sop-tile-open {
  width: calc(100% + (2 * var(--cds-spacing-05)));
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: flex-start;
  margin-left: calc(-1 * var(--cds-spacing-05));
  padding: 0 var(--cds-spacing-05);
  border: 0;
  border-top: 1px solid var(--cds-border-subtle-01);
  background: transparent;
  color: var(--cds-link-primary);
  cursor: pointer;
  font-size: var(--cds-type-body);
  text-align: left;
}
.asset-app-open:hover,
.sop-tile-open:hover { background: var(--cds-layer-hover-01); }
.asset-app-connect { color: var(--cds-text-secondary); }

.assets-library-heading { margin-top: 0; }
.asset-section-grid { align-items: start; }
.content[data-view="assets"] .vsec {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}
.content[data-view="assets"] .vsec-head {
  min-height: 88px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05);
}
.content[data-view="assets"] .vsec-sym {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cds-layer-02);
  color: var(--cds-icon-primary);
}
.content[data-view="assets"] .vsec-title { min-width: 0; }
.content[data-view="assets"] .vsec-name {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: var(--cds-type-body-line);
}
.content[data-view="assets"] .vsec-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.content[data-view="assets"] .vsec-actions {
  display: flex;
  gap: 0;
  opacity: 1;
}
.vsec-icon-action,
.sop-icon-action {
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
}
.content[data-view="assets"] .vsec-items {
  min-height: 80px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cds-border-subtle-01);
  list-style: none;
}
.content[data-view="assets"] .vitem {
  min-height: 64px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  border-top: 0;
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.content[data-view="assets"] .vitem:hover { background: var(--cds-layer-hover-01); }
.content[data-view="assets"] .vitem-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cds-icon-secondary);
}
.content[data-view="assets"] .vitem-title {
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: var(--cds-type-body-line);
}
.content[data-view="assets"] .vitem-sub {
  color: var(--cds-link-primary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.content[data-view="assets"] div.vitem-sub { color: var(--cds-text-secondary); }
.vitem-actions { display: flex; gap: 0; }
.vitem-actions .btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
.vsec-empty,
.sop-inline-empty {
  min-height: 96px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-01);
  color: var(--cds-icon-secondary);
}
.vsec-empty p,
.sop-inline-empty p {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
}
.vsec-empty span,
.sop-inline-empty span {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.content[data-view="assets"] .vsec-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  border-top: 0;
}
.content[data-view="assets"] .vsec-add .btn {
  min-height: 48px;
  justify-content: flex-start;
  border: 0;
  border-right: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  color: var(--cds-link-primary);
}
.content[data-view="assets"] .vsec-add .btn:last-child { border-right: 0; }
.content[data-view="assets"] .vsec-add .btn:hover { background: var(--cds-layer-hover-01); color: var(--cds-link-primary); }

.sop-workspace-head {
  min-height: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-07);
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-01);
}
.sop-location { min-width: 0; }
.sop-eyebrow,
.sop-tile-kicker {
  display: block;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
  letter-spacing: .32px;
  text-transform: uppercase;
}
.content[data-view="sop"] .docs-crumbs { min-height: 24px; margin: 0; }
.content[data-view="sop"] .crumb { min-height: 32px; }
.sop-region { margin-bottom: var(--cds-spacing-09); }
.content[data-view="sop"] .sop-section-tile,
.content[data-view="sop"] .sop-procedure-tile {
  min-width: 0;
  min-height: 224px;
  display: flex;
  flex-direction: column;
  padding: var(--cds-spacing-05) var(--cds-spacing-05) 0;
  overflow: visible;
  border: 0;
  border-top: 2px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
  cursor: default;
}
.content[data-view="sop"] .sop-section-tile:hover,
.content[data-view="sop"] .sop-procedure-tile:hover { box-shadow: none; }
.sop-tile-main { display: flex; flex: 1; flex-direction: column; }
.sop-tile-kicker { margin-top: var(--cds-spacing-05); }
.content[data-view="sop"] .doc-name {
  margin: var(--cds-spacing-02) 0 0;
  overflow: visible;
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading);
  font-weight: 400;
  line-height: var(--cds-type-heading-line);
  white-space: normal;
}
.sop-tile-description {
  flex: 1;
  margin: var(--cds-spacing-03) 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-body);
  line-height: var(--cds-type-body-line);
}
.content[data-view="sop"] .sop-tile-open { margin-top: auto; }
.sop-tile-actions {
  min-height: 48px;
  display: flex;
  align-items: stretch;
  margin: 0 calc(-1 * var(--cds-spacing-05));
  border-top: 1px solid var(--cds-border-subtle-01);
}
.sop-tile-actions .btn {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--cds-border-subtle-01);
}
.sop-procedure-top { align-items: center; }
.sop-public-tag { color: var(--cds-support-success); }
.content[data-view="sop"] .sop-procedure-tile .doc-name { margin-top: var(--cds-spacing-05); }
.content[data-view="sop"] .sop-procedure-tile .doc-meta {
  flex: 1;
  margin: var(--cds-spacing-02) 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: var(--cds-type-label-line);
}
.sop-inline-empty { min-height: 176px; border-top: 2px solid var(--cds-border-subtle-01); }
.sop-section-tile.dragging,
.sop-procedure-tile.dragging { opacity: .5; }
.sop-section-tile.drop-target { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

@media (max-width: 1055px) {
  .assets-app-grid,
  .asset-section-grid,
  .sop-section-grid,
  .sop-procedure-grid { grid-template-columns: 1fr; }
}

@media (max-width: 671px) {
  .assets-section-heading,
  .sop-workspace-head { align-items: stretch; flex-direction: column; }
  .assets-section-heading .btn,
  .sop-workspace-head .btn { width: 100%; justify-content: space-between; }
  .content[data-view="assets"] .vsec-head { grid-template-columns: 48px minmax(0, 1fr); }
  .content[data-view="assets"] .vsec-actions { grid-column: 1 / -1; }
  .content[data-view="assets"] .vitem { grid-template-columns: 32px minmax(0, 1fr); }
  .vitem-actions { grid-column: 2; }
  .content[data-view="assets"] .vsec-add { grid-template-columns: 1fr; }
  .content[data-view="assets"] .vsec-add .btn { border-right: 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
  .sop-tile-actions { flex-wrap: wrap; }
}

/* Calendar event blocks ----------------------------------------------------
   Compact, information-first tiles following Carbon layer, border, type and focus roles.
   Default cards and pointer selection stay neutral; Carbon blue is reserved for keyboard focus. */
.cal2-event,
.cal2-event.task,
.cal2-event.meeting {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--cds-spacing-02) 36px var(--cds-spacing-02) var(--cds-spacing-03);
  overflow: hidden;
  border: 1px solid var(--cds-border-strong-01);
  border-radius: 2px;
  /* Carbon's accent layer is the neutral surface intended to distinguish contained
     content from layer-01 without turning it into a primary/action-colored object. */
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  color: var(--cds-text-primary);
  box-shadow: none;
  cursor: pointer;
}
.cal2-event.meeting {
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  color: var(--cds-text-primary);
}
.cal2-event:hover,
.cal2-event.meeting:hover {
  /* Keep pointer hover spatially stable. The action affordance is enough feedback; changing
     the whole tile surface caused a gray/white flash as focus and selection followed. */
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  border-color: var(--cds-border-strong-01);
  box-shadow: none;
}
.cal2-event:focus { outline: none; }
.cal2-event:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}
.cal2-event.selected {
  outline: 0;
  border-color: var(--cds-border-strong-01);
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  box-shadow: none;
}
.cal2-event.dragging {
  outline: 2px solid var(--cds-focus);
  outline-offset: 0;
  box-shadow: var(--cds-shadow, 0 4px 8px rgba(0, 0, 0, .16));
  opacity: .88;
}
.cal2-event.pending { opacity: .62; }
.cal2-event.done { border-left-color: var(--cds-border-subtle-01) !important; }
.cal2-event.task {
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  border-color: var(--cds-border-strong-01);
}
.cal2-event.task:hover {
  background: var(--cds-layer-accent-01, var(--cds-layer-02));
  border-color: var(--cds-border-strong-01);
}

.cal2-event .ce-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body);
  font-weight: 600;
  line-height: var(--cds-type-body-line);
}
.cal2-event .ce-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal2-event .ce-time {
  margin-left: 28px;
  overflow: hidden;
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  font-weight: 400;
  line-height: var(--cds-type-label-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal2-event.meeting .ce-time,
.cal2-event.meeting .ce-title { color: var(--cds-text-primary); }

.cal2-event .ce-kind {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cds-icon-secondary);
}
.cal2-event button.ce-check {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-icon-primary);
  box-shadow: none;
}
.cal2-event button.ce-check::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cal2-event button.ce-check:hover { background: var(--cds-background-hover); }
.cal2-event button.ce-check:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.cal2-event button.ce-check.on {
  background: transparent;
  color: var(--cds-support-success);
  box-shadow: none;
}
.cal2-event button.ce-check.on::before { background: var(--cds-support-success); border-color: var(--cds-support-success); }
.cal2-event .ce-check-mark { position: relative; z-index: 1; color: var(--cds-text-on-color); font-size: 11px; line-height: 1; }
.cal2-event.done .ce-name { color: var(--cds-text-secondary); text-decoration: line-through; }

.cal2-event .ce-actions {
  position: absolute;
  z-index: 4;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-icon-secondary);
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.cal2-event:hover .ce-actions,
.cal2-event:focus-within .ce-actions,
.cal2-event.selected .ce-actions {
  opacity: 1;
  visibility: visible;
}
.cal2-event .ce-actions:hover { background: var(--cds-layer-hover-02, var(--cds-background-hover)); color: var(--cds-icon-primary); }
.cal2-event .ce-actions:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

.cal2-event.compact { padding: 0 26px 0 var(--cds-spacing-02); }
.cal2-event.compact .ce-title { height: 100%; gap: var(--cds-spacing-01); font-size: var(--cds-type-label); line-height: 16px; }
.cal2-event.compact .ce-time,
.cal2-event.compact .ce-kind { display: none; }
.cal2-event.compact .ce-actions { top: 0; right: 0; width: 24px; height: 100%; min-height: 16px; }
.cal2-event.medium { padding-block: var(--cds-spacing-01); }
.cal2-event.medium .ce-time { display: none; }
.cal2-event.medium .ce-title { height: 100%; }
.cal2-event.roomy .ce-title { min-height: 24px; }

.cal2-event.editable .ce-handle { opacity: 0; }
.cal2-event.editable:hover .ce-handle,
.cal2-event.editable:focus-within .ce-handle,
.cal2-event.editable.selected .ce-handle { opacity: 1; }

@media (forced-colors: active) {
  .cal2-event,
  .cal2-event.task,
  .cal2-event.meeting { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .cal2-event:focus-visible,
  .cal2-event.selected { outline-color: Highlight; }
}

@media (forced-colors: active) {
  .carbon-icon-tooltip::after { border: 1px solid CanvasText; }
  .task-menu:focus-visible { outline-color: Highlight; }
  .asset-app-tile,
  .content[data-view="assets"] .vsec,
  .content[data-view="sop"] .sop-section-tile,
  .content[data-view="sop"] .sop-procedure-tile { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .carbon-icon-tooltip::after,
  .cal2-event .ce-actions { transition: none; }
}

/* Stability pass: cached route panels keep their DOM while detached. The active panel fills the
   same geometry as the previous direct view content, so Carbon Grid sizing remains unchanged. */
.view-panel { min-width: 0; min-height: 100%; }
.content[data-view="board"] > .view-panel { height: 100%; }
.timeline-scroll.tl-positioning { visibility: hidden; }

/* Reserve the persistent shell before session data arrives. These non-animated Carbon-layer
   skeletons prevent the header, navigation and page body from shifting during startup. */
.boot-shell {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "boot-header boot-header" "boot-nav boot-main";
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--cds-background);
}
.boot-topbar {
  grid-area: boot-header;
  display: flex;
  align-items: center;
  padding-inline: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-background-inverse);
  color: var(--cds-text-on-color);
}
.boot-brand { font-size: 14px; font-weight: 600; }
.boot-sidebar {
  grid-area: boot-nav;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-03);
  border-right: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.boot-main { grid-area: boot-main; min-width: 0; overflow: hidden; }
.boot-content { padding-block-start: var(--cds-spacing-07); }
.boot-line, .boot-row, .boot-divider { display: block; background: var(--cds-skeleton-background); }
.boot-line-nav { width: 72%; height: 32px; }
.boot-line-label { width: 34%; height: 14px; margin-top: var(--cds-spacing-03); }
.boot-line-title { width: 180px; height: 32px; margin: var(--cds-spacing-06) var(--cds-spacing-07); }
.boot-line-section { width: 112px; height: 18px; margin-bottom: var(--cds-spacing-05); }
.boot-divider { width: 100%; height: 1px; margin-block: var(--cds-spacing-02); background: var(--cds-border-subtle-01); }
.boot-row { height: 48px; border-top: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
@media (max-width: 860px) {
  .boot-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "boot-header" "boot-main"; }
  .boot-sidebar { display: none; }
  .boot-line-title { margin-inline: var(--cds-spacing-05); }
}
/* --------------------------------------------------------------------------
   Timesheets — one clock action for staff, one payroll table for super admin.
   -------------------------------------------------------------------------- */
.content[data-view="timesheets"] { padding-bottom: var(--cds-spacing-09); }
.timesheet-loading,
.timesheet-error {
  min-height: 96px;
  padding: var(--cds-spacing-07);
  color: var(--cds-text-secondary);
}
.timesheet-clock-grid,
.timesheet-admin-controls,
.timesheet-history,
.timesheet-report,
.timesheet-payouts { padding-inline: var(--cds-spacing-06); }
.timesheet-clock-grid > .cds--row,
.timesheet-admin-controls > .cds--row,
.timesheet-history > .cds--row,
.timesheet-report > .cds--row,
.timesheet-payouts > .cds--row { row-gap: var(--cds-spacing-07); }
.timesheet-clock-grid {
  padding-block: var(--cds-spacing-07) var(--cds-spacing-09);
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.timesheet-kicker,
.timesheet-admin-controls label {
  display: block;
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
  line-height: 1rem;
}
.timesheet-date {
  display: block;
  margin-bottom: var(--cds-spacing-06);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-heading-03);
  line-height: 1.4;
}
.timesheet-clock { display: flex; align-items: baseline; gap: var(--cds-spacing-04); }
.timesheet-clock-value {
  color: var(--cds-text-primary);
  font-size: clamp(2.625rem, 6vw, 4.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}
.timesheet-clock-state,
.timesheet-user-email {
  color: var(--cds-text-secondary);
  font-size: var(--cds-type-label);
}
.timesheet-action-column { display: flex; justify-content: flex-end; align-items: flex-end; }
.timesheet-clock-action { width: min(100%, 240px); min-height: 64px; justify-content: flex-start; }
.timesheet-clock-action.is-active { background: var(--cds-button-danger-primary); }
.timesheet-history,
.timesheet-report,
.timesheet-payouts { padding-top: var(--cds-spacing-08); }
.timesheet-history h2,
.timesheet-report h2,
.timesheet-payouts h2 {
  margin-bottom: var(--cds-spacing-05);
  font-size: var(--cds-type-heading-compact-02);
  line-height: 1.375rem;
}
.timesheet-table-wrap { overflow-x: auto; border-top: 1px solid var(--cds-border-strong-01); }
.timesheet-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.timesheet-table th,
.timesheet-table td {
  padding: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  text-align: left;
  vertical-align: top;
}
.timesheet-table th {
  height: 48px;
  background: var(--cds-layer-accent-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-label);
  font-weight: 600;
}
.timesheet-table td {
  min-height: 48px;
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-size: var(--cds-type-body-compact);
  line-height: 1.25rem;
}
.timesheet-table tbody tr:hover td { background: var(--cds-layer-hover-01); }
.timesheet-row-action { width: 96px; text-align: right !important; }
.timesheet-edit,
.timesheet-done { min-width: 80px; }
.timesheet-edited { color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.timesheet-paid { color: var(--cds-support-success); font-size: var(--cds-type-label); }
.timesheet-admin-controls { padding-block: var(--cds-spacing-07); border-bottom: 1px solid var(--cds-border-subtle-00); }
.timesheet-payout-date { min-height: 48px; }
.focus-report {
  padding: var(--cds-spacing-07) var(--cds-spacing-06) var(--cds-spacing-08);
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.focus-report-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--cds-spacing-05); }
.focus-report-heading h2 { margin-top: var(--cds-spacing-02); }
.focus-period { display: inline-flex; }
.focus-period .btn { min-width: 72px; border-bottom: 2px solid transparent; }
.focus-period .btn.is-active { border-bottom-color: var(--cds-border-interactive); color: var(--cds-text-primary); }
.focus-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05); padding-block: var(--cds-spacing-07); color: var(--cds-text-secondary); }
.focus-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--cds-spacing-07); border-top: 1px solid var(--cds-border-strong-01); }
.focus-metrics > div { min-height: 112px; padding: var(--cds-spacing-05); background: var(--cds-layer-01); border-right: 1px solid var(--cds-border-subtle-01); }
.focus-metrics dt { color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.focus-metrics dd { margin-top: var(--cds-spacing-04); font-size: 2rem; font-weight: 300; line-height: 1; }
.focus-figure { margin-top: var(--cds-spacing-07); }
.focus-chart { height: 176px; display: grid; grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-strong-01); }
.focus-chart-day { min-width: 0; display: grid; grid-template-rows: 1fr 28px; gap: var(--cds-spacing-02); text-align: center; }
.focus-chart-bars { display: flex; align-items: end; justify-content: center; gap: 4px; min-height: 0; }
.focus-bar { width: min(22px, 38%); min-height: 2px; }
.focus-bar.is-planned { background: var(--cds-border-strong-01); }
.focus-bar.is-tracked { background: var(--cds-support-info); }
.focus-chart time { color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.focus-figure figcaption { display: flex; gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-03); color: var(--cds-text-secondary); font-size: var(--cds-type-label); }
.focus-key::before { display: inline-block; width: 10px; height: 10px; margin-right: var(--cds-spacing-02); content: ''; }
.focus-key.is-planned::before { background: var(--cds-border-strong-01); }
.focus-key.is-tracked::before { background: var(--cds-support-info); }
.focus-table-wrap { margin-top: var(--cds-spacing-07); }
.focus-user-table { min-width: 1080px; }
.focus-output-cell { min-width: 260px; }
.focus-output-cell li { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.timesheet-admin-table td:first-child { min-width: 270px; }
.timesheet-user-email { display: block; margin-top: 2px; }
.timesheet-admin-sessions { margin-top: var(--cds-spacing-04); }
.timesheet-admin-sessions li { color: var(--cds-text-secondary); font-size: var(--cds-type-label); line-height: 1.25rem; }
.timesheet-rate { width: 112px; min-height: 40px; }
.timesheet-pay-cell { font-weight: 600; }
.timesheet-edit-grid { padding: 0; }
.timesheet-edit-grid > .cds--row { row-gap: var(--cds-spacing-05); }
.timesheet-edit-modal .field { gap: var(--cds-spacing-03); }
.timesheet-edit-modal .input { min-height: 48px; }

@media (max-width: 671px) {
  .timesheet-clock-grid,
  .timesheet-admin-controls,
  .timesheet-history,
  .timesheet-report,
  .timesheet-payouts { padding-inline: var(--cds-spacing-05); }
  .timesheet-action-column { justify-content: stretch; }
  .timesheet-clock-action { width: 100%; max-width: none; }
  .timesheet-clock { align-items: flex-start; flex-direction: column; }
  .focus-report { padding-inline: var(--cds-spacing-05); }
  .focus-report-heading, .focus-empty { align-items: flex-start; flex-direction: column; }
  .focus-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-chart { gap: var(--cds-spacing-03); }
}