/*
 * SDIP Phase 2 - visual layer.
 * Official DIGIT light palette (v6.0.0) colors are used for all UI swatches.
 * Vanilla CSS reproduction; NOT a linked DIGIT component library.
 */

/*SDIP Phase 2 — dependency-free DIGIT-inspired styling (not an official DIGIT kit implementation).*/

:root {
  --primary: #C84C0E;
  --primary-hover: #0B4B66;
  --primary-soft: #FBEEE8;
  --ink: #363636;
  --muted: #363636;
  --muted-soft: #787878;
  --line: #D6D5D4;
  --line-soft: #EEEEEE;
  --bg: #EEEEEE;
  --surface: #FFFFFF;
  --sidebar: #FFFFFF;
  --dark: #0B4B66;
  --success: #00703C;
  --success-bg: #F1FFF8;
  --warn: #EA8D00;
  --warn-bg: #FFF9F0;
  --danger: #B91900;
  --danger-bg: #FFF5F4;
  --info: #0057BD;
  --info-bg: #DEEFFF;
  --radius: 4px;
  --shadow: 0 2px 12px rgba(20,32,45,.055);
  --focus: 0 0 0 3px rgba(200,76,14,.22);
  --sidebar-width: 252px;
  --header-height: 68px;
  font-family: Roboto,"Segoe UI",Arial,sans-serif;
  font-size: 14px;
  color: var(--ink);
  --primary-2: #0B4B66;
  --text-disabled: #C5C5C5;
  --input-border: #505A5F;
}

*,*::before,*::after {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}

button,input,select,textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

a {
  color: var(--primary);
}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

h1,h2,h3,h4,p {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
}

h2 {
  font-size: 21px;
}

h3 {
  font-size: 16px;
}

small,.small {
  font-size: 12px;
}

.muted {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon.sm {
  width: 15px;
  height: 15px;
}

.icon.lg {
  width: 24px;
  height: 24px;
}

.app-layout {
  min-height: 100vh;
  display: flex;
}

.side-nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.brand-panel {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 19px;
  border-bottom: 1px solid var(--line);
}

.brand-seal {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border: 2px solid #FBEEE8;
  border-radius: 50%;
  background: #FBEEE8;
  box-shadow: inset 0 0 0 3px white;
  color: var(--primary);
  font: 700 15px Georgia,serif;
}

.brand-name {
  line-height: 1.22;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .1px;
}

.brand-name small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
  margin-top: 3px;
}

.navigation {
  overflow-y: auto;
  flex: 1;
  padding: 15px 9px;
}

.nav-section {
  margin: 17px 10px 8px;
  color: #363636;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}

.nav-section:first-child {
  margin-top: 2px;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  width: 100%;
  background: transparent;
  color: #363636;
  text-align: left;
  border-radius: 5px;
  font-weight: 600;
  margin: 2px 0;
  transition: background .14s;
}

.nav-button:hover {
  background: #FAFAFA;
  color: var(--ink);
}

.nav-button.active {
  background: var(--primary-soft);
  color: var(--primary);
  position: relative;
}

.nav-button.active::before {
  content: "";
  background: var(--primary);
  position: absolute;
  left: -9px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 4px;
}

.nav-counter {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #FBEEE8;
  color: var(--primary);
  margin-left: auto;
}

.side-footer {
  padding: 13px 17px;
  background: #FAFAFA;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

.main-area {
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  min-width: 0;
}

.topbar {
  height: var(--header-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left,.topbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.gov-caption {
  font-size: 12px;
  color: var(--muted);
}

.gov-caption strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 3px;
}

.topbar-right {
  gap: 12px;
}

.scope-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFFFFF;
  padding: 9px 26px 9px 12px;
  font-weight: 600;
  color: var(--ink);
  max-width: 250px;
}

.round-icon {
  border: 1px solid transparent;
  background: none;
  color: #363636;
  border-radius: 7px;
  padding: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.round-icon:hover {
  background: #FAFAFA;
}

.unread-dot {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border: 2px solid white;
  border-radius: 50%;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFFFFF;
  padding: 5px 10px 5px 5px;
  text-align: left;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 33px;
  height: 33px;
  background: #FBEEE8;
  color: #C84C0E;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
}

.user-menu .who {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.user-menu .who small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}

.header-menu {
  position: absolute;
  right: 30px;
  top: 60px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 14px 35px rgba(11,75,102,.13);
  border-radius: 8px;
  min-width: 195px;
  padding: 7px;
  z-index: 15;
}

.header-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  border-radius: 5px;
}

.header-menu button:hover {
  background: #FAFAFA;
}

.hamburger {
  display: none;
}

.content {
  padding: 26px 30px 42px;
  max-width: 1720px;
  margin: auto;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 21px;
}

.breadcrumbs {
  font-size: 12px;
  color: #363636;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-title {
  font-size: 27px;
  font-weight: 750;
  margin: 0 0 7px;
  letter-spacing: -.45px;
}

.page-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 16px;
  background: #FBEEE8;
  border: 1px solid #FBEEE8;
  border-left: 4px solid #C84C0E;
  border-radius: 5px;
  font-size: 12px;
  margin-bottom: 20px;
  color: #363636;
}

.demo-banner .tag {
  background: white;
  border-color: #FBEEE8;
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-header {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.card-header h2,.card-header h3 {
  margin: 0;
  font-size: 16px;
}

.card-body {
  padding: 21px;
}

.card-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--line-soft);
}

.panel-spacing {
  margin-bottom: 20px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr);
  gap: 20px;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.metric {
  padding: 19px 19px 17px;
  position: relative;
  overflow: hidden;
}

.metric-label {
  color: #363636;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

.metric-value {
  font-weight: 800;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.9px;
}

.metric-note {
  margin-top: 11px;
  color: #363636;
  font-size: 11px;
}

.metric-icon {
  position: absolute;
  right: 15px;
  top: 18px;
  width: 39px;
  height: 39px;
  background: #FBEEE8;
  color: var(--primary);
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.metric-icon.green {
  background: #F1FFF8;
  color: var(--success);
}

.metric-icon.blue {
  background: #DEEFFF;
  color: var(--info);
}

.metric-icon.amber {
  background: #FFF9F0;
  color: #363636;
}

.metric:hover {
  box-shadow: 0 4px 16px rgba(20,32,45,.10);
}

.eyebrow {
  font-size: 11px;
  color: var(--primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
}

.btn {
  border: 1px solid transparent;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  border-radius: 4px;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn.primary {
  background: var(--primary);
  color: white;
}

.btn.primary:hover {
  background: var(--primary-hover);
}

.btn.secondary {
  border-color: var(--primary);
  color: var(--primary);
  background: white;
}

.btn.secondary:hover {
  background: #FBEEE8;
}

.btn.ghost {
  border-color: var(--line);
  color: #363636;
  background: white;
}

.btn.ghost:hover {
  background: #FAFAFA;
}

.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: #FFFFFF;
}

.btn.danger:hover {
  background: var(--danger-bg);
}

.btn.small {
  padding: 7px 10px;
  min-height: 31px;
  font-size: 12px;
}

.btn.icon-only {
  width: 32px;
  min-width: 32px;
  padding: 5px;
}

.btn.link {
  background: transparent;
  border: 0;
  color: var(--primary);
  padding: 5px 0;
  min-height: initial;
}

.btn.link:hover {
  text-decoration: underline;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid #D6D5D4;
  background: #FAFAFA;
  color: #363636;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.tag.success {
  background: var(--success-bg);
  color: var(--success);
  border-color: #F1FFF8;
}

.tag.warning {
  background: var(--warn-bg);
  color: var(--ink);
  border-color: #FFF9F0;
}

.tag.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #FFF5F4;
}

.tag.info {
  background: var(--info-bg);
  color: var(--info);
  border-color: #DEEFFF;
}

.tag.neutral {
  background: #FAFAFA;
  color: #363636;
}

.mono {
  font-family: "Consolas","SFMono-Regular",monospace;
  font-size: 12px;
  letter-spacing: -.25px;
}

.list-card {
  overflow: hidden;
}

.filters {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label {
  font-size: 12px;
  color: #363636;
  font-weight: 750;
}

.field input,.field select,.field textarea,.search-input {
  padding: 10px 12px;
  border: 1px solid #D6D5D4;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--ink);
  min-height: 40px;
  width: 100%;
  outline: none;
}

.field textarea {
  min-height: 90px;
  resize: vertical;
}

.field input:focus,.field select:focus,.field textarea:focus,.search-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus);
}

.field .hint {
  font-size: 11px;
  color: var(--muted);
}

.field .required {
  color: var(--danger);
}

.filters .field {
  min-width: 150px;
  flex: 1;
}

.filters .search-field {
  flex: 2;
  min-width: 215px;
  position: relative;
}

.filters .search-field input {
  padding-left: 36px;
}

.search-field .icon {
  position: absolute;
  left: 10px;
  bottom: 11px;
  color: #363636;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 12px;
  min-width: 750px;
}

.table th {
  background: #FAFAFA;
  color: #363636;
  font-weight: 800;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid #EEEEEE;
  vertical-align: middle;
  line-height: 1.45;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: #FBEEE8;
}

.table .primary-cell {
  font-weight: 800;
  color: #363636;
}

.cell-sub {
  display: block;
  font-size: 11px;
  color: #363636;
  font-weight: 400;
  margin-top: 2px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-btn {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  color: #363636;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.empty-state {
  padding: 58px 20px;
  text-align: center;
  color: #363636;
}

.empty-state .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: #D6D5D4;
}

.empty-state h3 {
  color: #363636;
  margin-bottom: 6px;
}

.tabs {
  display: flex;
  gap: 25px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 20px;
  overflow-x: auto;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  color: #363636;
  font-weight: 750;
  padding: 13px 3px;
  margin-bottom: -1px;
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.quick-link {
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 5px;
  padding: 16px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-weight: 750;
}

.quick-link .icon {
  color: var(--primary);
}

.quick-link:hover {
  border-color: #FBEEE8;
  background: #FBEEE8;
}

.timeline {
  list-style: none;
  padding: 0 0 0 8px;
  margin: 0;
}

.timeline li {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 19px;
}

.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 0;
  border-left: 1px solid #D6D5D4;
}

.timeline-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #FBEEE8;
  border: 3px solid var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
  z-index: 1;
}

.timeline strong {
  font-size: 12px;
}

.timeline p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

.timeline time {
  font-size: 11px;
  color: #363636;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 22px;
  row-gap: 17px;
}

.info-pair dt {
  font-size: 11px;
  color: #363636;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.info-pair dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.detail-id {
  font-size: 20px;
  font-weight: 800;
}

.alert {
  padding: 13px 15px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-left: 4px solid var(--info);
  background: var(--info-bg);
  font-size: 12px;
  line-height: 1.6;
  border-radius: 4px;
  margin-bottom: 18px;
}

.alert.warn {
  border-color: #363636;
  background: #FFF9F0;
  color: var(--ink);
}

.alert.danger {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.alert.success {
  border-color: var(--success);
  background: var(--success-bg);
}

.alert p {
  margin: 0;
}

.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.comparison .card {
  padding: 17px;
}

.progress-bar {
  height: 9px;
  background: #FAFAFA;
  border-radius: 8px;
  overflow: hidden;
}

.progress-bar>span {
  height: 100%;
  background: var(--primary);
  display: block;
  border-radius: 8px;
}

.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 48px;
  gap: 11px;
  align-items: center;
  margin: 16px 0;
  font-size: 12px;
}

.bar-row strong {
  text-align: right;
}

.bar-fill {
  height: 14px;
  background: #DEEFFF;
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill>div {
  height: 100%;
  background: #C84C0E;
  border-radius: 3px;
}

.bar-row:nth-child(even) .bar-fill>div {
  background: #DEEFFF;
}

.stat-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

.stat-line:last-child {
  border-bottom: none;
}

.workflow-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px;
}

.workflow-steps .step {
  flex: 1;
  padding: 13px;
  text-align: center;
  background: #FAFAFA;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #D6D5D4;
}

.workflow-steps .step.done {
  border-color: #F1FFF8;
  background: #F1FFF8;
  color: var(--success);
}

.workflow-steps .arrow {
  color: #D6D5D4;
}

.intro-hero {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.intro-hero h2 {
  font-size: 22px;
  letter-spacing: -.4px;
  margin: 7px 0;
}

.intro-hero p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 670px;
  margin-bottom: 16px;
}

.hero-accent {
  width: 148px;
  height: 148px;
  min-width: 148px;
  border-radius: 100%;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  color: var(--primary);
  opacity: .88;
}

.hero-accent .icon {
  width: 68px;
  height: 68px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  gap: 15px;
}

.switch {
  appearance: none;
  width: 41px;
  height: 23px;
  border-radius: 15px;
  background: #D6D5D4;
  position: relative;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: white;
  transition: transform .15s;
}

.switch:checked {
  background: var(--primary);
}

.switch:checked::after {
  transform: translateX(18px);
}

.footer-text {
  font-size: 11px;
  color: #363636;
  margin-top: 28px;
  text-align: center;
}

.icon-count {
  position: relative;
}

.code-chip {
  display: inline-block;
  background: #FAFAFA;
  color: #363636;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  padding: 4px 7px;
  font-family: Consolas,monospace;
  font-size: 11px;
}

.mini-cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.mini-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFFFFF;
}

