:root {
  --suite-canvas: #f1f3f1;
  --suite-surface: #ffffff;
  --suite-surface-2: #f7f8f6;
  --suite-ink: #1b211e;
  --suite-muted: #66706b;
  --suite-line: #d8ddd9;
  --suite-line-strong: #aeb7b1;
  --suite-nav: #202521;
  --suite-nav-hover: #303730;
  --suite-safety: #f2c14f;
  --suite-safety-dark: #7c5a0a;
  --suite-accent: #0c747a;
  --suite-accent-dark: #07585d;
  --suite-accent-soft: #e7f4f3;
  --suite-success: #247354;
  --suite-warning: #a56612;
  --suite-danger: #b13b2e;
  --suite-blue: #2f6790;
  --suite-shadow: 0 8px 24px rgba(27, 33, 30, 0.07);
  --suite-radius: 6px;
}

body[data-app] {
  --bg: var(--suite-canvas);
  --paper: var(--suite-canvas);
  --panel: var(--suite-surface);
  --panel-strong: var(--suite-surface-2);
  --panel-soft: var(--suite-surface-2);
  --field: #ffffff;
  --ink: var(--suite-ink);
  --muted: var(--suite-muted);
  --line: var(--suite-line);
  --line-strong: var(--suite-line-strong);
  --nav: var(--suite-nav);
  --nav-2: var(--suite-nav);
  --nav-soft: var(--suite-nav-hover);
  --accent: var(--suite-accent);
  --accent-dark: var(--suite-accent-dark);
  --accent-strong: var(--suite-accent-dark);
  --accent-soft: var(--suite-accent-soft);
  --brand: var(--suite-accent);
  --brand-dark: var(--suite-accent-dark);
  --green: var(--suite-success);
  --green-dark: #18543c;
  --amber: var(--suite-warning);
  --red: var(--suite-danger);
  --blue: var(--suite-blue);
  --shadow: var(--suite-shadow);
  --shadow-soft: 0 3px 12px rgba(27, 33, 30, 0.05);
  --radius: var(--suite-radius);
  min-width: 320px;
  background: var(--suite-canvas);
  color: var(--suite-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body[data-app="loto"] {
  --suite-accent: #a94b2b;
  --suite-accent-dark: #7d341d;
  --suite-accent-soft: #faece7;
}

body[data-app="constraints"] {
  --suite-accent: #9a6718;
  --suite-accent-dark: #70480d;
  --suite-accent-soft: #f8f0df;
}

body[data-app="fte"] {
  --suite-accent: #216c61;
  --suite-accent-dark: #174e46;
  --suite-accent-soft: #e8f3f0;
}

body[data-app] * {
  scrollbar-color: #aab2ac transparent;
  scrollbar-width: thin;
}

body[data-app] ::selection {
  background: var(--suite-safety);
  color: var(--suite-ink);
}

body[data-app] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-app] .manager-only {
  display: none !important;
}

body[data-app] .mfa-control {
  display: grid;
  gap: 12px;
  padding-block: 15px;
  border-block: 1px solid var(--suite-line);
}

body[data-app] .mfa-control .context-line,
body[data-app] .mfa-control p {
  margin: 0;
}

body[data-app] .mfa-setup,
body[data-app] .mfa-disable {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-left: 3px solid var(--suite-safety);
  background: var(--suite-surface-2);
}

body[data-app] .mfa-setup[hidden],
body[data-app] .mfa-disable[hidden] {
  display: none;
}

body[data-app] .mfa-setup p {
  grid-column: 1 / -1;
  color: var(--suite-muted);
  font-size: 0.78rem;
}

body[data-app] .mfa-setup code {
  display: block;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--suite-line-strong);
  background: #ffffff;
  color: var(--suite-ink);
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  user-select: all;
}

body[data-app] .mfa-setup label,
body[data-app] .mfa-disable label {
  display: grid;
  gap: 6px;
}

body[data-app].is-manager .manager-only,
body[data-app].is-admin .manager-only {
  display: block !important;
}

body[data-app].is-manager th.manager-only,
body[data-app].is-manager td.manager-only,
body[data-app].is-admin th.manager-only,
body[data-app].is-admin td.manager-only {
  display: table-cell !important;
}

