:root {
  --paper: #f3f1eb;
  --paper-strong: #fbfaf7;
  --ink: #17211f;
  --muted: #6f7873;
  --line: #dedbd1;
  --forest: #163b3a;
  --forest-deep: #0f2928;
  --teal: #16836d;
  --teal-soft: #e1f1eb;
  --rust: #c15a44;
  --rust-soft: #fae8e3;
  --amber: #c28b36;
  --amber-soft: #f8efd9;
  --blue: #446a82;
  --blue-soft: #e6eef3;
  --violet: #6d6286;
  --shadow: 0 14px 40px rgba(28, 45, 40, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(22, 59, 58, 0.018) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 32px;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 248px;
  flex-direction: column;
  padding: 28px 18px 20px;
  background: var(--forest-deep);
  color: #f7f4ea;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 30px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px 4px 14px 4px;
  background: rgba(255, 255, 255, 0.08);
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-family: Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.14em;
}

.brand span {
  margin-top: 2px;
  color: #9fbbb3;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar nav {
  display: grid;
  gap: 5px;
}

.sidebar nav button {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a9bbb5;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

.sidebar nav button:hover,
.sidebar nav button.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fffdf5;
}

.sidebar nav button.active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 26px;
  border-radius: 0 3px 3px 0;
  background: #d5ad61;
  content: "";
}

.sidebar nav button > span {
  color: #d5ad61;
  font-size: 17px;
}

.sidebar nav button b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(213, 173, 97, 0.16);
  color: #efd6a4;
  font-size: 11px;
}

.sidebar-foot {
  margin-top: auto;
}

.workspace-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 18px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.workspace-label strong,
.workspace-label small {
  display: block;
}

.workspace-label strong {
  font-size: 12px;
}

.workspace-label small {
  margin-top: 3px;
  color: #869e97;
  font-size: 10px;
}

.workspace-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5ad0a5;
  box-shadow: 0 0 0 4px rgba(90, 208, 165, 0.12);
}

.profile {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 16px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile .avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #d5ad61;
  color: var(--forest-deep);
  font-size: 11px;
  font-weight: 750;
}

.profile strong,
.profile span {
  display: block;
}

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

.profile span {
  margin-top: 2px;
  color: #829b94;
  font-size: 9px;
  text-transform: uppercase;
}

.profile button {
  border: 0;
  background: transparent;
  color: #829b94;
}

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

.profile-actions a,
.profile-actions button {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #829b94;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
}

.profile-actions form {
  margin: 0;
}

.content {
  min-height: 100vh;
  margin-left: 248px;
  padding: 0 36px 48px;
}