.mini-card strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
}

.meter {
  width: 100%;
  height: 9px;
  border-radius: 5px;
  background: #FAFAFA;
  overflow: hidden;
  margin-top: 10px;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.notice-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.notice-item.unread {
  background: #FBEEE8;
}

.notice-item:last-child {
  border: 0;
}

.notice-body {
  flex: 1;
}

.notice-body h3 {
  font-size: 13px;
  margin: 0 0 5px;
}

.notice-body p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

.notice-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FAFAFA;
  color: var(--info);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,32,43,.5);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}

.modal-dialog {
  width: min(750px,100%);
  max-height: min(90vh,920px);
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 24px 75px rgba(11,75,102,.31);
  overflow: hidden;
}

.modal-dialog.wide {
  width: min(990px,100%);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 23px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  font-size: 20px;
  margin: 0;
  line-height: 1.3;
}

.modal-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.modal-content {
  padding: 23px;
  overflow: auto;
}

.modal-footer {
  padding: 15px 23px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #FFFFFF;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 17px;
}

.field.full {
  grid-column: 1/-1;
}

.required-note {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 14px;
}

.error-text {
  color: var(--danger);
  font-size: 11px;
  margin-top: 3px;
}

.toast-stack {
  position: fixed;
  right: 21px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px,calc(100vw - 30px));
}

.toast {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--success);
  box-shadow: 0 10px 36px rgba(11,75,102,.19);
  border-radius: 5px;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.toast.error {
  border-left-color: var(--danger);
}

.toast .close-toast {
  border: 0;
  background: none;
  padding: 0 1px;
  color: #363636;
  margin-left: auto;
}

.toast strong {
  display: block;
  margin-bottom: 2px;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(390px,1fr) minmax(410px,.9fr);
}