body[data-app] .app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
}

body[data-app] .sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: auto;
  height: 100vh;
  padding: 20px 14px;
  overflow-y: auto;
  border-right: 1px solid #343a35;
  background: var(--suite-nav);
  box-shadow: none;
}

body[data-app] .brand,
body[data-app] .brand-block {
  gap: 11px;
  padding: 4px 4px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body[data-app] .brand-mark,
body[data-app] .empty-icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid #d3a62f;
  border-radius: 4px;
  background: var(--suite-safety);
  color: #26200f;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-app] .brand strong,
body[data-app] .brand-block strong {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
}

body[data-app] .brand span,
body[data-app] .brand-block span:not(.brand-mark) {
  color: #abb5ae;
}

body[data-app] .nav-list {
  display: grid;
  margin-left: 0;
  flex-wrap: nowrap;
  gap: 4px;
}

body[data-app] .nav-link {
  min-height: 42px;
  padding: 9px 11px;
  border: 0;
  border-radius: 4px;
  color: #c9d0cb;
  font-size: 0.88rem;
  font-weight: 700;
}

body[data-app] .nav-link:hover,
body[data-app] .nav-link.active {
  border-color: transparent;
  background: var(--suite-nav-hover);
  color: #ffffff;
  box-shadow: inset 3px 0 0 var(--suite-safety);
}

body[data-app] .suite-switcher {
  display: grid;
  gap: 8px;
  padding: 13px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body[data-app] .suite-switcher-label {
  color: #919c95;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-app] .suite-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body[data-app] .suite-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 35px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  color: #c9d0cb;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}

body[data-app] .suite-link:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: var(--suite-nav-hover);
  color: #ffffff;
}

body[data-app] .suite-link.current {
  border-color: rgba(242, 193, 79, 0.72);
  background: rgba(242, 193, 79, 0.09);
  color: #ffffff;
  box-shadow: inset 2px 0 0 var(--suite-safety);
}

body[data-app] .suite-site-code {
  display: grid;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 3px;
  background: #3b433d;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
}

body[data-app] .suite-link.current .suite-site-code {
  background: var(--suite-safety);
  color: #26200f;
}

body[data-app] .suite-mobile-select {
  display: none;
}

body[data-app] .sidebar-status,
body[data-app] .sidebar-footer {
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-app] .workspace,
body[data-app] .main-content {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 22px 26px 44px;
}

body[data-app] .workspace {
  gap: 18px;
}

body[data-app] .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  margin: -22px -26px 2px;
  padding: 16px 26px 14px;
  border-bottom: 1px solid var(--suite-line);
  background: #f1f3f1;
}

body[data-app] .topbar h1,
body[data-app] .section-heading h1,
body[data-app] .section-heading h2 {
  color: var(--suite-ink);
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: 0;
}

body[data-app] .context-line {
  margin-top: 5px;
  color: var(--suite-muted);
  font-size: 0.9rem;
}

body[data-app] .eyebrow {
  margin-bottom: 4px;
  color: var(--suite-accent-dark);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-app] .panel,
body[data-app] .filters-panel,
body[data-app] .control-strip,
body[data-app] .form-section,
body[data-app] .metric-card,
body[data-app] .metric-grid > *,
body[data-app] .auth-card {
  border: 1px solid var(--suite-line);
  border-radius: var(--suite-radius);
  background: var(--suite-surface);
  box-shadow: var(--suite-shadow);
}

body[data-app] .panel,
body[data-app] .form-section {
  padding: 20px;
}

body[data-app] .panel-header,
body[data-app] .section-heading {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--suite-line);
}

body[data-app] .panel-header h2,
body[data-app] .form-section h2 {
  font-size: 1.08rem;
  font-weight: 850;
}

body[data-app] .metrics-grid,
body[data-app] .metric-grid {
  gap: 10px;
}

body[data-app] .metric-card,
body[data-app] .metric-grid > * {
  min-height: 104px;
  padding: 16px;
  border-top: 3px solid var(--suite-accent);
  box-shadow: none;
}

body[data-app] .metric-card strong,
body[data-app] .metric-grid strong {
  font-variant-numeric: tabular-nums;
}