.topbar {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.topbar p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.save-state {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 5px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.save-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 690;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.primary-button {
  border: 1px solid var(--forest);
  background: var(--forest);
  color: #fffdf6;
  box-shadow: 0 8px 18px rgba(22, 59, 58, 0.16);
}

.secondary-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 0 16px;
}

.kpi {
  position: relative;
  min-height: 146px;
  overflow: hidden;
  padding: 18px 19px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(251, 250, 247, 0.72);
}

.kpi::after {
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 112px;
  height: 112px;
  border: 18px solid color-mix(in srgb, var(--kpi-accent), transparent 86%);
  border-radius: 50%;
  content: "";
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kpi-top i {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--kpi-accent);
}

.kpi strong {
  display: block;
  margin-top: 18px;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.kpi p {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.kpi-accent-forest { --kpi-accent: #163b3a; }
.kpi-accent-teal { --kpi-accent: #16836d; }
.kpi-accent-rust { --kpi-accent: #c15a44; }
.kpi-accent-amber { --kpi-accent: #c28b36; }

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
  gap: 14px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(251, 250, 247, 0.77);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.panel-heading {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.panel-heading h2,
.queue-summary h2 {
  margin: 6px 0 0;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.attention-list {
  display: grid;
}

.attention-row {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) auto minmax(104px, 0.45fr) 18px;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid #e7e4dc;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.attention-row:last-child {
  border-bottom: 0;
}

.attention-row:hover {
  background: rgba(22, 59, 58, 0.025);
}

.unit-stamp {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px 6px 12px 6px;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
}

.stamp-near {
  background: var(--teal-soft);
  color: #116853;
}

.stamp-blocked {
  background: var(--rust-soft);
  color: #9d3d2b;
}

.attention-copy strong,
.attention-copy small {
  display: block;
}

.attention-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-copy small,
.attention-owner {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.status-pill {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}

.status-near {
  background: var(--teal-soft);
  color: #126751;
}

.status-progress {
  background: var(--blue-soft);
  color: #355f78;
}

.status-blocked {
  background: var(--rust-soft);
  color: #9a3f2d;
}

.status-gap {
  background: var(--amber-soft);
  color: #91651d;
}

.status-new {
  background: #eceae4;
  color: #5e6661;
}

.row-arrow {
  color: #9aa29e;
}

.pulse-panel {
  min-width: 0;
}

.live-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: #116853;
  font-size: 9px;
  font-weight: 750;
}

.activity-list {
  padding: 2px 18px 8px;
}

.activity {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  padding: 16px 0;
  border-bottom: 1px solid #e7e4dc;
}

.activity:last-child {
  border-bottom: 0;
}

.activity-unit {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
}

.activity strong,
.activity small {
  display: block;
}

.activity strong {
  font-size: 11px;
  font-weight: 630;
  line-height: 1.4;
}

.activity small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.pipeline-view {
  padding-top: 22px;
}

.pipeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
}

.search-box {
  display: flex;
  min-width: 280px;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.filter-chips button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
}

.filter-chips button.active {
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(205px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.pipeline-column {
  min-height: calc(100vh - 190px);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.28);
}

.pipeline-column > header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pipeline-column > header::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--column-color);
  content: "";
}

.pipeline-column > header span {
  flex: 1;
  padding-left: 8px;
}

.pipeline-column > header b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e8e5dd;
  font-size: 9px;
}

.column-slate { --column-color: #7a837f; }
.column-blue { --column-color: #527e99; }
.column-amber { --column-color: #c28b36; }
.column-violet { --column-color: #6d6286; }
.column-green { --column-color: #16836d; }

.column-cards {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.case-card {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid #dfdcd4;
  border-radius: 8px;
  background: var(--paper-strong);
  box-shadow: 0 3px 10px rgba(32, 48, 43, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border 140ms ease, transform 140ms ease;
}

.case-card:hover {
  transform: translateY(-1px);
  border-color: #c4c0b6;
}

.case-card-top,
.case-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.case-unit {
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}

.case-card > strong {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.35;
}

.case-card p {
  min-height: 42px;
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.mini-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e5dd;
}

.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
}

.progress-step-1 span { width: 6.6667%; }
.progress-step-2 span { width: 13.3333%; }
.progress-step-3 span { width: 20%; }
.progress-step-4 span { width: 26.6667%; }
.progress-step-5 span { width: 33.3333%; }
.progress-step-6 span { width: 40%; }
.progress-step-7 span { width: 46.6667%; }
.progress-step-8 span { width: 53.3333%; }
.progress-step-9 span { width: 60%; }
.progress-step-10 span { width: 66.6667%; }
.progress-step-11 span { width: 73.3333%; }
.progress-step-12 span { width: 80%; }
.progress-step-13 span { width: 86.6667%; }
.progress-step-14 span { width: 93.3333%; }
.progress-step-15 span { width: 100%; }

.case-card footer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 8px;
}

.empty-column {
  padding: 18px 4px;
  color: #a3aaa6;
  font-size: 10px;
  text-align: center;
}

.actions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  padding-top: 22px;
}

.date-chip {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ece9e1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.action-header,
.action-row {
  display: grid;
  grid-template-columns: 64px 110px minmax(260px, 1fr) 160px;
  align-items: center;
  gap: 12px;
}

.action-header {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.action-row {
  min-height: 70px;
  padding: 0 18px;
  border-bottom: 1px solid #e7e4dc;
  font-size: 10px;
}

.action-row:last-child {
  border-bottom: 0;
}

.action-row p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.action-row > span:last-child {
  color: var(--muted);
}

.priority {
  color: var(--rust);
  font-family: Georgia, serif;
  font-size: 15px;
}

.queue-summary {
  align-self: start;
  padding: 24px;
  background: var(--forest);
  color: #f7f4ea;
}

.queue-summary .eyebrow {
  color: #9fbdb4;
}

.queue-summary h2 {
  margin-top: 12px;
  font-size: 27px;
  line-height: 1.18;
}

.queue-summary ol {
  display: grid;
  gap: 9px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.queue-summary li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.queue-summary li span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #d5ad61;
  font-size: 9px;
}

.queue-summary p {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #a9bbb5;
  font-size: 10px;
  line-height: 1.6;
}

.drawer-layer,
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(8, 24, 22, 0.44);
  backdrop-filter: blur(2px);
}

.case-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(580px, 94vw);
  overflow-y: auto;
  background: var(--paper-strong);
  box-shadow: -24px 0 70px rgba(9, 28, 25, 0.18);
  animation: slide-in 220ms ease-out;
}

@keyframes slide-in {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.drawer-header {
  display: flex;
  min-height: 138px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 28px 20px;
  background: var(--forest-deep);
  color: #fffdf5;
}

.drawer-project {
  color: #91aca4;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drawer-header h2 {
  margin: 9px 0 4px;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}

.drawer-header p {
  margin: 0;
  color: #b2c3bd;
  font-size: 11px;
}

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  font-size: 20px;
}

.drawer-status {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}

.stage-card {
  display: grid;
  grid-template-columns: 1fr 72px;
  align-items: center;
  gap: 24px;
  margin: 22px 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f5f3ed;
}

.stage-copy > span,
.next-action > span,
.blocker-box > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stage-copy strong {
  display: block;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 20px;
}

.stage-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.stage-ring {
  position: relative;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--teal) var(--progress), #dedbd3 0);
}

.stage-ring::before {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f5f3ed;
  content: "";
}

.stage-ring span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 750;
}

.ring-step-1 { --progress: 24deg; }
.ring-step-2 { --progress: 48deg; }
.ring-step-3 { --progress: 72deg; }
.ring-step-4 { --progress: 96deg; }
.ring-step-5 { --progress: 120deg; }
.ring-step-6 { --progress: 144deg; }
.ring-step-7 { --progress: 168deg; }
.ring-step-8 { --progress: 192deg; }
.ring-step-9 { --progress: 216deg; }
.ring-step-10 { --progress: 240deg; }
.ring-step-11 { --progress: 264deg; }
.ring-step-12 { --progress: 288deg; }
.ring-step-13 { --progress: 312deg; }
.ring-step-14 { --progress: 336deg; }
.ring-step-15 { --progress: 360deg; }

.step-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0 28px 22px;
}

.step-item {
  min-height: 70px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.step-item > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #d5d2ca;
  border-radius: 50%;
  color: #8a918d;
  font-size: 8px;
}

.step-item strong,
.step-item small {
  display: block;
}

.step-item strong {
  margin-top: 8px;
  font-size: 8px;
  line-height: 1.3;
}

.step-item small {
  margin-top: 3px;
  color: var(--teal);
  font-size: 7px;
}

.step-complete {
  background: #f1f8f5;
}

.step-complete > span {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.step-active {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}

.step-active > span {
  border-color: var(--forest);
  color: var(--forest);
  font-weight: 800;
}

.step-future {
  opacity: 0.62;
}

.blocker-box {
  margin: 0 28px 18px;
  padding: 13px 15px;
  border-left: 3px solid var(--rust);
  background: var(--rust-soft);
}

.blocker-box > span {
  color: #9a3f2d;
}

.blocker-box p {
  margin: 5px 0 0;
  color: #71372b;
  font-size: 10px;
  line-height: 1.45;
}

.case-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 28px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.case-facts div {
  min-height: 64px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.case-facts div:nth-child(2n) {
  border-right: 0;
}

.case-facts div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.case-facts span,
.case-facts strong {
  display: block;
}

.case-facts span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.case-facts strong {
  margin-top: 7px;
  font-size: 10px;
}

.next-action {
  margin: 0 28px 90px;
  padding: 15px;
  border: 1px dashed #c8c3b8;
  border-radius: 8px;
}

.next-action p {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.drawer-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 15px 28px;
  border-top: 1px solid var(--line);
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: blur(12px);
}

.modal-layer {
  display: grid;
  place-items: center;
}

.new-case-modal {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.new-case-modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 26px 20px;
  background: var(--forest-deep);
  color: #fff;
}

.new-case-modal header h2 {
  margin: 8px 0 4px;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}

.new-case-modal header p {
  margin: 0;
  color: #a9bbb5;
  font-size: 10px;
}

.new-case-modal header .eyebrow {
  color: #d5ad61;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 24px 26px;
}

.form-grid label {
  display: grid;
  gap: 6px;
}

.form-grid label.wide {
  grid-column: 1 / -1;
}

.form-grid label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.form-grid input {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.form-grid input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(22, 59, 58, 0.08);
}

.new-case-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 15px 26px;
  border-top: 1px solid var(--line);
  background: #f4f2ec;
}

.loading-state {
  display: grid;
  min-height: 420px;
  place-items: center;
  align-content: center;
  gap: 15px;
  color: var(--muted);
  font-size: 11px;
}

.loading-state span {
  width: 28px;
  height: 28px;
  border: 3px solid #d8d5cc;
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: loading-spin 900ms linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  margin: 0;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.load-error {
  max-width: 520px;
  margin: 60px auto;
  padding: 30px;
  text-align: center;
}

.load-error > span {
  color: var(--rust);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.load-error h2 {
  margin: 10px 0 8px;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 500;
}

.load-error p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 15px;
  border-radius: 8px;
  background: var(--forest-deep);
  box-shadow: var(--shadow);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-error {
  background: #893c2d;
}

.auth-page {
  min-height: 100vh;
  background: var(--forest-deep);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(340px, 0.9fr) minmax(500px, 1.1fr);
}

.auth-brand-panel {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 52px 54px;
  background:
    radial-gradient(circle at 80% 20%, rgba(213, 173, 97, 0.13), transparent 34%),
    linear-gradient(145deg, #0b2221, var(--forest-deep));
  color: #fffdf5;
}

.auth-brand {
  padding: 0;
}

.auth-message {
  max-width: 500px;
}

.auth-message > span {
  color: #d5ad61;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-message h1 {
  margin: 17px 0 16px;
  font-family: Georgia, serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.auth-message p {
  max-width: 420px;
  margin: 0;
  color: #9fb4ae;
  font-size: 12px;
  line-height: 1.6;
}

.auth-form-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 36px;
  background: var(--paper);
}

.auth-card {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.auth-card h2 {
  margin: 9px 0 8px;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}

.auth-card > p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.auth-card label,
.admin-create label {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.auth-card label > span,
.admin-create label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.auth-card input,
.admin-create input,
.admin-create select,
.password-reset-form input {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.auth-card input:focus,
.admin-create input:focus,
.admin-create select:focus,
.password-reset-form input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(22, 59, 58, 0.08);
}

.auth-submit {
  width: 100%;
  margin-top: 22px;
}

.auth-card > small,
.admin-create > small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.form-alert,
.form-success {
  margin: 16px 0;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.45;
}

.form-alert {
  border: 1px solid #edc4ba;
  background: var(--rust-soft);
  color: #7d3628;
}

.form-success {
  border: 1px solid #b7dccc;
  background: var(--teal-soft);
  color: #125c4c;
}

.admin-page {
  min-height: 100vh;
  padding: 38px;
  background: var(--paper);
}

.admin-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.admin-header {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.admin-header h1 {
  margin: 8px 0 5px;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 500;
}

.admin-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  padding-top: 22px;
}

.admin-create {
  align-self: start;
  padding: 24px;
}

.admin-create h2 {
  margin: 8px 0 18px;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}

.admin-create .primary-button {
  width: 100%;
  margin-top: 20px;
}

.users-panel {
  min-width: 0;
}

.user-list {
  display: grid;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 80px minmax(340px, auto);
  min-height: 90px;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}

.user-row:last-child {
  border-bottom: 0;
}

.user-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}

.user-identity .avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
}

.user-identity strong,
.user-identity small {
  display: block;
}

.user-identity strong {
  font-size: 11px;
}

.user-identity small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.access-state {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
}

.access-active {
  background: var(--teal-soft);
  color: #126751;
}

.access-disabled {
  background: #eceae4;
  color: #6c736f;
}

.user-actions,
.password-reset-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.password-reset-form input {
  width: 190px;
  min-height: 39px;
}

.user-actions .secondary-button {
  white-space: nowrap;
}

.documents-view,
.reports-view {
  padding-top: 22px;
}

.document-summary,
.report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.document-summary .kpi,
.report-kpis .kpi {
  min-height: 126px;
}

.document-summary .kpi strong,
.report-kpis .kpi strong {
  margin-top: 13px;
  font-size: 29px;
}

.document-heading {
  min-height: 88px;
}

.document-search {
  min-width: 310px;
}

.document-panel {
  overflow: hidden;
}

.document-header,
.document-row {
  display: grid;
  grid-template-columns: 90px minmax(240px, 1.4fr) 90px 90px 130px 112px;
  align-items: center;
  gap: 12px;
}

.document-header {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.document-row {
  min-height: 76px;
  padding: 10px 18px;
  border-bottom: 1px solid #e7e4dc;
  font-size: 10px;
}

.document-row:last-child {
  border-bottom: 0;
}

.document-unit {
  justify-self: start;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: var(--teal-soft);
  color: #126751;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
}

.document-owner {
  min-width: 0;
}

.document-owner strong,
.document-owner small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-owner strong {
  font-size: 11px;
}

.document-owner small,
.document-row > span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.document-link {
  min-height: 34px;
  padding: 0 10px;
}

.document-missing {
  color: var(--rust) !important;
  font-weight: 700;
}

.report-toolbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.report-toolbar p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.report-toolbar > div:last-child {
  display: flex;
  gap: 8px;
}

.report-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-kpis .kpi strong {
  font-size: clamp(22px, 2.25vw, 30px);
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.8fr) minmax(440px, 1.2fr);
  gap: 14px;
}

.report-card {
  overflow: hidden;
}

.report-status-list {
  display: grid;
  gap: 15px;
  padding: 22px 20px;
}

.report-status-row {
  display: grid;
  grid-template-columns: 140px minmax(100px, 1fr) 24px 34px;
  align-items: center;
  gap: 10px;
}

.report-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}

.report-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.report-dot-near { background: var(--teal); }
.report-dot-progress { background: var(--blue); }
.report-dot-blocked { background: var(--rust); }
.report-dot-gap { background: var(--amber); }
.report-dot-new { background: #7a837f; }

.report-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e5dd;
}

.report-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
}

.bar-percent-0 { width: 0; }
.bar-percent-5 { width: 5%; }
.bar-percent-10 { width: 10%; }
.bar-percent-15 { width: 15%; }
.bar-percent-20 { width: 20%; }
.bar-percent-25 { width: 25%; }
.bar-percent-30 { width: 30%; }
.bar-percent-35 { width: 35%; }
.bar-percent-40 { width: 40%; }
.bar-percent-45 { width: 45%; }
.bar-percent-50 { width: 50%; }
.bar-percent-55 { width: 55%; }
.bar-percent-60 { width: 60%; }
.bar-percent-65 { width: 65%; }
.bar-percent-70 { width: 70%; }
.bar-percent-75 { width: 75%; }
.bar-percent-80 { width: 80%; }
.bar-percent-85 { width: 85%; }
.bar-percent-90 { width: 90%; }
.bar-percent-95 { width: 95%; }
.bar-percent-100 { width: 100%; }

.report-status-row > strong {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}

.report-status-row > small {
  color: var(--muted);
  font-size: 8px;
  text-align: right;
}

.report-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 20px;
}

.report-stage-card {
  min-height: 102px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-stage-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.report-stage-card span {
  font-size: 9px;
  font-weight: 700;
}

.report-stage-card strong {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
}

.report-bar-large {
  height: 4px;
  margin-top: 15px;
}

.report-stage-card small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 8px;
}

.report-register {
  margin-top: 14px;
  overflow: hidden;
}

.report-table-header,
.report-table-row {
  display: grid;
  grid-template-columns: 60px minmax(220px, 1.5fr) 130px 65px 140px minmax(130px, 0.8fr);
  align-items: center;
  gap: 12px;
}

.report-table-header {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-table-row {
  width: 100%;
  min-height: 58px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 1px solid #e7e4dc;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  text-align: left;
}

.report-table-row:hover {
  background: rgba(22, 59, 58, 0.025);
}

.report-table-row:last-child {
  border-bottom: 0;
}

.report-table-row > strong {
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: 13px;
}

.report-table-row > span:not(.status-pill) {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-grid,
  .actions-layout {
    grid-template-columns: 1fr;
  }

  .queue-summary {
    display: none;
  }

  .save-state {
    display: none;
  }

  .auth-shell {
    grid-template-columns: minmax(300px, 0.72fr) minmax(430px, 1fr);
  }

  .auth-brand-panel {
    padding: 34px;
  }

  .admin-grid {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  .user-row {
    grid-template-columns: minmax(180px, 1fr) 75px;
  }

  .report-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

  .document-panel,
  .report-register {
    overflow-x: auto;
  }

  .document-table {
    min-width: 940px;
  }

  .report-table {
    min-width: 850px;
  }

  .user-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    inset: auto 0 0;
    width: auto;
    height: 64px;
    flex-direction: row;
    padding: 7px 12px;
    box-shadow: 0 -8px 30px rgba(9, 28, 25, 0.15);
  }

  .brand,
  .sidebar-foot {
    display: none;
  }

  .sidebar nav {
    display: flex;
    width: 100%;
    justify-content: space-around;
  }

  .sidebar nav button {
    display: flex;
    min-width: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 4px;
    font-size: 8px;
  }

  .sidebar nav button b {
    display: none;
  }

  .sidebar nav button.active::before {
    inset: 0 auto auto;
    width: 28px;
    height: 2px;
  }

  .content {
    margin-left: 0;
    padding: 0 15px 88px;
  }

  .topbar {
    min-height: 132px;
    align-items: flex-start;
    padding: 20px 0;
  }

  .topbar-actions .secondary-button {
    display: none;
  }

  .topbar h1 {
    font-size: 27px;
  }

  .primary-button,
  .secondary-button {
    min-height: 38px;
    padding: 0 11px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 14px;
  }

  .kpi {
    min-height: 124px;
    padding: 14px;
  }

  .kpi strong {
    margin-top: 13px;
    font-size: 29px;
  }

  .attention-row {
    grid-template-columns: 38px 1fr 18px;
    min-height: 72px;
    padding: 0 12px;
  }

  .attention-row .status-pill,
  .attention-owner {
    display: none;
  }

  .overview-grid {
    gap: 10px;
  }

  .pipeline-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    min-width: 0;
  }

  .filter-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .filter-chips button {
    flex: 0 0 auto;
  }

  .pipeline-board {
    grid-template-columns: repeat(5, 260px);
  }

  .pipeline-column {
    min-height: 520px;
  }

  .action-panel {
    overflow-x: auto;
  }

  .action-table {
    min-width: 720px;
  }

  .case-drawer {
    width: 100%;
  }

  .drawer-header,
  .drawer-status,
  .stage-card,
  .step-track,
  .blocker-box,
  .case-facts,
  .next-action {
    margin-right: 18px;
    margin-left: 18px;
  }

  .drawer-header {
    margin: 0;
    padding: 22px 18px;
  }

  .drawer-status {
    margin: 0;
    overflow-x: auto;
    padding: 0 18px;
    white-space: nowrap;
  }

  .step-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .drawer-actions {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 12px 18px;
  }

  .drawer-actions > * {
    flex: 0 0 auto;
  }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 19px;
  }

  .form-grid label.wide {
    grid-column: auto;
  }

  .toast {
    right: 16px;
    bottom: 80px;
  }

  .auth-shell {
    display: block;
  }

  .auth-brand-panel {
    min-height: 220px;
    padding: 28px 24px;
  }

  .auth-brand {
    display: flex;
  }

  .auth-message h1 {
    margin: 12px 0 7px;
    font-size: 29px;
  }

  .auth-message p {
    display: none;
  }

  .auth-form-panel {
    min-height: calc(100vh - 220px);
    padding: 22px 15px;
  }

  .auth-card {
    padding: 25px 21px;
  }

  .admin-page {
    padding: 20px 14px;
  }

  .admin-header {
    min-height: 130px;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 0 20px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .user-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px;
  }

  .user-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .password-reset-form {
    align-items: stretch;
    flex-direction: column;
  }

  .password-reset-form input {
    width: 100%;
  }

  .document-summary,
  .report-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .document-summary .kpi:last-child {
    grid-column: 1 / -1;
  }

  .document-heading,
  .report-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .document-search {
    width: 100%;
    min-width: 0;
  }

  .report-stage-grid {
    grid-template-columns: 1fr;
  }

  .report-toolbar > div:last-child {
    width: 100%;
  }

  .report-toolbar > div:last-child > * {
    flex: 1;
  }
}

@media print {
  body {
    background: #fff;
  }

  .sidebar,
  .topbar,
  .toast,
  .report-toolbar > div:last-child {
    display: none !important;
  }

  .content {
    margin: 0;
    padding: 0;
  }

  .reports-view {
    padding: 0;
  }

  .panel,
  .kpi,
  .report-stage-card {
    break-inside: avoid;
    box-shadow: none;
  }

  .report-grid {
    grid-template-columns: 1fr 1fr;
  }

  .report-table-row {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   TitleFlow stage workflow, guidance and accessibility layer.
   Appended so the original visual language is preserved unchanged.
   ========================================================================== */

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

:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 2px;
border-radius: 6px;
}

.sidebar nav button:focus-visible,
.case-card:focus-visible,
.attention-row:focus-visible,
.action-row:focus-visible,
.report-table-row:focus-visible,
.step-item:focus-visible,
.checklist-toggle:focus-visible {
outline: 3px solid var(--teal);
outline-offset: -3px;
}

.primary-button,
.secondary-button,
.tertiary-button {
min-height: 44px;
}

.icon-button {
min-width: 44px;
min-height: 44px;
}

.filter-chips button,
.text-button {
min-height: 44px;
}

.tertiary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
border: 1px dashed var(--line);
border-radius: 10px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 13px;
cursor: pointer;
}

.tertiary-button:hover:not(:disabled) {
border-color: var(--rust);
color: var(--rust);
}

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

.view-hint {
margin: 0 0 14px;
color: var(--muted);
font-size: 13px;
}

.readonly-chip {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.facts-heading {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
}

.drawer-readonly-note {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--muted);
font-size: 13px;
font-style: italic;
}

.stage-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}

.stage-legend {
margin: 14px 26px 0;
padding: 10px 12px;
border-left: 3px solid var(--teal);
background: var(--teal-soft);
color: var(--forest);
font-size: 12.5px;
line-height: 1.5;
}

.step-track {
gap: 10px;
}

.step-item {
display: grid;
grid-template-columns: 26px 1fr;
grid-template-areas: "index body" "hint hint";
align-items: start;
gap: 4px 10px;
width: 100%;
min-height: 76px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper-strong);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.step-item:hover {
border-color: var(--teal);
box-shadow: 0 6px 18px rgba(22, 131, 109, 0.12);
}

.step-item .step-index {
grid-area: index;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--paper);
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.step-item .step-body {
grid-area: body;
display: flex;
flex-direction: column;
gap: 2px;
}

.step-item .step-body strong {
font-size: 13px;
line-height: 1.35;
color: var(--ink);
}

.step-item .step-meta,
.step-item .step-progress {
color: var(--muted);
font-size: 11px;
}

.step-item .step-guide-hint {
grid-area: hint;
margin-top: 4px;
color: var(--teal);
font-size: 11px;
font-weight: 600;
opacity: 0;
transition: opacity 0.18s ease;
}

.step-item:hover .step-guide-hint,
.step-item:focus-visible .step-guide-hint,
.step-item.step-open .step-guide-hint {
opacity: 1;
}

.step-item.step-complete .step-index {
background: var(--teal);
color: #fff;
}

.step-item.step-active {
border-color: var(--forest);
background: #fff;
}

.step-item.step-active .step-index {
background: var(--forest);
color: #fff;
}

.step-item.step-open {
border-color: var(--teal);
box-shadow: inset 0 0 0 1px var(--teal);
}

.archive-tag {
display: inline-block;
margin-top: 8px;
padding: 2px 8px;
border-radius: 999px;
background: var(--paper);
color: var(--muted);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.archive-banner {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 26px 14px;
padding: 14px 16px;
border: 1px solid var(--amber);
border-radius: 12px;
background: var(--amber-soft);
font-size: 12.5px;
line-height: 1.5;
}

.stage-guide {
margin: 18px 26px 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--paper-strong);
}

.guide-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}

.stage-guide h3 {
margin: 4px 0 0;
font-size: 17px;
line-height: 1.3;
}

.stage-guide h4 {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}

.guide-tag {
flex: 0 0 auto;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--paper);
color: var(--muted);
}

.guide-tag-current {
background: var(--forest);
color: #fff;
}

.guide-tag-done {
background: var(--teal-soft);
color: var(--teal);
}

.guide-purpose {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
}

.guide-owner {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
margin: 0 0 18px;
padding: 12px 14px;
border-radius: 10px;
background: var(--paper);
font-size: 13px;
}

.guide-owner dt {
color: var(--muted);
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.guide-owner dd {
margin: 0;
}

.guide-block {
margin-bottom: 18px;
}

.guide-list,
.guide-steps {
margin: 0;
padding-left: 20px;
font-size: 13px;
line-height: 1.65;
color: var(--ink);
}

.guide-list li,
.guide-steps li {
margin-bottom: 7px;
}

.guide-evidence li::marker {
color: var(--teal);
}

.guide-sources {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 12px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 12px;
}

.guide-sources > span {
color: var(--muted);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 10px;
}

.guide-sources a {
color: var(--teal);
text-decoration: underline;
text-underline-offset: 2px;
}

.guide-disclaimer {
margin: 0;
padding: 10px 12px;
border-radius: 8px;
background: var(--paper);
color: var(--muted);
font-size: 11.5px;
line-height: 1.55;
}

.checklist-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}

.checklist-progress {
color: var(--muted);
font-size: 11.5px;
}

.checklist-bar {
margin: 8px 0 12px;
}

.checklist {
margin: 0;
padding: 0;
list-style: none;
}

.checklist-item {
border-bottom: 1px solid var(--line);
}

.checklist-item:last-child {
border-bottom: 0;
}

.checklist-toggle {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 11px 4px;
border: 0;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}

.checklist-toggle:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.checklist-box {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: 1px;
border: 1.5px solid var(--muted);
border-radius: 6px;
background: #fff;
color: #fff;
font-size: 13px;
}

.checklist-toggle:hover .checklist-box {
border-color: var(--teal);
}

.checklist-item.is-done .checklist-box {
border-color: var(--teal);
background: var(--teal);
}

.checklist-label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 13px;
line-height: 1.5;
}

.checklist-item.is-done .checklist-label {
color: var(--muted);
}

.checklist-required,
.checklist-optional {
align-self: flex-start;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.checklist-required {
background: var(--rust-soft);
color: var(--rust);
}

.checklist-optional {
background: var(--paper);
color: var(--muted);
}

.checklist-label small {
color: var(--muted);
font-size: 11px;
}

.checklist-note,
.history-note {
margin: 10px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}

.stage-history {
margin: 18px 26px 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--paper-strong);
}

.stage-history h3 {
margin: 0;
font-size: 15px;
}

.history-list {
margin: 12px 0 0;
padding: 0;
list-style: none;
}

.history-item {
padding: 12px 0;
border-bottom: 1px solid var(--line);
}

.history-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}

.history-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 13px;
}