.login-aside {
  position: relative;
  background: var(--primary-2);
  color: white;
  padding: 48px clamp(40px,6vw,112px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.login-aside::before,.login-aside::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  width: 550px;
  height: 550px;
  right: -190px;
  bottom: -220px;
}

.login-aside::after {
  width: 390px;
  height: 390px;
  right: -110px;
  bottom: -130px;
  background: rgba(255,255,255,.03);
}

.login-gov {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 750;
  line-height: 1.4;
}

.login-gov .brand-seal {
  width: 56px;
  height: 56px;
  border-color: #FBEEE8;
  background: #FBEEE8;
  font-size: 20px;
}

.login-headline {
  z-index: 1;
  max-width: 560px;
}

.login-headline .line {
  display: block;
  background: rgba(255,255,255,.61);
  width: 44px;
  height: 4px;
  border-radius: 3px;
  margin-bottom: 28px;
}

.login-headline h1 {
  font-size: clamp(34px,3.6vw,53px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}

.login-headline p {
  font-size: 16px;
  line-height: 1.8;
  color: #FBEEE8;
  max-width: 500px;
}

.login-aside-bottom {
  font-size: 12px;
  opacity: .85;
  z-index: 1;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 45px;
  background: #FAFAFA;
}

.login-card {
  width: min(420px,100%);
}

.login-card h2 {
  font-size: 29px;
  letter-spacing: -.6px;
  margin: 0 0 9px;
}

.login-card>p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 25px;
}

.login-card .field {
  margin-bottom: 20px;
}

.login-card .field input {
  min-height: 47px;
}

.login-card .btn {
  width: 100%;
  min-height: 46px;
}

.login-hint {
  margin-top: 25px;
  border: 1px solid #FBEEE8;
  background: #FBEEE8;
  padding: 14px 16px;
  border-radius: 6px;
  color: #363636;
  font-size: 12px;
  line-height: 1.7;
}

.login-hint button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

.login-foot {
  text-align: center;
  margin-top: 27px;
  font-size: 12px;
  color: #363636;
}

.login-error {
  background: var(--danger-bg);
  border: 1px solid #FFF5F4;
  padding: 11px;
  border-radius: 4px;
  color: var(--danger);
  font-size: 12px;
  margin-bottom: 16px;
}

.login-top-sign {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 12px;
}

.compact .table td {
  padding-top: 9px;
  padding-bottom: 9px;
}

.compact .card-body {
  padding: 14px;
}

.high-contrast {
  --muted: #363636;
  --line: #D6D5D4;
  --bg: #EEEEEE;
  --primary: #C84C0E;
  --primary-hover: #0B4B66;
  --ink: #363636;
}

.mobile-scrim {
  display: none;
}

.noscript {
  background: #FFF5F4;
  padding: 20px;
  color: #C84C0E;
}

.skeleton {
  height: 22px;
  background: linear-gradient(90deg,#EEEEEE 25%,#FAFAFA 50%,#EEEEEE 75%);
  background-size: 200% 100%;
  animation: shimmer 1s infinite;
}

@keyframes shimmer {
  to {
    background-position-x: -200%;
  }
}

@media (max-width:1250px) {
  .metric-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .quick-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .hero-accent {
    width: 110px;
    height: 110px;
    min-width: 110px;
  }
}

@media (max-width:900px) {
  .side-nav {
    transform: translateX(-100%);
    transition: transform .18s;
  }
  .side-nav.open {
    transform: translateX(0);
  }
  .mobile-scrim.show {
    position: fixed;
    inset: 0;
    background: rgba(54,54,54,.53);
    z-index: 19;
    display: block;
  }
  .main-area {
    margin: 0;
    width: 100%;
  }
  .hamburger {
    display: inline-flex;
  }
  .topbar {
    padding: 0 18px;
  }
  .content {
    padding: 22px 19px;
  }
  .scope-select {
    max-width: 180px;
  }
}

@media (max-width:650px) {
  .content {
    padding: 18px 13px;
  }
  .topbar {
    padding: 0 11px;
  }
  .gov-caption {
    display: none;
  }
  .user-menu .who {
    display: none;
  }
  .scope-select {
    max-width: 140px;
    font-size: 11px;
  }
  .metric-grid,.three-col,.settings-grid,.two-col,.form-grid,.comparison {
    grid-template-columns: 1fr;
  }
  .quick-grid {
    grid-template-columns: 1fr;
  }
  .page-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .page-title {
    font-size: 24px;
  }
  .heading-actions {
    justify-content: flex-start;
  }
  .intro-hero {
    padding: 19px;
  }
  .hero-accent {
    display: none;
  }
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-aside {
    min-height: 210px;
    padding: 22px 30px;
  }
  .login-headline h1 {
    font-size: 27px;
    margin: 0;
  }
  .login-headline p,.login-headline .line,.login-aside-bottom {
    display: none;
  }
  .login-main {
    padding: 30px 19px;
  }
  .login-card h2 {
    font-size: 25px;
  }
  .modal-backdrop {
    padding: 7px;
  }
  .modal-dialog {
    max-height: 96vh;
  }
  .modal-content {
    padding: 18px;
  }
  .modal-head,.modal-footer {
    padding: 15px;
  }
  .workflow-steps {
    flex-direction: column;
  }
  .workflow-steps .step {
    width: 100%;
  }
  .workflow-steps .arrow {
    transform: rotate(90deg);
  }
}

/*Non-blocking feedback: a toast must never intercept a modal action button.*/

.toast-stack,.toast {
  pointer-events: none;
}

.toast .close-toast {
  pointer-events: auto;
}

.login-hint .btn {
  width: auto;
  min-height: initial;
  display: inline-flex;
}

/*Shrink grid children rather than letting wide tables stretch the mobile viewport.*/

.two-col>*,.three-col>*,.settings-grid>*,.metric-grid>*,.quick-grid>*,.card,.main-area {
  min-width: 0;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width:650px) {
  .app-layout {
    width: 100%;
    overflow-x: clip;
  }
  .main-area {
    max-width: 100vw;
  }
  .content {
    max-width: 100vw;
    min-width: 0;
  }
  .demo-banner {
    flex-wrap: wrap;
  }
  .demo-banner .tag {
    margin-left: 0;
  }
  .toast-stack {
    right: 12px;
    bottom: 12px;
  }
}

.bar-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  padding: 6px 8px;
  margin: 8px 0;
  border-radius: 5px;
  cursor: pointer;
}

.bar-button:hover {
  background: #FBEEE8;
}

.bar-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* In this review build, status labels always carry meaningful text. */

/* Wider SoW task groups — same DIGIT-inspired controls as the primary registers. */
.advanced-section { margin: 30px 0 26px; }
.feature-heading { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; padding:2px 0 13px; border-bottom:1px solid #d6d6d6; margin-bottom:17px; }
.feature-heading h2 { color:#363636; font-size:22px; font-weight:700; line-height:1.4; margin:0 0 3px; font-family:'Roboto Condensed','Roboto',Arial,sans-serif; }
.feature-heading p { margin:0; max-width:760px; }
.advanced-tabs { margin:0 0 20px; }
.advanced-section > .card, .advanced-section > .list-card { margin-top:12px; }
.advanced-section .table-scroll .row-actions { min-width:110px; }
.advanced-section .info-pair { min-width:0; }
.advanced-section .table td { overflow-wrap:anywhere; }
.advanced-section button { white-space:nowrap; }
@media(max-width:768px){.advanced-section{margin:22px 0}.feature-heading{align-items:flex-start;flex-direction:column;gap:10px}.feature-heading h2{font-size:20px}.advanced-section .btn{white-space:normal}}

/* Phase 2 advanced workspace — progressive enhancement to the existing DIGIT-like UI.
   The underlying workflow controls and core token mapping are left intact. */
:root {
  --sidebar-width: 270px;
  --header-height: 78px;
  --shadow: 0 4px 22px rgba(11, 75, 102, .045);
  --card-radius: 7px;
}
html { scroll-behavior: smooth; }
body { background: #f3f5f6; }
.side-nav { box-shadow: 3px 0 17px rgba(11, 75, 102, .035); }
.brand-panel { height: var(--header-height); border-top: 4px solid var(--primary); padding-left: 23px; }
.brand-seal { border-color: #fbefe9; box-shadow: inset 0 0 0 3px #fff,0 0 0 1px #e9ccbb; }
.brand-name { font-family: 'Roboto Condensed', Roboto, 'Segoe UI', Arial, sans-serif; font-size: 21px; letter-spacing: -.3px; color: var(--dark); }
.brand-name small { color: #59636b; font-family: Roboto,Arial,sans-serif; font-size: 9px; letter-spacing: .45px; }
.nav-workspace { display: flex; flex-direction: column; gap: 6px; padding: 20px 23px 18px; background: #f7f9fa; border-bottom: 1px solid #e4e8eb; }
.nav-workspace-label { font-size: 9px; font-weight: 800; color: var(--primary); letter-spacing: 1.4px; }
.nav-workspace strong { font-size: 15px; color: var(--dark); }
.nav-workspace > span:last-child { display:flex; gap:6px; align-items:center; color: #606c74; font-size: 11px; }
.nav-workspace .icon { color: var(--success); }
.navigation { padding: 7px 11px 16px; }
.nav-section.nav-group-button { display:flex; justify-content:space-between; align-items:center; width:100%; padding: 17px 12px 7px; margin: 0; color: #68737a; background: transparent; border:0; border-radius:3px; text-align: left; font-size: 10px; font-weight: 800; letter-spacing:.75px; }
.nav-group-button:hover { color: var(--dark); }
.nav-group-button svg { width: 12px; height: 12px; transition: transform .18s; }
.nav-group-button[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-group-content.collapsed { display: none; }
.nav-button { font-weight: 620; padding: 10px 13px; gap: 12px; color: #414a51; border-radius: 4px; font-size: 12.5px; }
.nav-button .icon { color: #53616a; width: 18px; height: 18px; }
.nav-button:hover { background: #f1f5f7; color: var(--dark); }
.nav-button.active { background: #fbeee8; color: var(--primary); font-weight: 750; }
.nav-button.active .icon { color: var(--primary); }
.nav-button.active::before { left:-11px; top: 4px; bottom: 4px; width: 4px; border-radius:0 3px 3px 0; }
.nav-counter { background: var(--primary); color: #fff; border-radius: 5px; font-weight: 800; }
.nav-utility { padding: 12px 16px; border-top: 1px solid #e5e9ed; display: flex; flex-direction: column; gap: 10px; }
.nav-search-link { display:flex; gap: 10px; align-items:center; border:1px solid #d8dee2; background:#fff; color: #525d66; border-radius:4px; padding:10px 11px; width:100%; text-align:left; font-size:12px; }
.nav-search-link:hover { border-color:var(--primary); color:var(--primary); }
.nav-search-link kbd { margin-left:auto; }
.nav-utility > span { font-size:11px; color:#69737a; display:flex; gap:8px; align-items:center; }
.online-dot { width:7px;height:7px; background:var(--success); border-radius:50%; display:inline-block; }
kbd { font-size:10px; border:1px solid #d5dde1; border-radius:4px; padding:2px 5px; font-family: inherit; background:#fff; color:#515f68; font-weight:700; }
.side-footer { background:#f7f9fa; color: #6b747b; padding:11px 17px; }
.topbar { border-top:4px solid var(--dark); box-shadow: 0 2px 8px rgba(12,47,65,.04); padding: 0 28px; }
.gov-eyebrow { display: block; color: var(--primary); font-size:10px; font-weight:850; letter-spacing:.8px; margin-bottom:5px; }
.gov-caption strong { color:var(--dark); font-size:15px; font-weight:760; letter-spacing:-.2px; }
.global-search { display:flex; align-items:center; gap:9px; padding:10px 12px; min-width:260px; width: min(26vw,350px); border:1px solid #d7dfe3; background: #f7f9fa; color:#697780; text-align:left; border-radius:5px; font-size:12px; }
.global-search span { flex: 1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.global-search:hover { border-color:var(--primary); background:#fff; }
.global-search .icon { color:var(--dark); }
.scope-select { border-color: #d2dbe0; color: var(--dark); font-size:12px; max-width:190px; font-weight:750; }
.top-help { border:1px solid #e0e6e9; font-weight:800; width:37px; height:37px; }
.notification-trigger { border:1px solid #e0e6e9; }
.notification-count { position:absolute; top:-7px; right:-5px; background:var(--primary); color:#fff; min-width:18px; height:18px; display:grid;place-items:center; font-size:10px; border-radius:10px; font-weight:700; border:2px solid #fff; }
.user-menu { border-color:#dfe4e7; min-height:42px; }
.content { max-width: 1740px; padding:26px 30px 46px; }
.breadcrumbs { color:#7c858b; font-size:11px; }
.page-title { font-size:30px; font-family:'Roboto Condensed', Roboto, Arial, sans-serif; font-weight:750; color:#233d4a; letter-spacing:-.5px; }
.page-subtitle { color:#616e78; }
.page-heading { margin-bottom:23px; }
.demo-banner { background:#fff6f1; border:1px solid #f8e3d7; border-left:3px solid var(--primary); color:#694f41; padding:9px 14px; margin-bottom:22px; font-size:11px; }
.demo-banner .tag { font-size:10px; }
.card { border:1px solid #dce2e5; border-radius: var(--card-radius); box-shadow: var(--shadow); }
.card-header { padding:20px 22px; }
.card-header h2 { color:#253f4b; }
.list-card { overflow:hidden; }
.table th { background:#f7f9fa; color:#586873; font-weight:800; }
.table td { color:#46555e; }
.table tbody tr:hover { background:#fbf5f0; }
.table .primary-cell { color:#1c4257; font-weight:760; }
.btn { font-weight:700; }
.btn.primary { box-shadow:0 3px 8px rgba(200,76,14,.13); }
.btn.primary:hover { box-shadow:0 6px 14px rgba(200,76,14,.2); }
.tabs { gap: 28px; }
.tab { color:#647179; }
.screen-context { background:#fff; border:1px solid #e0e5e9; box-shadow:var(--shadow); border-radius:5px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; padding: 10px 14px; font-size:11px; }
.screen-context-items, .screen-context-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.screen-context-items > span { display:flex; align-items:center; gap:6px; }
.context-live { color:var(--success); font-weight:800; letter-spacing:.4px; font-size:10px; }
.context-live i { background:var(--success); height:7px;width:7px;border-radius:50%; }
.context-sep { width:1px; height:16px; background:#d8e0e5; }
.screen-context-actions button { background:none; border:0; font-size:11px; font-weight:700; color:var(--dark); display:flex; gap:6px; align-items:center; }
.screen-context-actions button:hover { color:var(--primary); }
.sort-button { border:0; padding:2px 0; background:transparent; color:inherit; font-size:inherit; font-weight:inherit; text-align:left; white-space:nowrap; }
.sort-button:hover { color:var(--primary); }
.sort-button span { margin-left:6px; color:#89939a; }
.rows-select-label { display:flex; gap:6px; align-items:center; font-size:11px; color:#68727a; font-weight:700; }
.rows-select-label select { min-width:54px; padding:8px 5px; }

/* Overview */
.advanced-hero { background:var(--dark); border-radius:8px; min-height:246px; display:flex; justify-content:space-between; align-items:center; color:#fff; overflow:hidden; position:relative; padding:30px 42px; margin-bottom:18px; }
.advanced-hero::after { content:""; position:absolute; width:450px;height:450px;border-radius:50%;right:-170px;top:-120px;background:rgba(255,255,255,.035); }
.hero-copy { z-index:2; max-width:660px; }
.advanced-hero .eyebrow { letter-spacing:1.4px; font-size:10px; font-weight:800; color:#fff; opacity:.85; }
.hero-slash { padding:0 7px; color:#f3aa87; }
.advanced-hero h2 { font-family:'Roboto Condensed',Roboto,Arial,sans-serif; font-size:32px; letter-spacing:-.7px; line-height:1.16; margin:13px 0 11px; color:#fff; }
.advanced-hero p { font-size:12.5px; line-height:1.7; max-width:625px; color:#e4ecf0; margin-bottom:18px; }
.hero-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.advanced-hero .btn.primary { background:#fff; border-color:#fff; color:var(--primary); }
.advanced-hero .btn.primary:hover { background:#fbede4; }
.advanced-hero .btn.secondary { color:#fff; border-color:#8bafc0; background:transparent; }
.advanced-hero .btn.secondary:hover { background:#125c7a; }
.hero-graphic { width:270px; height:220px; position:relative; flex-shrink:0; margin-right:45px; z-index:1; }
.orbit { border:1px dashed rgba(255,255,255,.32); border-radius:50%; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); }
.orbit-one {width:168px;height:168px}.orbit-two {width:250px;height:220px}
.hero-center { position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:6px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;width:86px;height:86px;color:var(--primary); }
.hero-center svg {width:43px;height:43px}
.orbit-tag { position:absolute; background:#fff; color:var(--dark); box-shadow:0 2px 18px rgba(0,0,0,.13);border-radius:4px; padding:5px 12px; font-size:10px; font-weight:900; }
.orbit-tag.one {top:11px;left:93px}.orbit-tag.two {top:72px;right:-19px}.orbit-tag.three {bottom:5px;left:112px}.orbit-tag.four {top:88px;left:-28px}
.executive-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.insight-metric { position:relative; background:#fff; border:1px solid #dfe4e7; box-shadow:var(--shadow); border-radius:6px; display:flex; flex-direction:column; text-align:left; gap:10px; min-height:158px; padding:20px; color:var(--ink); }
.insight-metric:hover { transform: translateY(-2px); border-color:#a9bbc5; box-shadow:0 8px 25px rgba(11,75,102,.09); }
.insight-title { font-size:12px; color:#586771; font-weight:750; }
.insight-metric strong { font-family:'Roboto Condensed',Roboto,Arial,sans-serif; font-size:34px; line-height:1; color:#243f4b; }
.insight-metric small {display:flex; align-items:center; gap:4px; font-size:10.5px;color:#6b747a;margin-top:auto; }
.insight-metric small .icon {color:var(--primary);width:13px;height:13px}
.insight-icon { position:absolute; right:18px;top:18px; display:grid;place-items:center; width:36px;height:36px; border-radius:6px; }
.insight-icon.orange { background:var(--primary-soft);color:var(--primary); }
.insight-icon.blue { background:var(--info-bg);color:var(--dark); }
.insight-icon.green {background:var(--success-bg);color:var(--success)}
.insight-icon svg {width:18px;height:18px}
.analytics-layout { display:grid;grid-template-columns:minmax(0,1.85fr) minmax(285px,.9fr);gap:17px;margin-bottom:18px; }
.operational-layout { display:grid;grid-template-columns:minmax(0,1.72fr) minmax(290px,.93fr);gap:17px;margin-bottom:18px; }
.advanced-card-head {border-bottom:1px solid #e9edf0; align-items:center; }
.advanced-card-head h2 {font-size:17px;font-weight:770;margin:6px 0 0}
.advanced-card-head p {font-size:11px;color:#69747d;margin:6px 0 0}
.card-overline {font-size:9px;color:var(--primary);font-weight:850;letter-spacing:1.25px}
.chart-toolbar {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px 0; }
.chart-toggle {display:flex;gap:2px;flex-wrap:wrap;border:1px solid #e2e7ea;border-radius:4px;padding:3px;background:#f6f8f9}
.chart-toggle-btn {font-size:11px;color:#61717d;padding:5px 10px;background:transparent;border:0;border-radius:3px;font-weight:750}
.chart-toggle-btn.active {background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.09);color:var(--dark)}
.chart-toggle-btn:hover {color:var(--primary)}
.chart-range {font-size:11px;color:#6c787f;font-weight:700;white-space:nowrap}
.chart-range select {padding:6px 7px;border:1px solid #dce3e8;margin-left:5px;color:var(--dark);background:#fff}
.chart-stage {padding:10px 18px 0 8px;}
.chart-stage svg {width:100%;max-height:265px;display:block; }
.chart-legend {display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:9px 22px 19px;font-size:11px;color:#596771; }
.chart-legend span {display:flex;gap:7px;align-items:center; }
.chart-legend i {height:8px;width:8px;border-radius:2px}
.chart-legend small {margin-left:auto;color:#8b9298;font-size:10px}
.evidence-card { display:flex;flex-direction:column;align-items:stretch; }
.coverage-ring { width:164px; height:164px; border-radius:50%; margin:22px auto 10px; background:conic-gradient(var(--success) var(--coverage), #e7eef0 0); display:grid;place-items:center; }
.coverage-ring > div { background:#fff; border-radius:50%; width:126px;height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; }
.coverage-ring strong {font-family:'Roboto Condensed',Roboto,sans-serif;color:var(--dark);font-size:34px}
.coverage-ring small {font-size:10px;color:#65747d;text-align:center;line-height:1.45}
.coverage-numbers {display:flex;gap:14px;justify-content:center;align-items:center;font-size:11px;color:#5b666d;margin:8px 12px 18px;flex-wrap:wrap}
.coverage-numbers span {display:flex;align-items:center;gap:6px;}
.coverage-numbers strong {color:var(--dark)}
.legend-marker {display:inline-block;width:8px;height:8px;border-radius:2px}
.legend-marker.dark {background:var(--success)}.legend-marker.orange{background:var(--primary)}
.evidence-link { border:0;border-top:1px solid #ebeff0;background:#fff;color:var(--primary);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;margin-top:auto}
.evidence-link:hover {background:var(--primary-soft)}
.operational-layout .table th,.operational-layout .table td {padding:14px 18px}
.readiness-list {padding:8px 18px 14px}
.readiness-tile {display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #edf0f2;padding:15px 5px; }
.readiness-tile:hover {background:#f9fafb}
.readiness-title {display:flex;justify-content:space-between;gap:9px;align-items:center;font-size:12px;color:#354c5b}
.readiness-title span {color:#64737b;font-size:11px}
.readiness-track {display:block;height:6px;border-radius:99px;background:#eef1f2;margin:11px 0 6px;overflow:hidden}
.readiness-track>span {display:block;height:100%;border-radius:99px}
.readiness-tile small {font-size:10px;color:#80909a}
.shortcut-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}
.shortcut-item {text-align:left;display:grid;grid-template-columns:29px 1fr 12px;column-gap:9px;row-gap:6px;align-items:center;border:1px solid #e0e6e9;background:#fff;border-radius:5px;padding:13px 12px;color:#294353;}
.shortcut-item:hover {background:#f8fbfc;border-color:var(--dark)}
.shortcut-item>span {grid-row:span 2;display:grid;place-items:center;background:#f0f5f7;color:var(--dark);width:28px;height:28px;border-radius:4px;}
.shortcut-item strong{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shortcut-item small{grid-column:2;font-size:10px;color:#75848b}
.shortcut-item>.icon{grid-column:3;grid-row:1 / span 2;width:13px;color:var(--primary)}
.activity-feed {padding:7px 18px 18px}
.activity-item {display:flex;gap:12px;padding:13px 2px;border-bottom:1px solid #edf0f2}
.activity-item:last-child {border:0}
.activity-icon {height:26px;width:26px;display:grid;place-items:center;background:#eaf4f0;color:var(--success);border-radius:6px;flex-shrink:0}
.activity-item strong {text-transform:capitalize;font-size:11px;color:#264454}
.activity-item p {margin:4px 0;font-size:10.5px;color:#66747e}
.activity-item small {font-size:10px;color:#88939b}

/* Beneficiary monitoring */
.programme-insights {margin:0 0 19px;background:#fff;border:1px solid #dce3e7;border-radius:6px;padding:20px;}
.programme-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.programme-heading h2 {margin:5px 0;font-size:19px;color:var(--dark)}
.programme-heading p {margin:0;font-size:11px;color:#66737b}
.programme-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.programme-card {border:1px solid #e6e9ec;border-radius:5px;background:#fcfdfd;padding:15px}
.programme-top {font-size:12px;color:#354c59;font-weight:800;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.programme-card>strong {display:block;font:700 29px 'Roboto Condensed',Roboto,sans-serif;margin:12px 0 0;color:var(--dark)}
.programme-card>span {font-size:11px;color:#687984}
.programme-progress {height:7px;background:#e9eef0;border-radius:8px;margin:15px 0 10px;overflow:hidden}
.programme-progress i {display:block;height:100%;border-radius:8px;background:var(--success)}
.programme-foot {display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;color:#6c7a84;font-size:10px}

/* Command palette */
.command-palette {margin:-7px -3px}
.command-input-wrap {display:flex;gap:12px;align-items:center;border:1px solid #a6b8c4;border-radius:5px;background:#f8fafb;padding:4px 14px}
.command-input-wrap>.icon {color:var(--dark)}
.command-input-wrap input {outline:none!important;border:0!important;background:transparent!important;width:100%;height:47px;font-size:16px;padding:0!important;box-shadow:none!important}
.command-results {display:flex;flex-direction:column;gap:3px;max-height:420px;overflow:auto;padding:12px 0}
.command-result {width:100%;display:flex;align-items:center;gap:14px;border:0;background:#fff;border-radius:5px;text-align:left;padding:12px 13px}
.command-result:hover,.command-result:focus-visible {background:#f3f8fa}
.command-result-icon {width:33px;height:33px;display:grid;place-items:center;background:#edf4f7;border-radius:6px;color:var(--dark)}
.command-result-text {min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.command-result-text strong {font-size:12.5px;color:#2b4655;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-result-text small {font-size:10.5px;color:#74818a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-kind {font-size:9px;font-weight:800;color:#7b8a92;border:1px solid #dfe6ea;border-radius:4px;padding:3px 5px}
.command-result>.icon {width:14px;height:14px;color:var(--primary)}
.command-foot {display:flex;flex-wrap:wrap;gap:16px;padding:12px 3px 0;border-top:1px solid #e6eaed;color:#78838b;font-size:10px}
.command-foot span {display:flex;align-items:center;gap:5px}
.command-empty {display:flex;flex-direction:column;align-items:center;padding:35px;color:#6f7e87;gap:8px;text-align:center}
.command-empty strong {font-size:13px;color:var(--dark)}
.command-empty p {font-size:11px}
.help-rows>div {display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #edf0f2}
.help-rows {margin-bottom:18px;font-size:12px}

@media(max-width:1300px) {
 .global-search {width:200px;min-width:200px}
 .global-search span {font-size:11px}
 .hero-graphic {margin-right:4px}
 .shortcut-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px) {
 .global-search {min-width:36px;width:40px;padding:10px;justify-content:center}
 .global-search span,.global-search kbd {display:none}
 .analytics-layout,.operational-layout {grid-template-columns:minmax(0,1fr)}
 .hero-graphic {width:240px}
 .scope-select {max-width:180px}
 .executive-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px) {
 :root {--header-height:69px}
 .topbar {padding:0 12px}
 .top-help {display:none}
 .global-search {min-width:36px;width:37px}
 .content {padding:18px 14px}
 .advanced-hero {padding:26px}
 .hero-graphic {display:none}
 .shortcut-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .screen-context {align-items:flex-start;flex-direction:column}
 .programme-cards {grid-template-columns:1fr}
}
@media(max-width:540px) {
 .scope-select {max-width:135px;font-size:10px;padding-left:6px}
 .gov-caption {display:none}
 .advanced-hero h2 {font-size:27px}
 .advanced-hero .btn {width:100%;justify-content:center}
 .executive-metrics {grid-template-columns:1fr 1fr;gap:9px}
 .insight-metric {min-height:137px;padding:14px;gap:7px}
 .insight-metric .insight-icon{right:11px;top:12px;width:28px;height:28px}
 .insight-metric strong {font-size:30px}
 .insight-metric small {font-size:9px}
 .insight-title {font-size:10px;max-width:75%}
 .chart-toggle {width:100%;justify-content:center}
 .chart-toolbar {padding:12px 12px 0;justify-content:center}
 .chart-legend {padding:9px 13px 15px}
 .shortcut-grid {grid-template-columns:1fr}
 .programme-heading {flex-direction:column;align-items:flex-start}
 .scope-select {max-width:111px}
}
.pinned-section {padding:12px 0 11px;border-bottom:1px solid #e4e8eb;margin-bottom:2px}
.pinned-heading {font-size:9px;letter-spacing:1.1px;font-weight:900;color:var(--primary);padding:0 12px 8px}
.pinned-button {background:#f5f8f9;border:1px solid #e6edf0;}
.pinned-button:not(.active) .icon {color:var(--dark)}
.pinned-link {width:100%;display:flex;align-items:center;text-align:left;gap:11px;margin:4px 0;padding:10px 12px;border:1px solid #e4e9ed;border-radius:4px;background:#f5f8f9;font-weight:700;color:#304c5b;font-size:12px}
.pinned-link .icon {height:16px;width:16px}
.pinned-link:hover,.pinned-link.active {color:var(--primary);background:var(--primary-soft);border-color:#f1d3c4}

/* Numbered DIGIT-inspired detail specification (screen/detail pattern).
 * Number badges identify the field, not a component-library certification. */
.numbered-info { min-width:0; padding:15px 16px; background:#fff; border:1px solid #e3e6e7; border-radius:4px; margin:0; }
.numbered-info dt { display:flex;align-items:center;gap:9px;margin:0 0 9px;color:#465560;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.45px; }
.numbered-info .numbered-value { color:#263945; font-size:13px;line-height:1.55;font-weight:700;white-space:pre-wrap; }
.numbered-info .numbered-description { color:#626e76; font-size:11.5px; line-height:1.55; margin-top:8px;font-weight:400; }
.detail-number { background:#f3e9e3;border:1px solid #eacbbd;border-radius:3px;color:#97400f;min-width:25px;height:24px;padding:0 4px;display:inline-grid;place-items:center;font-size:10px;font-weight:850;letter-spacing:0;flex-shrink:0; }
.info-grid:has(.numbered-info) {gap:11px;}
.modal-dialog:has(.workflow-detail) { width:min(1100px,96vw);max-height:min(94vh,1020px); }
.modal-dialog:has(.workflow-detail) .modal-content { padding:0;background:#f7f9fa; }
.modal-dialog:has(.workflow-detail) .modal-head {padding:18px 26px;}
.modal-dialog:has(.workflow-detail) .modal-footer{padding:16px 26px; flex-wrap:wrap;}
.workflow-detail { color:#363636; }
.workflow-headline{background:#fff; padding:26px 28px 22px;display:flex;align-items:flex-start;gap:25px;justify-content:space-between;}
.workflow-eyebrow{font-weight:800;font-size:10px;letter-spacing:1.15px;color:#66757b; margin-bottom:10px;}
.workflow-eyebrow span {color:#d2d6d8;padding:0 5px;}
.workflow-head-main{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.workflow-head-main h3{margin:0;font-family:'Roboto Condensed',Roboto,Arial,sans-serif;font-size:25px;line-height:1.2;color:#0B4B66;}
.workflow-headline p{font-size:12px;color:#5c6b74;line-height:1.65;margin:10px 0 0;max-width:720px;}
.workflow-ref{background:#f5f7f7;border:1px solid #e3e7e8;border-radius:4px;padding:12px 14px;min-width:168px;display:grid;gap:4px;text-align:right;}
.workflow-ref span{font-size:9px;color:#6a7780;letter-spacing:.5px;font-weight:800;}
.workflow-ref strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#113f54;font-size:16px;}
.workflow-ref small{font-size:10px;color:#697780;}
.workflow-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#e5e8ea;border-top:1px solid #e5e8ea;border-bottom:1px solid #e5e8ea;}
.workflow-stat-row>div{background:#fff;padding:15px 25px;display:flex;flex-direction:column;gap:6px;}
.workflow-stat-row span{font-size:10.5px;color:#64747b;}
.workflow-stat-row strong{font-size:14px;color:#263945;overflow-wrap:anywhere;}
.workflow-tabs{background:#fff;display:flex;align-items:stretch;border-bottom:1px solid #dfe5e8;overflow-x:auto;padding:0 18px;scrollbar-width:thin;}
.workflow-tab {display:inline-flex;gap:7px;align-items:center;padding:15px 13px 14px;white-space:nowrap;background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;font-size:11.5px;font-weight:700;color:#586974;}
.workflow-tab:hover{color:#C84C0E;background:#fff9f6;}
.workflow-tab.active{border-bottom-color:#C84C0E;color:#a4400c;background:#fff;}
.tab-index{font-size:10px;font-weight:900;color:inherit;opacity:.7}
#modal-root #wf-panel{min-height:240px;padding:26px 28px 30px;}
.workflow-intro{margin-bottom:16px;}
.workflow-intro h4{font-family:'Roboto Condensed',Roboto,Arial,sans-serif;font-size:19px;color:#0B4B66;margin:0 0 5px;}
.workflow-intro p{font-size:11.5px;color:#66757b;margin:0;line-height:1.6;}
.workflow-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.workflow-info-grid .numbered-info{padding:16px 17px;background:#fff;}
.workflow-section-spaced{margin-top:24px;}
.workflow-stage-list{margin:24px 0 6px;display:grid;gap:4px;}
.workflow-stage{display:grid;grid-template-columns:36px minmax(0,1fr);gap:15px;position:relative;}
.workflow-stage-rail{display:flex;flex-direction:column;align-items:center;}
.stage-circle{border:2px solid #C84C0E;color:#9c3a0d;background:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;z-index:1;}
.stage-connector{width:2px;background:#ebcbb9;min-height:45px;flex:1;margin:5px 0;}
.workflow-stage-card{background:#fff;border:1px solid #e3e6e7;border-radius:4px;padding:18px 20px;margin-bottom:17px;}
.stage-top{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.stage-top h5{font-size:14px;color:#0B4B66;margin:0;}
.stage-chip{background:#eef4f7;padding:4px 8px;border-radius:3px;font-size:10px;font-weight:700;color:#0B4B66;}
.workflow-stage-card p{font-size:12px;color:#596972;line-height:1.6;margin:10px 0 15px;}
.workflow-stage-card dl{display:grid;grid-template-columns:155px minmax(0,1fr);gap:10px 16px;font-size:11.5px;line-height:1.55;margin:0;}
.workflow-stage-card dt{color:#65747c;font-weight:750;}
.workflow-stage-card dd{margin:0;color:#354b55;}
.wf-notice{border-left:3px solid #C84C0E;background:#fff9f5;color:#624b3d;margin-top:18px;padding:14px 16px;font-size:11.5px;display:flex;gap:12px;line-height:1.6;}
.wf-notice .icon{flex-shrink:0;}
.wf-evidence-list{margin-top:22px;background:#fff;border:1px solid #e0e5e7;padding:20px;border-radius:4px;}
.wf-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.wf-subhead h5{font-size:13px;color:#0B4B66;margin:0;}
.wf-subhead span{font-size:10px;color:#64757d;}
.workflow-related{width:100%;display:grid;grid-template-columns:100px 1fr auto 16px;align-items:center;text-align:left;gap:12px;background:#fff;border:0;border-top:1px solid #e8ecee;color:#2e4551;padding:13px 1px;font-size:11.5px;}
.workflow-related:hover{color:#C84C0E;background:#fff9f6;}
.wf-empty-history{font-size:12px;line-height:1.5;color:#63727b;padding:14px;background:#f7f9fa;}
@media(max-width:760px){
 .workflow-headline{padding:20px 18px;flex-direction:column;gap:12px;}
 .workflow-ref{min-width:auto;width:100%;text-align:left;}
 .workflow-stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
 .workflow-stat-row>div{padding:12px 15px;}
 #modal-root #wf-panel{padding:19px 16px 24px;}
 .workflow-tabs{padding:0 6px;}
 .workflow-info-grid{grid-template-columns:1fr;}
 .workflow-stage-card{padding:14px;}
 .workflow-stage-card dl{grid-template-columns:1fr;gap:3px;}
 .workflow-stage-card dd{margin-bottom:9px;}
 .workflow-related{grid-template-columns:80px 1fr;gap:8px;}
 .workflow-related .tag,.workflow-related .icon{display:none;}
}

/* Field-level guidance applies to every available Create / Edit form. */
.numbered-form-field label {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.numbered-form-field .detail-number{height:22px;min-width:24px;}
.form-field-guide{font-size:11px;color:#5c6f77;line-height:1.5;display:block;margin:7px 0 0;}
.record-detail-summary{padding:18px 20px 15px;background:#f5f8f9;border-bottom:1px solid #dfe6e9;margin:-4px -2px 14px;}
.record-detail-summary h3{font-size:20px;margin:5px 0;color:#0B4B66;}
.record-detail-summary p{max-width:770px;font-size:12px;line-height:1.65;color:#50616b;margin:0;}
.record-section-label{color:#995024;font-weight:800;letter-spacing:.65px;font-size:10px;}
.record-fields-heading{margin:22px 0 14px;}
.record-fields-heading h4,.record-guidance h4{color:#0B4B66;font-size:16px;margin:0 0 6px;font-weight:800;}
.record-fields-heading p,.record-guidance p{font-size:12px;color:#596d76;margin:0;line-height:1.6;}
.record-guidance{border:1px solid #dce5e9;background:#f5f8f9;padding:16px 20px;border-radius:4px;margin-top:24px;}
.record-guidance-strip{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:12px;color:#3c5461;}
.record-guidance .detail-number{background:#e9f0f4;color:#0B4B66;border-color:#cadee6;}

/* PRD v1.0/Rev 1.1 — analytical traceability and governance reference screen. */
.prd-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:17px 0 20px}
.prd-metrics .metric{min-width:0}
.prd-tabs{display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid #d5d5d5;padding-bottom:9px;margin:0 0 22px}
.prd-tab{border:1px solid #d7dddf;border-radius:5px;background:#fff;padding:11px 13px;font:inherit;font-size:12px;font-weight:650;color:#363636;cursor:pointer}
.prd-tab:hover,.prd-tab:focus-visible{border-color:#c84c0e;color:#aa3f0b}
.prd-tab.active{background:#fbeee8;border-color:#c84c0e;color:#8b3005;box-shadow:inset 0 -2px #c84c0e}
.prd-section-head{margin:16px 0 15px}
.prd-section-head h2{font-size:20px;font-weight:700;margin:0 0 7px;color:#363636}
.prd-section-head p{font-size:13px;color:#545454;max-width:980px;line-height:1.65;margin:0}
.prd-governance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prd-g-card{border:1px solid #dfe2e4;background:#fff;border-radius:6px;padding:19px;display:flex;flex-direction:column;gap:11px;min-width:0;box-shadow:0 2px 8px rgba(0,0,0,.028)}
.prd-g-card h3{font-size:16px;line-height:1.35;margin:0}
.prd-g-card p{font-size:12px;line-height:1.65;color:#505050;margin:0;flex:1}
.prd-g-card>button{align-self:flex-start}
.prd-g-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.prd-g-top .mono{font-weight:800;color:#0b4b66;font-size:16px}
.prd-g-meta{display:grid;grid-template-columns:105px minmax(0,1fr);gap:6px 12px;border-top:1px solid #ededed;padding-top:11px;font-size:12px}
.prd-g-meta strong{color:#5d6367}.prd-g-meta span{line-height:1.4}
.prd-context{margin:22px 0 0;border:1px solid #e3ddd8;padding:0;overflow:hidden}
.prd-context summary{cursor:pointer;padding:14px 17px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:12px;color:#363636}
.prd-context summary:hover{background:#fff9f6}
.prd-context summary::marker{color:#c84c0e}
.prd-context-mark{display:inline-flex;background:#fbede6;color:#8b390e;padding:6px 9px;border-radius:3px;font-size:10px;font-weight:800;letter-spacing:.2px}
.prd-guide-body{padding:17px;border-top:1px solid #ededed}.prd-guide-body>p{font-size:12px;color:#545454;line-height:1.6}
.prd-id-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.prd-id-list button{background:#fff;border:1px solid #d4dfe3;padding:10px;text-align:left;border-radius:4px;color:#17485f;cursor:pointer;line-height:1.45;font-size:11px}
.prd-id-list button:hover,.prd-id-list button:focus-visible{border-color:#c84c0e;text-decoration:underline}
.prd-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.prd-controls label{font-size:12px;font-weight:700;color:#444}
.prd-controls select{min-width:200px;max-width:360px;border:1px solid #b6bec1;background:#fff;padding:10px 12px;border-radius:3px;font-size:12px}
.prd-clamp{line-height:1.55;display:inline-block;max-width:590px;white-space:normal;font-size:12px}
.prd-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 17px}
.prd-subheading{margin:26px 0 13px;font-size:17px;color:#333}
.prd-review-foot{margin:30px 0 12px;padding:15px;border-left:3px solid #0b4b66;background:#eff5f8;color:#36515b;font-size:11px;line-height:1.6}
.prd-requirement-detail h3{font-size:14px;margin:18px 0 7px;color:#0b4b66}.prd-requirement-detail p{font-size:13px;line-height:1.75;margin:0 0 12px;white-space:pre-wrap}
.prd-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.prd-detail-grid>div{border:1px solid #e1e5e5;padding:12px;border-radius:4px}
.prd-detail-grid small{display:block;text-transform:uppercase;font-size:10px;color:#666;margin-bottom:7px}.prd-detail-grid strong{font-size:12px;overflow-wrap:anywhere}
.prd-stage-list{display:flex;gap:8px;margin:18px 0;overflow-x:auto}
.prd-stage-list>div{flex:1;min-width:115px;max-width:240px;border:1px solid #dfe3e4;border-top:3px solid #bec5c9;padding:11px;background:#fafafa;display:grid;gap:7px;font-size:11px}
.prd-stage-list>div.current{border-top-color:#c84c0e;background:#fff6ef}.prd-stage-list>div.finished{border-top-color:#00703c;background:#f3fcf7}
.prd-stage-list>div>span{font-weight:800;color:#0b4b66}.prd-stage-list>div>small{color:#626262}
.prd-history{border-left:3px solid #d7dddf;margin:8px 0;padding:7px 10px;background:#fafafa;font-size:12px}
.prd-history span{font-size:11px;color:#666;display:block}.prd-history p{margin:5px 0 0;line-height:1.5}
.prd-form .form-grid,#prd-review-form .form-grid,#prd-link-form .form-grid,#prd-permit-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:12px 0}
.prd-form .field,#prd-review-form .field,#prd-link-form .field,#prd-permit-form .field{margin:0}
.prd-form select,.prd-form input,.prd-form textarea,#prd-review-form select,#prd-review-form input,#prd-review-form textarea,#prd-link-form select,#prd-link-form textarea,#prd-permit-form select,#prd-permit-form input{width:100%;min-width:0}
.prd-form .field:has(textarea),#prd-review-form .field:has(textarea),#prd-link-form .field:has(textarea){grid-column:1/-1}
.prd-case-hint{padding:12px 14px;background:#f4f9fc;border-left:3px solid #0b4b66;font-size:12px;color:#456;line-height:1.5}
.prd-record-pairs{display:grid;gap:10px}
.prd-record-pairs>div{border-bottom:1px solid #eee;padding:9px 0}
.prd-record-pairs strong{font-size:12px;color:#0b4b66}.prd-record-pairs p{font-size:13px;line-height:1.7;margin:7px 0;color:#333}
@media(max-width:1100px){.prd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.prd-metrics,.prd-governance-grid,.prd-id-list,.prd-detail-grid,.prd-form .form-grid,#prd-review-form .form-grid,#prd-permit-form .form-grid,#prd-link-form .form-grid{grid-template-columns:1fr}.prd-stage-list{flex-direction:column}.prd-stage-list>div{max-width:none}.prd-g-meta{grid-template-columns:90px 1fr}.prd-tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:12px}.prd-tab{flex:0 0 auto;white-space:nowrap}.prd-controls select{width:100%}}
.prd-case-specific-heading{font-size:12px;font-weight:800;color:#0b4b66;text-transform:uppercase;letter-spacing:.6px;margin:20px 0 12px;border-bottom:1px solid #dce4e8;padding-bottom:10px}
#prd-case-specific>.muted{margin:10px 0 14px;line-height:1.7}
.prd-sample-values{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 19px}
.prd-sample-values>span{border:1px solid #d8e1e3;background:#f5fafb;padding:7px 9px;border-radius:3px;font-size:11px}
.prd-sample-values strong{color:#0b4b66;margin-right:5px}
.prd-integration-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:17px 0 20px}
.prd-integration-cards .prd-g-card{padding:15px}
.prd-integration-cards .prd-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.prd-checklist{display:grid;gap:9px;margin:14px 0}
.prd-checklist label{display:flex;align-items:flex-start;gap:12px;border:1px solid #ddd;padding:10px 12px;border-radius:3px;cursor:pointer;background:#fafafa;font-size:12px;line-height:1.55}
.prd-checklist input{margin-top:4px;accent-color:#c84c0e;flex:0 0 auto}
.prd-checklist strong{color:#0b4b66;padding-right:7px}
@media(max-width:1080px){.prd-integration-cards{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.prd-integration-cards{grid-template-columns:1fr}}

/* The PRD's governed records appear within the operational workspaces.
   Keep supplementary panels visually subordinate to the primary task view. */
.op-section { margin-top: 24px; overflow: hidden; }
.op-section-head { padding: 20px 24px; border-bottom: 1px solid var(--divider,#dedede); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.op-section-head h2 { margin:0 0 7px; font-size:18px; color:#363636; }
.op-section-head p {margin:0; max-width:750px; line-height:1.55;}
.op-section-head > .btn { flex-shrink:0; }
.op-section-body { padding:20px 24px 24px; }
.op-section-body > .card { box-shadow:none; border:1px solid #dedede; }
.op-section-body > .card + .card { margin-top:16px; }
.op-section .op-section-head button {margin:3px;}
.op-form-title {padding-top:10px; border-top:1px solid #e6e6e6; color:#363636; font-size:17px;}
.op-section .table-scroll{max-width:100%;overflow-x:auto;}
.op-section .prd-clamp{max-width:320px;display:inline-block;vertical-align:top;}
@media(max-width:760px){.op-section-head{display:block;padding:16px;}.op-section-head > button{margin-top:12px}.op-section-body{padding:12px}.op-section .table{min-width:720px}}

/* PRD operational field-completeness: keeps source attributes usable in their modules. */
.prd-full-shortcut{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border:1px solid #e3d0c5;border-left:4px solid #c84c0e;border-radius:6px;background:#fff9f5;margin:0 0 18px;color:#363636;font-size:13px}
.prd-full-shortcut a{color:#a93b08;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prd-full-panel{margin-top:22px;padding:22px}
.prd-full-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:20px}
.prd-full-head h2{font-size:21px;margin:5px 0 6px;color:#363636}
.prd-full-head p{font-size:13px;line-height:1.55;max-width:820px;margin:0;color:#555}
.prd-full-count{border-radius:5px;background:#fbeee8;color:#9a330b;font-weight:800;white-space:nowrap;padding:8px 12px}
.prd-full-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prd-full-schema{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px;border:1px solid #e1e2e4;border-radius:7px;background:white;min-width:0}
.prd-full-schema h3{font-size:15px;margin:0 0 4px}
.prd-full-schema p{font-size:12px;margin:0 0 4px;color:#555}
.prd-full-schema small{font-size:11px;color:#777;display:block;max-width:390px;line-height:1.4}
.prd-full-actions{display:flex;flex-direction:column;gap:7px;min-width:185px;max-width:215px}
.prd-full-actions select{max-width:100%;font-size:12px;min-height:36px}
.prd-full-minor{margin:18px 0 10px;font-size:15px}
.prd-draft-list{display:flex;flex-direction:column;gap:6px}
.prd-draft-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px;border:1px solid #e3e3e3;background:white;border-radius:5px;cursor:pointer;text-align:left;color:#363636;font-size:12px}
.prd-draft-row:hover{border-color:#c84c0e}
.prd-full-stats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.prd-full-stats span{background:#f2f3f4;border-radius:4px;padding:7px 11px;font-size:12px;font-weight:600}
.prd-full-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.prd-full-field{padding:14px;border:1px solid #dadde0;border-radius:6px;min-width:0;background:white}
.prd-full-field.locked{background:#f7f8f9}
.prd-full-field label{font-weight:750;display:block;margin-bottom:5px;font-size:13px;color:#363636}
.prd-full-field input,.prd-full-field textarea,.prd-full-field select{width:100%;margin-top:8px;background:white;color:#363636;min-height:37px}
.prd-full-field input[readonly]{background:#f0f0f0;color:#595959;cursor:not-allowed}
.prd-full-typing{display:flex;flex-wrap:wrap;gap:5px}
.prd-full-typing span{font-size:10px;color:#555;background:#edf1f3;border-radius:3px;padding:3px 5px}
.prd-full-explanation{margin-top:9px;border-top:1px dashed #d3d3d3;padding-top:8px}
.prd-full-explanation summary{font-size:11px;font-weight:600;color:#0b4b66;cursor:pointer}
.prd-full-explanation p{margin:8px 0 5px;font-size:12px;line-height:1.6;white-space:normal}
.prd-full-explanation small{font-size:10px;color:#666}
.prd-field-validation{font-size:12px;line-height:1.5;color:#952900;margin-top:8px}
.prd-field-validation ul{max-height:120px;overflow:auto}
.prd-full-history{margin:15px 0 0;padding:12px;border:1px solid #ddd;border-radius:6px}
.prd-revision{border-bottom:1px solid #eee;padding:10px 0;font-size:12px}
.prd-revision p{margin:3px 0}
.prd-full-panel .eyebrow{font-weight:800;color:#a33d0c;letter-spacing:.06em;font-size:10px}
.required-indicator{color:#b91900}
@media(max-width:1100px){.prd-full-catalog{grid-template-columns:1fr}}
@media(max-width:720px){.prd-full-shortcut,.prd-full-head,.prd-full-schema{flex-direction:column;align-items:stretch}.prd-full-grid{grid-template-columns:1fr}.prd-full-panel{padding:14px}.prd-full-actions{max-width:100%}}
.prd-full-detail-link{margin:0 0 15px;padding:12px;border-radius:5px;background:#fff9f5;border-left:3px solid #c84c0e}


/* PRD attributes: inline in operational Create, Edit and View surfaces. */
.integrated-section{margin:24px 0 5px;padding:18px;border:1px solid #d9e0e4;border-left:4px solid #c84c0e;border-radius:7px;background:#f8fafb}
.integrated-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.integrated-title h3{font-size:19px;margin:4px 0 7px;color:#363636}
.integrated-title p{font-size:13px;line-height:1.55;max-width:720px;margin:0;color:#535a60}
.integrated-total{color:#93340b;background:#fbeee8;padding:6px 10px;border-radius:4px;white-space:nowrap;font-size:12px;font-weight:750}
.integrated-schema{background:white;border:1px solid #dde2e6;border-radius:6px;margin-bottom:10px;overflow:hidden}
.integrated-schema>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;color:#0b4b66;font-size:14px}
.integrated-schema>summary::-webkit-details-marker{display:none}
.integrated-schema>summary::before{content:'▸';margin-right:8px;color:#c84c0e}
.integrated-schema[open]>summary::before{content:'▾'}
.integrated-schema>summary strong{margin-right:auto}
.integrated-schema>summary span{color:#626c70;font-size:12px}
.integrated-schema[open]>summary{border-bottom:1px solid #e1e4e7;background:#fff9f5}
.integrated-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:15px}
.integrated-attribute,.integrated-detail{min-width:0;background:#fff;border:1px solid #e1e5e8;border-radius:5px;padding:12px}
.integrated-attribute.is-system{background:#f5f5f5}
.integrated-attribute label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#363636}
.integrated-attribute input,.integrated-attribute select,.integrated-attribute textarea{width:100%;min-height:38px;margin:8px 0 5px}
.integrated-attribute input[readonly]{background:#eee;color:#4c5458}
.integrated-field-type,.integrated-detail small{display:block;color:#626c70;font-size:11px;margin:5px 0}
.integrated-description{font-size:12px;color:#555;line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere}
.integrated-value{font-size:13px;color:#26343d;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0}
.integrated-detail>div{display:flex;align-items:center;gap:8px;font-size:13px}
.integrated-note{margin-top:12px;font-size:12px;color:#5c4b3f}
@media(max-width:700px){.integrated-section{padding:12px}.integrated-field-grid{grid-template-columns:1fr;padding:9px}.integrated-title{flex-direction:column;gap:8px}.integrated-schema>summary{align-items:flex-start;flex-wrap:wrap}}

/* Full PRD fields are ordinary always-visible form controls, not an attributes panel. */
.form-section-heading{grid-column:1/-1;margin:18px 0 3px;padding:12px 0 8px;border-bottom:2px solid #e2e8eb}
.form-section-heading h3{font-size:17px;line-height:1.4;font-weight:750;color:#0b4b66;margin:0 0 3px}
.form-section-heading p{font-size:12px;color:#58666c;margin:0;line-height:1.5}
.normal-operational-field{min-width:0}
.normal-operational-field label{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:650}
.normal-operational-field input,.normal-operational-field textarea,.normal-operational-field select{width:100%;max-width:100%;min-height:40px;margin-top:7px}
.normal-operational-field input:focus-visible,.normal-operational-field textarea:focus-visible,.normal-operational-field select:focus-visible{outline:2px solid #0b4b66;outline-offset:1px}
.normal-operational-field .readonly-field{background:#f3f5f6;color:#5e6265;border-style:solid}
.normal-operational-field .form-field-guide{line-height:1.5;margin-top:7px;display:block}
.field-optional{font-weight:500;font-size:11px;color:#69777b}
.date-range-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:7px}
.date-range-fields label{display:block;font-size:12px;color:#4d565a}
.date-range-fields input{margin-top:4px;box-sizing:border-box}
.operational-view-fields{margin-bottom:18px}
@media(max-width:760px){.date-range-fields{grid-template-columns:1fr}.form-section-heading{margin-top:10px}}

.multi-check-select{width:100%;max-width:100%;min-height:40px;margin-top:7px;border:1px solid #cfd7dd;border-radius:6px;background:#fff;padding:10px 12px}
.multi-check-select:focus-within{outline:2px solid #0b4b66;outline-offset:1px;border-color:#0b4b66}
.multi-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.multi-check-option{display:flex;align-items:flex-start;gap:8px;border:1px solid #e2e7ea;border-radius:5px;padding:9px 10px;background:#fff;cursor:pointer;transition:border-color .15s ease, background .15s ease}
.multi-check-option:hover{border-color:#c84c0e;background:#fff8f3}
.multi-check-option input{width:16px;min-height:auto;height:16px;margin:2px 0 0;accent-color:#c84c0e;flex:0 0 auto}
.multi-check-option span{font-size:13px;line-height:1.35;color:#363636}
.multi-check-option input:checked + span{font-weight:700;color:#0b4b66}
@supports selector(label:has(input:checked)){
  .multi-check-option:has(input:checked){border-color:#c84c0e;background:#fff7f1}
}
@media(max-width:760px){.multi-check-list{grid-template-columns:1fr}}