body[data-app] input,
body[data-app] select,
body[data-app] textarea {
  min-height: 43px;
  border: 1px solid var(--suite-line-strong);
  border-radius: 4px;
  background: #ffffff;
  color: var(--suite-ink);
  box-shadow: none;
}

body[data-app] textarea {
  min-height: 90px;
  line-height: 1.45;
  resize: vertical;
}

body[data-app] input:hover,
body[data-app] select:hover,
body[data-app] textarea:hover {
  border-color: #87928b;
}

body[data-app] input:focus,
body[data-app] select:focus,
body[data-app] textarea:focus {
  border-color: var(--suite-accent);
  outline: 3px solid color-mix(in srgb, var(--suite-accent) 17%, transparent);
  outline-offset: 0;
}

body[data-app] button,
body[data-app] .primary-button,
body[data-app] .secondary-button,
body[data-app] .icon-button,
body[data-app] .table-action {
  min-height: 40px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-app] .primary-button {
  border: 1px solid var(--suite-accent-dark);
  background: var(--suite-accent);
  color: #ffffff;
  box-shadow: none;
}

body[data-app] .primary-button:hover {
  background: var(--suite-accent-dark);
}

body[data-app] .secondary-button,
body[data-app] .icon-button,
body[data-app] .table-action {
  border: 1px solid var(--suite-line-strong);
  background: #ffffff;
  color: var(--suite-ink);
  box-shadow: none;
}

body[data-app] .secondary-button:hover,
body[data-app] .icon-button:hover,
body[data-app] .table-action:hover {
  border-color: #87928b;
  background: var(--suite-surface-2);
}

body[data-app] button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body[data-app] .pill,
body[data-app] .count-pill,
body[data-app] .status-pill {
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  background: var(--suite-surface-2);
  color: var(--suite-ink);
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-app] .table-wrap {
  border: 1px solid var(--suite-line);
  border-radius: 4px;
  background: #ffffff;
}

body[data-app] table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

body[data-app] thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  border-bottom: 1px solid var(--suite-line-strong);
  background: #ecefec;
  color: #4f5953;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-app] tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #e8ebe8;
  vertical-align: middle;
}

body[data-app] tbody tr:last-child td {
  border-bottom: 0;
}

body[data-app] tbody tr:hover td {
  background: #fafbf9;
}

body[data-app] .filters-panel,
body[data-app] .control-strip,
body[data-app] .filter-bar {
  gap: 10px;
  padding: 12px;
  box-shadow: none;
}

body[data-app] .auth-screen {
  background: var(--suite-nav) !important;
}

body[data-app] .auth-card {
  gap: 15px;
  width: min(420px, 100%);
  padding: 26px;
  border-top: 4px solid var(--suite-safety);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body[data-app] .auth-card h1 {
  font-size: 1.75rem;
}

body[data-app] .form-notice[data-tone="success"] {
  border-color: #a8d1c0;
  background: #edf7f2;
  color: #18543c;
}

body[data-app] .form-notice[data-tone="error"] {
  border-color: #e2b1aa;
  background: #fff0ed;
  color: #8d2c21;
}

body[data-app] .empty-state,
body[data-app] .directory-empty {
  color: var(--suite-muted);
}

body[data-app] .equipment-directory {
  display: grid;
  gap: 16px;
}

body[data-app] .index-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 2px solid var(--suite-line);
}

body[data-app] .index-tab {
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--suite-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

body[data-app] .index-tab:hover {
  background: var(--suite-surface-2);
  color: var(--suite-ink);
}

body[data-app] .index-tab.active {
  border-bottom-color: var(--suite-accent);
  color: var(--suite-ink);
}

body[data-app] .index-panel {
  display: grid;
  gap: 15px;
}

body[data-app] .index-panel[hidden] {
  display: none;
}

body[data-app] .index-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body[data-app] .index-panel-heading h3 {
  margin: 0;
  color: var(--suite-ink);
  font-size: 1.08rem;
}

body[data-app] .directory-header {
  margin-bottom: 0;
}

body[data-app] .directory-header .context-line {
  max-width: 760px;
}

body[data-app] .directory-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-app] .directory-metrics > div {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-left: 3px solid var(--suite-accent);
  background: var(--suite-surface-2);
}