.history-item small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
}

.history-reason,
.history-override {
margin: 7px 0 0;
padding: 8px 10px;
border-radius: 8px;
background: var(--paper);
font-size: 12.5px;
line-height: 1.5;
}

.history-override {
background: var(--amber-soft);
color: #6b4c14;
}

.history-tag {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
background: var(--paper);
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.history-tag-fwd {
background: var(--teal-soft);
color: var(--teal);
}

.history-tag-back {
background: var(--amber-soft);
color: #6b4c14;
}

.modal-stacked {
z-index: 60;
}

.dialog-panel {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 16px;
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 24px;
border-radius: 16px;
background: var(--paper-strong);
box-shadow: 0 30px 80px rgba(15, 41, 40, 0.28);
}

.dialog-narrow {
width: min(460px, calc(100vw - 32px));
}

.dialog-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}

.dialog-header h2 {
margin: 4px 0 0;
font-size: 20px;
line-height: 1.25;
}

.dialog-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0;
padding: 14px;
border-radius: 12px;
background: var(--paper);
}

.dialog-summary > div {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}

.dialog-summary dt {
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.dialog-summary dd {
margin: 0;
font-size: 13px;
line-height: 1.45;
}

.direction-tag {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
background: var(--paper-strong);
color: var(--muted);
}

.direction-forward {
background: var(--teal-soft);
color: var(--teal);
}

.direction-backward {
background: var(--amber-soft);
color: #6b4c14;
}

.dialog-consequences {
padding: 14px;
border: 1px solid var(--line);
border-radius: 12px;
}

.dialog-consequences h3 {
margin: 0 0 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}

.dialog-consequences ul {
margin: 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.6;
}

.dialog-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
}

.dialog-field > span {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.dialog-field em {
color: var(--rust);
font-style: normal;
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.dialog-field textarea,
.dialog-field select {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 14px;
color: var(--ink);
resize: vertical;
}

.dialog-field textarea:focus,
.dialog-field select:focus {
border-color: var(--teal);
outline: 2px solid var(--teal-soft);
}

.dialog-warning {
padding: 14px;
border: 1px solid var(--amber);
border-radius: 12px;
background: var(--amber-soft);
font-size: 13px;
line-height: 1.55;
}

.dialog-warning ul {
margin: 8px 0 12px;
padding-left: 18px;
}

.dialog-note {
margin: 8px 0 0;
color: #6b4c14;
font-size: 12.5px;
}

.dialog-error,
.field-error {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: var(--rust-soft);
color: var(--rust);
font-size: 12.5px;
line-height: 1.5;
}

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

.form-grid label.has-error input {
border-color: var(--rust);
}

.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 4px;
}

.action-row {
display: grid;
grid-template-columns: 46px 88px minmax(0, 1fr) 190px 150px;
align-items: center;
gap: 14px;
width: 100%;
min-height: 64px;
padding: 12px 16px;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.18s ease;
}

.action-row:hover {
background: var(--paper);
}

.action-row .action-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12.5px;
}