body[data-app] .directory-metrics span {
  color: var(--suite-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-app] .directory-metrics strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

body[data-app] .directory-editor {
  display: grid;
  gap: 14px;
  padding: 17px;
  border: 1px solid #c7d1cb;
  border-left: 4px solid var(--suite-safety);
  background: #fbfcfa;
}

body[data-app] .reference-editor .wide {
  grid-column: 1 / -1;
}

body[data-app] .reference-editor textarea {
  min-height: 74px;
  resize: vertical;
}

body[data-app] .directory-editor-heading,
body[data-app] .directory-toolbar,
body[data-app] .directory-pagination,
body[data-app] .pagination-actions,
body[data-app] .directory-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-app] .directory-editor-heading,
body[data-app] .directory-pagination {
  justify-content: space-between;
}

body[data-app] .directory-editor-heading h3 {
  margin: 0;
  font-size: 1rem;
}

body[data-app] .directory-editor-heading .icon-button {
  font-size: 1.45rem;
  line-height: 1;
}

body[data-app] .directory-form-grid {
  grid-template-columns: 1.3fr 0.8fr 1fr 0.65fr;
}

body[data-app] .directory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.35fr) minmax(170px, 0.4fr);
  padding: 12px;
  border: 1px solid var(--suite-line);
  background: var(--suite-surface-2);
}

body[data-app] .directory-table-wrap {
  max-height: 620px;
  overflow: auto;
}

body[data-app] .directory-table {
  min-width: 760px;
  width: 100%;
}

body[data-app] .reference-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #c9d2cc;
  background: #f3f6f4;
  color: #4d5b53;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

body[data-app] .reference-state.custom {
  border-color: #8eb9aa;
  background: #eaf4ef;
  color: #18543c;
}

body[data-app] .reference-summary-cell {
  max-width: 420px;
  color: var(--suite-muted);
  line-height: 1.45;
  white-space: normal;
}

body[data-app] .directory-actions {
  justify-content: flex-end;
  white-space: nowrap;
}

body[data-app] .directory-actions .icon-button {
  width: 36px;
  min-height: 34px;
}

body[data-app] .directory-actions .icon-button.confirming {
  width: auto;
  gap: 5px;
  padding-inline: 9px;
  border-color: #8e2e24;
  background: var(--suite-danger);
  color: #ffffff;
}

body[data-app] .directory-actions .table-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 9px;
}

body[data-app] .danger-button {
  color: var(--suite-danger);
}

body[data-app] .directory-empty {
  display: grid;
  gap: 4px;
  padding: 24px;
  text-align: center;
}

body[data-app] .directory-pagination {
  color: var(--suite-muted);
  font-size: 0.82rem;
}

body[data-app] .lifecycle-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--suite-line);
  background: var(--suite-surface-2);
}

body[data-app] .lifecycle-picker label {
  display: grid;
  gap: 6px;
  color: var(--suite-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-app] .lifecycle-selected-summary {
  min-height: 112px;
  border-block: 1px solid var(--suite-line);
  background: #fbfcfb;
}

body[data-app] .readiness-summary {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 17px;
}

body[data-app] .readiness-summary h3 {
  margin: 2px 0 9px;
  font-size: 1.05rem;
}

body[data-app] .readiness-score {
  position: relative;
  display: grid;
  width: 86px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--suite-success) var(--readiness), #dce2de 0);
  color: var(--suite-ink);
  text-align: center;
}

body[data-app] .readiness-score::after {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
}

body[data-app] .readiness-score strong,
body[data-app] .readiness-score span {
  position: relative;
  z-index: 1;
}

body[data-app] .readiness-score strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

body[data-app] .readiness-score span {
  color: var(--suite-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

body[data-app] .readiness-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-app] .readiness-checks > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--suite-line);
  background: #ffffff;
  color: var(--suite-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

body[data-app] .readiness-checks svg {
  width: 14px;
  height: 14px;
}

body[data-app] .readiness-checks .pass {
  border-color: #b5d1c2;
  color: var(--suite-success);
}

body[data-app] .readiness-checks .fail {
  border-color: #e3bbb6;
  color: var(--suite-danger);
}

body[data-app] .lifecycle-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--suite-line);
}