.action-row .action-meta small {
color: var(--muted);
font-size: 11px;
}

.action-header {
grid-template-columns: 46px 88px minmax(0, 1fr) 190px 150px;
}

.toast {
display: flex;
align-items: center;
gap: 14px;
}

.toast-undo {
flex: 0 0 auto;
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}

.toast-undo:hover {
background: rgba(255, 255, 255, 0.16);
}

.guide-loading {
color: var(--muted);
font-size: 13px;
}

@media (max-width: 760px) {
.sidebar {
height: 68px;
}

.sidebar nav button {
min-width: 60px;
min-height: 52px;
font-size: 10.5px;
line-height: 1.2;
}

.sidebar nav button > span {
font-size: 15px;
}

.primary-button,
.secondary-button,
.tertiary-button {
min-height: 44px;
padding: 0 14px;
}

.topbar-actions .secondary-button {
display: inline-flex;
}

.content {
padding: 0 15px 96px;
}

.stage-legend,
.stage-guide,
.stage-history,
.archive-banner {
margin-right: 18px;
margin-left: 18px;
}

.stage-guide,
.stage-history {
padding: 16px;
}

.step-track {
grid-template-columns: minmax(0, 1fr);
}

.step-item {
min-height: 64px;
}

.step-item .step-guide-hint {
opacity: 1;
}

.stage-actions {
flex-direction: column;
align-items: stretch;
}

.drawer-actions {
flex-wrap: wrap;
overflow-x: visible;
}

.drawer-actions > * {
flex: 1 1 auto;
}

.dialog-panel {
width: calc(100vw - 24px);
max-height: calc(100vh - 32px);
padding: 18px;
}

.dialog-summary {
grid-template-columns: 1fr;
}

.dialog-actions {
flex-direction: column-reverse;
}

.dialog-actions > * {
width: 100%;
}

.action-row,
.action-header {
grid-template-columns: 40px 76px minmax(0, 1fr);
}

.action-row .action-meta,
.action-row .status-pill,
.action-header > span:nth-child(4),
.action-header > span:nth-child(5) {
display: none;
}

.action-table {
min-width: 0;
}

.action-panel {
overflow-x: visible;
}

.guide-owner {
grid-template-columns: 1fr;
}

.toast {
left: 16px;
right: 16px;
bottom: 84px;
}
}