body[data-app] .lifecycle-facts > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 14px;
  border-right: 1px solid var(--suite-line);
  overflow-wrap: anywhere;
}

body[data-app] .lifecycle-facts > span:last-child {
  border-right: 0;
}

body[data-app] .lifecycle-facts strong {
  color: var(--suite-muted);
  font-size: 0.67rem;
  text-transform: uppercase;
}

body[data-app] .lifecycle-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.65fr);
  align-items: start;
  gap: 14px;
}

body[data-app] .lifecycle-profile-editor,
body[data-app] .compact-editor {
  min-width: 0;
}

body[data-app] .lifecycle-side-column {
  display: grid;
  gap: 14px;
}

body[data-app] .lifecycle-band {
  display: grid;
  gap: 13px;
  padding-block: 14px;
  border-block: 1px solid var(--suite-line);
}

body[data-app] .band-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-app] .band-heading h3 {
  margin: 0;
  font-size: 1rem;
}

body[data-app] .equipment-qr-layout {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

body[data-app] .equipment-qr-layout p {
  margin: 0;
  color: var(--suite-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

body[data-app] .equipment-qr-code {
  display: grid;
  width: 116px;
  aspect-ratio: 1;
  place-items: center;
  padding: 7px;
  border: 1px solid var(--suite-line-strong);
  background: #ffffff;
}

body[data-app] .equipment-qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-app] .qr-unavailable {
  color: var(--suite-muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

body[data-app] .lifecycle-app-links {
  display: grid;
  gap: 7px;
}

body[data-app] .lifecycle-app-link {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 9px;
  min-width: 0;
  padding: 9px 10px;
  border-left: 3px solid var(--suite-accent);
  background: var(--suite-surface-2);
  color: var(--suite-ink);
  text-decoration: none;
}

body[data-app] .lifecycle-app-link:hover {
  background: var(--suite-accent-soft);
}

body[data-app] .lifecycle-app-link > span {
  grid-row: 1 / 3;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-app] .lifecycle-app-link strong,
body[data-app] .lifecycle-app-link small {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-app] .lifecycle-app-link strong {
  font-size: 0.8rem;
}

body[data-app] .lifecycle-app-link small {
  color: var(--suite-muted);
  font-size: 0.68rem;
}

body[data-app] .power-path-view {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-app] .power-path-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--suite-line);
  background: #ffffff;
}

body[data-app] .power-path-row button:not(.icon-button) {
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #b9c9c2;
  background: #f3f7f5;
  color: var(--suite-accent-dark);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: pointer;
}

body[data-app] .path-source {
  min-width: 62px;
  color: var(--suite-muted);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-app] .path-arrow {
  color: var(--suite-muted);
  font-weight: 900;
}

body[data-app] .power-path-row small {
  margin-left: auto;
  color: var(--suite-muted);
  font-size: 0.68rem;
}

body[data-app] .path-actions {
  display: inline-flex;
  gap: 4px;
}

body[data-app] .lifecycle-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-app] .inspection-metrics,
body[data-app] .quality-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body[data-app] .quality-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-app] .inspection-metrics > div,
body[data-app] .quality-metrics > div {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-left: 3px solid var(--suite-accent);
  background: var(--suite-surface-2);
}

body[data-app] .inspection-metrics span,
body[data-app] .quality-metrics span {
  color: var(--suite-muted);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-app] .inspection-metrics strong,
body[data-app] .quality-metrics strong {
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
}

body[data-app] .signature-control {
  display: grid;
  gap: 7px;
}

body[data-app] .signature-control > span {
  color: var(--suite-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

body[data-app] .signature-pad {
  display: block;
  width: 100%;
  height: 180px;
  border: 1px solid var(--suite-line-strong);
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, transparent 72%, #cbd3ce 72%, #cbd3ce calc(72% + 1px), transparent calc(72% + 1px));
  touch-action: none;
}

body[data-app] .signature-control .secondary-button {
  justify-self: start;
}

body[data-app] .quality-severity {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid var(--suite-line);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-app] .quality-severity.critical {
  border-color: #d8a29c;
  background: #f9e8e6;
  color: #8e2e24;
}

body[data-app] .quality-severity.warning {
  border-color: #ddc18c;
  background: #fbf2de;
  color: #7c540f;
}

body[data-app] .quality-severity.info {
  border-color: #a9c4d6;
  background: #eaf2f7;
  color: #275775;
}

body[data-app] .lifecycle-audit {
  display: grid;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--suite-line);
}

body[data-app] .audit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--suite-line);
}