@media print {
.stage-guide,
.stage-history,
.stage-legend,
.drawer-layer,
.modal-layer {
display: none !important;
}
}

.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 18px;
border-radius: 0 0 10px 0;
background: var(--forest-deep);
color: #fff;
font-size: 13px;
text-decoration: none;
}

.skip-link:focus {
left: 0;
}

/* ============================================================
   UI acceptance v1.3.0
   Stage cards size themselves to the DRAWER width (so browser zoom
   and narrow drawers are handled), not just the outer viewport.
   Replaces the v1.2.1 - v1.2.3 patches, which included three
   malformed media blocks that the CSS parser discarded.
   ============================================================ */

.step-track-shell {
  container-type: inline-size;
  container-name: stagetrack;
  margin: 0 28px 22px;
}

.step-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 150px;
  padding: 12px;
  overflow: hidden;
  text-align: left;
}

.step-item > .step-index {
  align-self: flex-start;
  flex: 0 0 auto;
}

/* the early rule .step-item > span turns every direct span into a
   21px circle; the body and hint spans must opt out of that. */
.step-item > .step-body,
.step-item > .step-guide-hint {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  place-items: normal;
  font-weight: inherit;
}

.step-item > .step-body strong {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.step-item > .step-body .step-meta,
.step-item > .step-body .step-progress {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
}

.step-item > .step-guide-hint {
  margin-top: auto;
  padding-top: 6px;
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-item.step-active > .step-guide-hint {
  color: var(--forest);
}

/* Drawer-width breakpoints. 3 columns on a standard 580px drawer,
   2 then 1 as the drawer (or the zoom level) narrows. */
@container stagetrack (max-width: 430px) {
  .step-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .step-item {
    min-height: 138px;
  }
}

@container stagetrack (max-width: 290px) {
  .step-track {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-item {
    min-height: 96px;
  }
  .step-item > .step-guide-hint {
    padding-top: 2px;
  }
}

@media (max-width: 720px) {
  .step-track-shell {
    margin: 0 18px 18px;
  }
}

/* Fallback for engines without container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .step-track {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 480px) {
    .step-track {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* ------------------------------------------------------------
   UI acceptance v1.3.1
   Drawer case record heading and the spacing that sits between
   the immediate next action box and the stage guide.
   ------------------------------------------------------------ */

.case-facts > .facts-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.case-facts .readonly-chip {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
}

.next-action {
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   UI acceptance v1.3.3
   Phone-width overflow: a 1fr grid track keeps its automatic
   min-content minimum, so the overview panel and the attention
   rows forced the page wider than the viewport. minmax(0, 1fr)
   plus min-width: 0 lets the truncating text shrink properly.
   ------------------------------------------------------------ */

.attention-copy,
.attention-copy strong,
.attention-copy small {
  min-width: 0;
}

@media (max-width: 1100px) {
  .overview-grid,
  .actions-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .attention-row {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }
}
/* v1.3.2 modal owns viewport */ .modal-layer.modal-stacked{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;display:grid!important;place-items:center!important;padding:24px!important;overflow:auto!important;background:rgba(4,28,25,.64)!important}.modal-stacked>.dialog-panel{position:relative!important;z-index:1!important;width:min(680px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px)!important;overflow:auto!important;margin:auto!important}body:has(.modal-stacked) .drawer-layer{visibility:hidden!important;pointer-events:none!important}/* v1.3.3 suppress drawer while stage dialog is active */ body:has(.modal-stacked) .case-drawer{visibility:hidden!important;pointer-events:none!important}body:has(.modal-stacked) .drawer-layer>.drawer-scrim{visibility:hidden!important;pointer-events:none!important}body:has(.modal-stacked) .modal-stacked{visibility:visible!important;pointer-events:auto!important}