body[data-app] .audit-item > div,
body[data-app] .audit-item p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

body[data-app] .audit-item span,
body[data-app] .audit-item small,
body[data-app] .audit-item p {
  color: var(--suite-muted);
  font-size: 0.72rem;
}

body[data-app] .audit-item p {
  grid-column: 1 / -1;
}

body[data-app] .lifecycle-public-block .readiness-summary {
  padding-inline: 0;
}

body[data-app] .reference-info-block .lifecycle-facts {
  margin-top: 10px;
  border: 1px solid var(--suite-line);
}

body[data-app] .inspection-public-list,
body[data-app] .revision-public-list {
  display: grid;
  gap: 0;
}

body[data-app] .inspection-public-list article,
body[data-app] .revision-public-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--suite-line);
  font-size: 0.8rem;
}

body[data-app] .inspection-public-list span,
body[data-app] .inspection-public-list small,
body[data-app] .revision-public-list span,
body[data-app] .revision-public-list small {
  color: var(--suite-muted);
}

body[data-app] .equipment-qr-public {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 18px;
}

body[data-app] .equipment-qr-print-sheet {
  display: none;
}

body[data-app] .equipment-qr-public h3,
body[data-app] .equipment-qr-public p {
  margin-top: 0;
}

@media (max-width: 1100px) {
  body[data-app] .app-shell {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  body[data-app] .workspace,
  body[data-app] .main-content {
    padding-inline: 18px;
  }

  body[data-app] .topbar {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  body[data-app] .directory-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-app] .lifecycle-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  body[data-app] {
    padding-bottom: 76px;
  }

  body[data-app="electrical"] .app-shell,
  body[data-app="loto"].is-authenticated .app-shell,
  body[data-app="loto"].is-public-box .app-shell,
  body[data-app="constraints"].is-authenticated .app-shell,
  body[data-app="fte"].app-open .app-shell {
    display: block;
    min-height: 100vh;
  }

  body[data-app] .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: block;
    width: 100%;
    height: 72px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    overflow: visible;
    border-top: 1px solid #3b423c;
    border-right: 0;
  }

  body[data-app] .sidebar .brand,
  body[data-app] .sidebar .brand-block,
  body[data-app] .sidebar .sidebar-status,
  body[data-app] .sidebar .sidebar-footer {
    display: none;
  }

  body[data-app] .sidebar .nav-list {
    display: flex;
    gap: 5px;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-right: 76px;
  }

  body[data-app] .sidebar .suite-switcher {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 2;
    display: block;
    width: 70px;
    height: 56px;
    padding: 0;
    border: 0;
  }

  body[data-app] .sidebar .suite-switcher-label,
  body[data-app] .sidebar .suite-links {
    display: none;
  }

  body[data-app] .sidebar .suite-mobile-select {
    display: block;
    width: 100%;
    height: 100%;
  }

  body[data-app] .sidebar .suite-site-select {
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 4px 17px 4px 7px;
    border: 1px solid rgba(242, 193, 79, 0.55);
    border-radius: 4px;
    background-color: #303730;
    color: #ffffff;
    font-size: 0.69rem;
    font-weight: 800;
  }

  body[data-app] .sidebar .nav-list::-webkit-scrollbar {
    display: none;
  }

  body[data-app] .sidebar .nav-link {
    display: flex;
    flex: 0 0 auto;
    min-width: 82px;
    height: 56px;
    min-height: 56px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 9px;
    font-size: 0.69rem;
    text-align: center;
  }

  body[data-app] .sidebar .nav-link.active {
    box-shadow: inset 0 3px 0 var(--suite-safety);
  }

  body[data-app] .sidebar .nav-link svg {
    width: 18px;
    height: 18px;
  }

  body[data-app] .workspace,
  body[data-app] .main-content {
    width: 100%;
    padding: 14px 12px 24px;
  }

  body[data-app] .topbar {
    position: static;
    align-items: flex-start;
    margin: -14px -12px 2px;
    padding: 15px 12px 13px;
    background: #ffffff;
  }

  body[data-app] .topbar,
  body[data-app] .section-heading,
  body[data-app] .panel-header,
  body[data-app] .topbar-actions,
  body[data-app] .form-actions {
    flex-wrap: wrap;
  }

  body[data-app] .topbar-actions {
    width: 100%;
  }

  body[data-app="electrical"].submitter-mode .topbar-actions {
    display: flex;
  }

  body[data-app] .topbar-actions .primary-button,
  body[data-app] .topbar-actions .admin-login {
    flex: 1 1 210px;
  }

  body[data-app] .panel,
  body[data-app] .form-section {
    padding: 15px;
  }

  body[data-app] .metrics-grid,
  body[data-app] .metric-grid,
  body[data-app] .directory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-app] .directory-toolbar,
  body[data-app] .directory-form-grid,
  body[data-app] .lifecycle-form-grid,
  body[data-app] .lifecycle-picker {
    grid-template-columns: 1fr;
  }

  body[data-app] .mfa-setup,
  body[data-app] .mfa-disable {
    grid-template-columns: 1fr;
  }

  body[data-app] .lifecycle-picker .secondary-button {
    width: 100%;
  }

  body[data-app] .lifecycle-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-app] .lifecycle-facts > span:nth-child(2n) {
    border-right: 0;
  }

  body[data-app] .inspection-metrics,
  body[data-app] .quality-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-app] .power-path-row small {
    width: 100%;
    margin-left: 69px;
  }

  body[data-app] .directory-header > .primary-button {
    width: 100%;
  }

  body[data-app] .index-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-app] .index-panel-heading > .primary-button {
    width: 100%;
  }

  body[data-app] input,
  body[data-app] select,
  body[data-app] textarea {
    font-size: 16px;
  }

  body[data-app] .table-wrap {
    overflow-x: auto;
  }

  body[data-app] .directory-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body[data-app] .metrics-grid,
  body[data-app] .metric-grid,
  body[data-app] .directory-metrics {
    grid-template-columns: 1fr 1fr;
  }

  body[data-app] .metric-card,
  body[data-app] .metric-grid > * {
    min-height: 92px;
    padding: 13px;
  }

  body[data-app] .topbar h1,
  body[data-app] .section-heading h1,
  body[data-app] .section-heading h2 {
    font-size: 1.45rem;
  }

  body[data-app] .readiness-summary {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 11px;
    padding-inline: 10px;
  }

  body[data-app] .readiness-score {
    width: 70px;
  }

  body[data-app] .readiness-checks > span {
    width: 100%;
  }

  body[data-app] .equipment-qr-layout,
  body[data-app] .equipment-qr-public {
    grid-template-columns: 1fr;
  }

  body[data-app] .inspection-public-list article,
  body[data-app] .revision-public-list article {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media print {
  body[data-app] .sidebar,
  body[data-app] .topbar,
  body[data-app] .directory-editor,
  body[data-app] .directory-toolbar,
  body[data-app] .directory-pagination {
    display: none !important;
  }

  body[data-app] {
    padding: 0;
    background: #ffffff;
  }

  body[data-app] .app-shell {
    display: block;
  }

  body[data-app] .workspace,
  body[data-app] .main-content {
    width: 100%;
    padding: 0;
  }

  body[data-app].print-equipment-qr > :not(.equipment-qr-print-sheet) {
    display: none !important;
  }

  body[data-app].print-equipment-qr .equipment-qr-print-sheet {
    display: grid;
    width: 2.25in;
    min-height: 2.55in;
    align-content: center;
    justify-items: center;
    gap: 0.08in;
    padding: 0.12in;
    border: 1px solid #000000;
    color: #000000;
    font-size: 14pt;
    font-weight: 800;
    text-align: center;
  }

  body[data-app].print-equipment-qr .equipment-qr-print-code {
    width: 1.85in;
    height: 1.85in;
  }

  body[data-app].print-equipment-qr .equipment-qr-print-code svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}