:root {
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --ink: #17201d;
  --muted: #69736d;
  --line: #ded7c9;
  --teal: #176b64;
  --teal-dark: #0d3f3b;
  --coral: #c5452f;
  --amber: #d69225;
  --blue: #0b2a3b;
  --shadow: 0 18px 50px rgba(23, 32, 29, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.78), rgba(244, 241, 234, 0.96)),
    repeating-linear-gradient(90deg, rgba(23, 107, 100, 0.05) 0 1px, transparent 1px 96px);
}

button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #63d7c9;
  outline-offset: 2px;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
}

select,
input {
  min-height: 42px;
}

textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.42;
}

code,
pre {
  font-family: "Cascadia Mono", Consolas, monospace;
}

.hero,
.layout,
.section-nav {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  padding: 28px 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: stretch;
}

.hero > div,
.safety-card,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--shadow);
}

.hero > div {
  padding: clamp(24px, 5vw, 46px);
  background:
    linear-gradient(135deg, rgba(11, 42, 59, 0.94), rgba(13, 63, 59, 0.9)),
    var(--blue);
  color: #fffdf8;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.hero p {
  max-width: 820px;
  margin: 18px 0 0;
  color: rgba(255, 253, 248, 0.82);
  font-size: 1.08rem;
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 8px;
  color: #63d7c9;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.safety-card {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 12px;
  border-left: 5px solid var(--teal);
}

.safety-card strong {
  font-size: 1.15rem;
}

.safety-card span {
  color: var(--muted);
  line-height: 1.42;
}

.section-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 10px 26px rgba(23, 32, 29, 0.1);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-nav a {
  min-height: 36px;
  border-radius: 8px;
  background: #e7f2ef;
  color: var(--teal-dark);
  padding: 9px 11px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 900;
}

.layout {
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
  gap: 14px;
  align-items: start;
}

.layout > * {
  min-width: 0;
}

.panel {
  padding: 18px;
  scroll-margin-top: 82px;
}

.stage-panel,
.snapshot-panel {
  grid-column: 1 / -1;
}

.federated-panel,
.master-record-panel,
.cyber-panel,
.assistant-panel,
.field-panel,
.procedure-panel,
.ledger-panel {
  grid-column: 1 / -1;
}

.federation-principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: stretch;
}

.federation-principle h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.federation-principle p,
.warning-copy {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.48;
}

.scenario-picker {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 14px;
}

.scenario-picker label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scenario-picker p {
  margin: 10px 0 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

h2 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.section-title span,
.model-card small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lead {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.strong-warning {
  border-left: 4px solid var(--coral);
  border-radius: 8px;
  background: #fff2ed;
  padding: 10px 12px;
  color: #6f2418;
  font-weight: 850;
}

.checks {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.checks article,
.model-card,
.detail-grid article,
.compare-grid article,
.console-card,
.split-grid article,
.master-record article,
.assistant-result-grid article,
.assistant-block,
.human-review,
.access-result {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 14px;
}

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

.checks span {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.35;
}

.model-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.model-card {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 5px;
}

.model-card.active {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.console-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.console-card {
  min-height: 220px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.console-card.priority {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.console-card strong,
.console-card span,
.console-card small {
  display: block;
}

.console-card strong {
  font-size: 1rem;
}

.console-card span {
  color: var(--muted);
  line-height: 1.32;
}

.console-card small,
.pill {
  width: fit-content;
  border-radius: 999px;
  background: #e7f2ef;
  color: var(--teal-dark);
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.console-actions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.console-actions-list em {
  border-radius: 999px;
  background: #ece6d9;
  padding: 4px 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.action-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-row button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--teal);
  color: #fff;
  font-weight: 850;
}

.action-row button:nth-child(even) {
  background: #ece6d9;
  color: var(--ink);
}

.assistant-flow {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.assistant-flow span {
  min-height: 42px;
  border-radius: 8px;
  background: #e7f2ef;
  color: var(--teal-dark);
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-weight: 900;
}

.compact-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.procedure-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.procedure-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.procedure-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 14px;
}

.mini-record {
  display: grid;
  gap: 8px;
}

.mini-record p,
.mini-record span {
  margin: 0;
  color: var(--muted);
  line-height: 1.38;
}

.mini-record strong {
  color: var(--ink);
}

.meter {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #ece6d9;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral));
}

.finding-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 7px;
  margin-right: 6px;
  background: #e7f2ef;
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 900;
}

.finding-badge.blocking {
  background: #fff1ed;
  color: var(--coral);
}

.finding-badge.warning {
  background: #fff7e5;
  color: #7a4d00;
}

.print-preview {
  max-height: 260px;
}

.perspective-panel,
.citizen-panel {
  grid-column: 1 / -1;
}

.perspective-controls {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.perspective-header {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbf6eb;
  padding: 14px;
}

.perspective-icon {
  width: 58px;
  min-height: 58px;
  border-radius: 12px;
  background: var(--teal-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.perspective-header h3 {
  margin-bottom: 6px;
  font-size: 1.5rem;
}

.perspective-header p {
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.35;
}

.state-preserved {
  display: grid;
  gap: 6px;
  align-content: center;
  border-left: 4px solid var(--teal);
  padding-left: 12px;
}

.state-preserved span {
  color: var(--muted);
  font-weight: 800;
}

.permission-grid,
.perspective-workspace,
.citizen-layout {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

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

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

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

.permission-grid article,
.perspective-workspace article,
.citizen-layout article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 14px;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-grid span {
  border-radius: 999px;
  background: #e7f2ef;
  color: var(--teal-dark);
  padding: 6px 8px;
  font-size: 0.73rem;
  font-weight: 900;
}

.warning-chips span {
  background: #fff7e5;
  color: #6c4708;
}

.contextual-actions button[hidden] {
  display: none;
}

.compact-lead {
  margin: 0 0 10px;
  font-size: 0.88rem;
}

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

.feedback-grid label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.small-actions {
  margin-top: 10px;
}

.small-actions button {
  min-height: 38px;
  font-size: 0.82rem;
}

.assistant-backend-panel {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(180px, 1fr) minmax(240px, 1.4fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
  gap: 10px;
  align-items: stretch;
}

.assistant-backend-panel article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.assistant-backend-panel article span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.assistant-backend-panel article strong,
.backend-status {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.25;
}

.backend-status {
  padding-left: 10px;
  border-left: 4px solid var(--line);
}

.backend-status.online {
  border-left-color: var(--teal);
}

.backend-status.simulated {
  border-left-color: #68807a;
}

.backend-status.offline {
  border-left-color: var(--amber);
}

.backend-warning {
  margin-top: 12px;
  border-left: 4px solid var(--teal);
  background: #e7f2ef;
  padding: 12px;
}

.field-workbench {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.field-phone {
  border: 12px solid #17201d;
  border-radius: 28px;
  background: #f9f6ee;
  padding: 12px;
  box-shadow: 0 18px 48px rgba(23, 32, 29, 0.18);
}

.phone-topbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.field-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.94);
  padding: 14px;
}

.field-card + .field-card,
.status-flow + .field-card {
  margin-top: 10px;
}

.field-card.primary {
  border-left: 4px solid var(--teal);
}

.field-card label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-title {
  align-items: start;
}

.compact-title h3 {
  margin-bottom: 0;
}

.field-meta-grid,
.field-assignment,
.field-comparison {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.field-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-meta-grid span,
.field-assignment span,
.field-comparison span {
  border-radius: 8px;
  background: #e7f2ef;
  color: var(--teal-dark);
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

.status-flow {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.status-flow span {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.status-flow span.done {
  border-color: var(--teal);
  background: #e7f2ef;
  color: var(--teal-dark);
}

.status-flow span.current {
  border-color: var(--coral);
  background: #fff1ed;
  color: var(--coral);
}

.field-action-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-action-grid button {
  min-height: 44px;
  border-radius: 8px;
  padding: 8px;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.field-action-grid button:nth-child(2),
.field-action-grid button:nth-child(8) {
  background: var(--coral);
}

.field-message {
  margin: 10px 0 0;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  padding: 10px;
  color: #5a3c05;
  line-height: 1.35;
}

.field-console {
  display: grid;
  gap: 12px;
}

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

.compact-list {
  margin: 12px 0 0;
  padding-left: 20px;
}

.compact-list li {
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.4;
}

.compact-list strong,
.act-preview strong {
  color: var(--ink);
}

.act-preview {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.act-preview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

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

.assistant-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: 14px;
  align-items: start;
}

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

.assistant-form.compact {
  margin-top: 12px;
}

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

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

.form-row label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.assistant-output {
  display: grid;
  gap: 10px;
}

.assistant-result-grid,
.human-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.human-review-grid {
  margin-top: 14px;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.assistant-result-grid span,
.assistant-block h3,
.human-review h3 {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.assistant-result-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 1.5rem;
}

.assistant-block p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.45;
}

.review-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.review-actions button {
  min-height: 42px;
  border-radius: 8px;
  padding: 8px;
  background: var(--teal);
  color: #fff;
  font-weight: 850;
}

.review-actions button:nth-child(2) {
  background: #ece6d9;
  color: var(--ink);
}

.review-actions button:nth-child(3) {
  background: var(--coral);
}

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

.console-checkboxes label {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: none;
}

.console-checkboxes input {
  width: 16px;
  min-height: 16px;
}

.comparison-box {
  display: grid;
  gap: 8px;
}

.comparison-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.comparison-box strong {
  color: var(--ink);
}

.split-grid,
.master-record {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.master-record strong,
.access-result strong {
  display: block;
  margin-bottom: 6px;
}

.access-result {
  margin-top: 12px;
}

.access-result.allowed {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.access-result.denied {
  border-color: var(--coral);
  box-shadow: inset 4px 0 0 var(--coral);
}

.model-card strong {
  font-size: 1rem;
}

.model-card span {
  color: var(--muted);
  line-height: 1.35;
}

.detail-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

ul,
ol {
  margin: 0;
  padding-left: 20px;
}

li + li {
  margin-top: 7px;
}

li {
  color: var(--muted);
  line-height: 1.35;
}

.timeline {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.timeline li {
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbf6eb;
  padding: 12px;
}

.timeline strong,
.timeline span,
.ledger-list strong,
.ledger-list span {
  display: block;
}

.timeline span {
  margin-top: 4px;
  color: var(--muted);
}

.ledger-list {
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ledger-list li {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 12px;
}

.ledger-list span {
  margin-top: 4px;
  color: var(--muted);
}

.ledger-list code {
  display: inline-block;
  max-width: 100%;
  margin-top: 5px;
  color: var(--teal-dark);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.compare-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.compare-grid span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.compare-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 1.8rem;
}

.compare-grid p {
  margin: 5px 0 0;
  color: var(--muted);
}

.security-panel,
.evidence-panel {
  grid-column: 1 / -1;
}

.transport-status,
.control-grid,
.vault-grid,
.retention-grid {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.transport-status {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

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

.vault-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transport-card,
.control-grid article,
.vault-card,
.retention-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf6eb;
  padding: 14px;
}

.transport-card.local_development {
  border-left: 4px solid var(--amber);
}

.transport-card.https_protected {
  border-left: 4px solid var(--teal);
}

.transport-card.transport_not_verified {
  border-left: 4px solid var(--coral);
}

.transport-card span,
.control-grid article span,
.vault-card span,
.retention-grid article span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.transport-card strong,
.control-grid article strong,
.vault-card strong,
.retention-grid article strong {
  display: block;
  margin-top: 5px;
  font-size: 1.02rem;
}

.transport-card p,
.control-grid article p,
.vault-card p,
.retention-grid article p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.38;
}

.control-grid article small,
.retention-grid article small {
  display: block;
  margin-top: 8px;
  color: var(--teal-dark);
  font-weight: 850;
  line-height: 1.32;
}

.vault-card {
  position: relative;
}

.vault-card.selected {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.vault-card > button {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 34px;
  border-radius: 8px;
  background: #ece6d9;
  color: var(--ink);
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 900;
}

.vault-card .mini-record {
  margin-top: 10px;
}

.vault-actions[hidden] {
  display: none;
}

.decision-reason {
  margin: 12px 0 0;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  padding: 12px;
  color: #5a3c05;
  line-height: 1.42;
}

pre {
  max-width: 100%;
  max-height: 420px;
  margin: 14px 0 0;
  overflow: auto;
  border-radius: 10px;
  background: #17201d;
  color: #dff8f4;
  padding: 16px;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panel,
.panel *,
.assistant-output,
.comparison-box {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .section-nav {
    position: static;
  }

  .panel {
    scroll-margin-top: 18px;
  }

  .hero,
  .layout,
  .section-nav {
    width: min(100% - 20px, 760px);
    grid-template-columns: 1fr;
  }

  .checks,
  .detail-grid,
  .compare-grid,
  .federation-principle,
  .assistant-flow,
  .assistant-backend-panel,
  .assistant-grid,
  .field-workbench,
  .field-grid,
  .field-form-grid,
  .field-comparison,
  .procedure-grid,
  .procedure-grid.two-col,
  .assistant-form,
    .assistant-result-grid,
    .perspective-controls,
    .perspective-header,
    .permission-grid,
    .perspective-workspace,
    .citizen-layout,
    .transport-status,
    .control-grid,
    .vault-grid,
    .retention-grid,
    .human-review-grid,
  .review-actions,
  .console-checkboxes,
  .console-grid,
  .split-grid,
  .master-record {
    grid-template-columns: 1fr;
  }

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

/* Etapa 6C.0: product-first citizen activation experience. */
#pipoCitizenExperience,
#pipoOperationalJourney,
.pipo-legacy-details {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
}

#pipoCitizenExperience {
  padding-top: 24px;
}

.pipo-product {
  display: grid;
  gap: 18px;
  padding-bottom: 18px;
}

.pipo-product-hero,
.pipo-activation-section,
.pipo-live-session,
.pipo-reception,
.pipo-ai-notice,
.pipo-ledger-section,
.pipo-guidance-strip,
.pipo-legacy-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--shadow);
}

.pipo-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 28px;
  padding: clamp(24px, 4vw, 48px);
  border-top: 6px solid var(--teal);
}

.pipo-kicker {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pipo-product h1,
.pipo-product h2,
.pipo-product h3,
.pipo-product p {
  overflow-wrap: anywhere;
}

.pipo-product h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.pipo-tagline {
  max-width: 800px;
  margin: 14px 0 0;
  color: var(--teal-dark);
  font-size: clamp(1.15rem, 2.8vw, 1.8rem);
  font-weight: 850;
  line-height: 1.2;
}

.pipo-description {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.55;
}

.pipo-hero-actions,
.pipo-primary-nav,
.pipo-session-actions,
.pipo-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pipo-hero-actions {
  margin-top: 22px;
}

.pipo-product button,
.pipo-primary-nav a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  padding: 10px 14px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.pipo-product button:hover,
.pipo-primary-nav a:hover {
  background: var(--teal-dark);
}

.pipo-product button.is-secondary,
.pipo-primary-nav a {
  border-color: var(--line);
  background: #ece6d9;
  color: var(--ink);
}

.pipo-product button.is-secondary:hover,
.pipo-primary-nav a:hover {
  border-color: var(--teal);
  background: #e0efeb;
  color: var(--teal-dark);
}

.pipo-product button.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--teal-dark);
  text-decoration: underline;
}

.pipo-product button.is-danger {
  background: var(--coral);
}

.pipo-product button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.pipo-product-controls {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 8px;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  padding: 18px;
}

.pipo-product-controls label {
  color: var(--teal-dark);
  font-size: 0.83rem;
  font-weight: 900;
}

.pipo-product-controls select {
  min-height: 44px;
  margin-bottom: 8px;
}

.pipo-product-controls p {
  margin: 8px 0 0;
  color: #5a3c05;
  font-size: 0.87rem;
  line-height: 1.45;
}

.pipo-primary-nav {
  position: sticky;
  top: 8px;
  z-index: 10;
  overflow-x: auto;
  flex-wrap: nowrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 10px 26px rgba(23, 32, 29, 0.1);
  padding: 8px;
}

.pipo-primary-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.pipo-activation-section,
.pipo-live-session,
.pipo-reception,
.pipo-ai-notice,
.pipo-ledger-section {
  scroll-margin-top: 80px;
  padding: clamp(20px, 3vw, 30px);
}

.pipo-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.pipo-section-heading h2,
.pipo-ai-notice h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: 0;
}

.pipo-section-heading > p,
.pipo-ai-notice > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.pipo-device-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 5vw, 72px);
}

.pipo-phone {
  position: relative;
  width: min(100%, 420px);
  min-height: 570px;
  margin: 0 auto;
  overflow: visible;
  border: 10px solid #17201d;
  border-radius: 28px;
  background: #f7f3ea;
  box-shadow: 0 18px 35px rgba(23, 32, 29, 0.22);
}

.pipo-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 16px;
  color: #fff;
  background: #17201d;
  font-size: 0.78rem;
  font-weight: 800;
}

.pipo-phone-app {
  min-height: 522px;
  padding: 22px 16px;
  background: #fffdf8;
}

.pipo-phone-app > strong {
  display: block;
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 1.15rem;
}

.pipo-search {
  display: block;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f1ea;
  padding: 11px 12px;
  color: var(--muted);
}

.pipo-chat-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  border-bottom: 1px solid #eee8dc;
  padding: 12px 0;
}

.pipo-chat-line i {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--teal);
}

.pipo-chat-line:nth-of-type(4) i { background: var(--amber); }
.pipo-chat-line:nth-of-type(5) i { background: var(--coral); }

.pipo-chat-line span {
  min-width: 0;
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 800;
}

.pipo-chat-line small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.pipo-quick-access {
  position: absolute;
  top: 50%;
  right: -31px;
  z-index: 2;
  width: 62px;
  min-width: 62px;
  height: 62px;
  min-height: 62px;
  border: 6px solid #fffdf8;
  border-radius: 50%;
  background: var(--coral) !important;
  box-shadow: 0 0 0 8px rgba(197, 69, 47, 0.16), 0 12px 24px rgba(23, 32, 29, 0.25);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 950;
}

.pipo-quick-access:hover { background: #a93321 !important; }

.pipo-device-caption {
  position: absolute;
  right: -88px;
  bottom: 22px;
  max-width: 165px;
  border-left: 3px solid var(--coral);
  background: #fffdf8;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

.pipo-quick-menu {
  position: absolute;
  z-index: 3;
  top: 58px;
  right: -220px;
  display: grid;
  width: 260px;
  grid-template-columns: 1fr;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 36px rgba(23, 32, 29, 0.25);
  padding: 10px;
}

.pipo-quick-menu[hidden] { display: none; }

.pipo-quick-menu button {
  min-height: 38px;
  background: #f1ece2;
  color: var(--ink);
  font-size: 0.88rem;
}

.pipo-quick-menu button:hover { background: #e0efeb; }

.pipo-product-definition {
  max-width: 560px;
  border-left: 4px solid var(--teal);
  padding-left: 20px;
}

.pipo-product-definition p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.pipo-product-definition .pipo-definition-emphasis {
  margin-bottom: 16px;
  color: var(--teal-dark);
  font-size: 1.15rem;
  font-weight: 850;
}

.pipo-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  border: 1px solid #d4e7e2;
  border-radius: 999px;
  background: #e7f2ef;
  padding: 8px 11px;
  color: var(--teal-dark);
  font-size: 0.83rem;
  font-weight: 900;
}

.pipo-demo-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.pipo-live-message {
  min-height: 24px;
  margin-top: 16px;
  color: var(--teal-dark);
  font-weight: 800;
}

.pipo-permissions {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1.2fr);
  gap: 18px;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--coral);
  background: #fff7e5;
  padding: 20px;
}

.pipo-permissions h3 { margin: 0; font-size: 1.32rem; }
.pipo-permissions p { margin: 7px 0 0; color: #5a3c05; line-height: 1.42; }

.pipo-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pipo-permission {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid #e4d7c0;
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.pipo-permission input {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--teal);
}

.pipo-permission-note,
.pipo-confirm-actions { grid-column: 1 / -1; }

.pipo-live-grid {
  display: grid;
  grid-template-columns: minmax(270px, 1.1fr) minmax(260px, 0.9fr);
  gap: 16px;
}

.pipo-media-stage {
  position: relative;
  display: grid;
  min-height: 280px;
  place-content: center;
  overflow: hidden;
  border: 1px solid #1f4e4a;
  border-radius: 8px;
  background: #17201d;
  color: #fffdf8;
  text-align: center;
}

.pipo-media-stage strong { z-index: 1; font-size: 1.15rem; }
.pipo-media-stage > span { z-index: 1; margin-top: 7px; color: #c1d3cf; font-size: 0.86rem; }

.pipo-abstract-signal {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0.8;
}

.pipo-abstract-signal span {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid #63d7c9;
  border-radius: 50%;
}

.pipo-abstract-signal span:nth-child(2) { width: 92px; height: 92px; border-color: #d69225; }
.pipo-abstract-signal span:nth-child(3) { border-color: #c5452f; }

.pipo-live-details { display: grid; gap: 12px; }

.pipo-audio-meter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  border-radius: 8px;
  background: #17201d;
}

.pipo-audio-meter span {
  width: 7px;
  height: 18px;
  border-radius: 4px;
  background: #63d7c9;
  animation: pipo-meter 1.2s ease-in-out infinite alternate;
}

.pipo-audio-meter span:nth-child(2n) { height: 36px; animation-delay: 0.2s; }
.pipo-audio-meter span:nth-child(3n) { height: 48px; animation-delay: 0.4s; }

@keyframes pipo-meter {
  from { transform: scaleY(0.55); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pipo-audio-meter span { animation: none; }
}

.pipo-map-simulation {
  position: relative;
  display: grid;
  min-height: 150px;
  place-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #e9e3d5;
  background-image: linear-gradient(90deg, transparent 49%, rgba(23, 107, 100, 0.16) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(23, 107, 100, 0.16) 50%, transparent 51%);
  background-size: 46px 46px;
}

.pipo-map-simulation i {
  width: 26px;
  height: 26px;
  border: 7px solid var(--coral);
  border-radius: 50% 50% 50% 0;
  background: #fffdf8;
  transform: rotate(-45deg);
}

.pipo-map-simulation span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 5px;
  background: #fffdf8;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 850;
}

.pipo-session-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.pipo-session-facts div,
.pipo-reception-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 11px;
}

.pipo-session-facts dt,
.pipo-reception-grid span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.pipo-session-facts dd,
.pipo-reception-grid strong {
  display: block;
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.pipo-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.pipo-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.78rem;
  font-weight: 850;
}

.pipo-status-chip span { width: 8px; height: 8px; border-radius: 50%; }
.pipo-status-chip.is-active { background: #e7f2ef; color: var(--teal-dark); }
.pipo-status-chip.is-active span { background: var(--teal); }
.pipo-status-chip.is-inactive { background: #f5f1e9; color: var(--muted); }
.pipo-status-chip.is-inactive span { background: #9c968d; }

.pipo-reception-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pipo-reception-grid small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.pipo-route {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pipo-route span {
  flex: 0 0 auto;
  border-bottom: 3px solid var(--teal);
  background: #e7f2ef;
  padding: 9px 11px;
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 850;
}

.pipo-route b { flex: 0 0 auto; color: var(--coral); }

.pipo-ai-notice {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: 22px;
  border-left: 5px solid var(--amber);
  background: #fff7e5;
}

.pipo-ai-notice > p { color: #5a3c05; }

.pipo-event-ledger {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipo-event-ledger li {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 14px;
  border-left: 4px solid var(--teal);
  background: #f7f4ed;
  padding: 11px 13px;
}

.pipo-event-ledger strong { color: var(--teal-dark); font-size: 0.85rem; }
.pipo-event-ledger span { color: var(--ink); font-size: 0.9rem; }
.pipo-event-ledger code { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; overflow-wrap: anywhere; }
.pipo-empty-state { margin: 0; color: var(--muted); }

.pipo-guidance-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 15px 20px;
  border-left: 5px solid var(--teal);
}

.pipo-guidance-strip span { color: var(--teal); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.pipo-guidance-strip strong { color: var(--ink); }
.pipo-guidance-strip p { margin: 0; color: var(--muted); }

.pipo-legacy-details {
  margin-top: 16px;
  padding: 0;
}

.pipo-legacy-details summary {
  cursor: pointer;
  padding: 17px 20px;
  color: var(--teal-dark);
  font-weight: 900;
}

.pipo-legacy-details > p {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 14px 20px 0;
  color: var(--muted);
  line-height: 1.45;
}

.pipo-legacy-body {
  padding: 16px 0 0;
}

.pipo-legacy-body .hero,
.pipo-legacy-body .layout,
.pipo-legacy-body .section-nav {
  width: min(100% - 32px, 1280px);
}

.pipo-legacy-body .hero { margin-top: 0; }

.pipo-noscript {
  width: min(1280px, calc(100% - 32px));
  margin: 16px auto;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  padding: 14px;
}

@media (max-width: 900px) {
  #pipoCitizenExperience,
  .pipo-legacy-details { width: min(100% - 20px, 760px); }

  #pipoCitizenExperience { padding-top: 10px; }

  .pipo-product-hero,
  .pipo-device-layout,
  .pipo-live-grid,
  .pipo-permissions,
  .pipo-ai-notice,
  .pipo-reception-grid {
    grid-template-columns: 1fr;
  }

  .pipo-section-heading { display: grid; align-items: start; }
  .pipo-phone { margin-bottom: 54px; }
  .pipo-quick-access { top: auto; right: 50%; bottom: -31px; transform: translateX(50%); }
  .pipo-device-caption { right: 50%; bottom: -86px; transform: translateX(50%); max-width: 220px; width: max-content; text-align: center; }
  .pipo-quick-menu { top: auto; right: 50%; bottom: 76px; z-index: 12; width: min(280px, calc(100vw - 64px)); transform: translateX(50%); }
  .pipo-permission-list,
  .pipo-session-facts { grid-template-columns: 1fr; }
  .pipo-reception-grid { gap: 8px; }
  .pipo-event-ledger li { grid-template-columns: 1fr; }
  .pipo-event-ledger code { grid-column: auto; }
  .pipo-primary-nav { top: 0; }
}

@media (max-width: 520px) {
  .pipo-product-hero,
  .pipo-activation-section,
  .pipo-live-session,
  .pipo-reception,
  .pipo-ai-notice,
  .pipo-ledger-section { padding: 18px; }

  .pipo-hero-actions,
  .pipo-session-actions,
  .pipo-confirm-actions { display: grid; grid-template-columns: 1fr; }

  .pipo-hero-actions button,
  .pipo-session-actions button,
  .pipo-confirm-actions button { width: 100%; }

  .pipo-phone { min-height: 510px; border-width: 8px; }
  .pipo-phone-app { min-height: 462px; }
  .pipo-phone-top { min-height: 34px; }
  .pipo-chat-line { min-height: 64px; }
  .pipo-media-stage { min-height: 220px; }
}

/* Etapa 6C.1: guided multi-agency operational journey. */
#pipoOperationalJourney {
  padding: 16px 0 4px;
}

.journey-shell {
  display: grid;
  gap: 18px;
}

.journey-header,
.journey-controls,
.journey-zone,
.journey-agency-section,
.journey-map-section,
.journey-field-section,
.journey-document-section,
.journey-closure-section,
.journey-ledger-section,
.journey-advanced-link {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--shadow);
}

.journey-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  gap: 28px;
  border-top: 6px solid var(--coral);
  padding: clamp(24px, 4vw, 40px);
}

.journey-kicker,
.journey-section-heading > div > p,
.journey-zone-label,
.journey-closure-section > div > p,
.journey-citizen-package > p {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.journey-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.journey-header > div > p:not(.journey-kicker) {
  max-width: 780px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.journey-header aside {
  display: grid;
  align-content: start;
  gap: 9px;
  border-left: 4px solid var(--teal);
  background: #e7f2ef;
  padding: 18px;
}

.journey-header aside strong {
  color: var(--teal-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.journey-header aside > span {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 900;
}

.journey-header aside p {
  margin: 0;
  color: #41635f;
  line-height: 1.42;
}

.journey-shell button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  padding: 9px 12px;
  font-weight: 850;
  line-height: 1.15;
}

.journey-shell button:hover { background: var(--teal-dark); }
.journey-shell button.is-primary { background: var(--coral); }
.journey-shell button.is-primary:hover { background: #a93321; }
.journey-shell button.is-secondary { border-color: var(--line); background: #ece6d9; color: var(--ink); }
.journey-shell button.is-secondary:hover { background: #e0efeb; border-color: var(--teal); color: var(--teal-dark); }
.journey-shell button[disabled] { cursor: not-allowed; opacity: 0.48; }

.journey-controls {
  position: sticky;
  top: 8px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
}

.journey-controls > strong { color: var(--teal-dark); font-size: 0.95rem; }
.journey-controls > div,
.journey-action-row,
.journey-operator-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.journey-live-message {
  min-height: 24px;
  margin: -4px 0 0;
  color: var(--teal-dark);
  font-weight: 800;
}

.journey-main-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.journey-zone,
.journey-agency-section,
.journey-map-section,
.journey-field-section,
.journey-document-section,
.journey-ledger-section {
  scroll-margin-top: 78px;
}

.journey-zone {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 18px;
}

.journey-zone h3,
.journey-agency-card h3,
.journey-operator-card h3,
.journey-act-card h3,
.journey-citizen-package h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.14rem;
  letter-spacing: 0;
}

.journey-zone > p:not(.journey-zone-label),
.journey-field-summary + .journey-field-context p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.journey-zone.is-focused,
.journey-agency-section.is-focused,
.journey-map-section.is-focused,
.journey-operator-card.is-focused,
.journey-document-section.is-focused,
.journey-closure-section.is-focused,
.journey-citizen-package.is-focused {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(197, 69, 47, 0.14), var(--shadow);
}

.journey-mini-phone {
  position: relative;
  overflow: hidden;
  min-height: 228px;
  border: 8px solid #17201d;
  border-radius: 22px;
  background: #fffdf8;
}

.journey-phone-bar {
  display: flex;
  justify-content: space-between;
  min-height: 30px;
  background: #17201d;
  padding: 7px 11px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
}

.journey-phone-content {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 182px;
  padding: 16px;
}

.journey-pipo-point {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px !important;
  border: 4px solid #fff !important;
  border-radius: 50% !important;
  background: var(--coral) !important;
  box-shadow: 0 0 0 5px rgba(197, 69, 47, 0.14);
  font-size: 1rem;
}

.journey-phone-content > span { color: var(--muted); font-size: 0.76rem; font-weight: 850; }
.journey-phone-content > strong { color: var(--ink); font-size: 1.08rem; }
.journey-phone-content > p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.38; }
.journey-phone-user { color: var(--teal-dark) !important; font-size: 0.7rem !important; letter-spacing: 0; }

.journey-permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.journey-permission-list span,
.journey-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: #e7f2ef;
  padding: 5px 8px;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 850;
}

.journey-status { background: #f1ece2; color: var(--muted); }
.journey-status.is-assigned { background: #e7f2ef; color: var(--teal-dark); }

.journey-key-values,
.journey-resource-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.journey-key-values div,
.journey-resource-details div {
  min-width: 0;
  border: 1px solid var(--line);
  background: #f9f6ef;
  padding: 8px;
}

.journey-key-values dt,
.journey-resource-details dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.journey-key-values dd,
.journey-resource-details dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.journey-key-values.compact { gap: 6px; }
.journey-key-values.compact div { padding: 7px; }

.journey-state-note,
.journey-master-alert,
.journey-field-context,
.journey-selection-note,
.journey-integration,
.journey-operator-instruction {
  margin: 0;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  padding: 10px;
  color: #5a3c05;
  font-size: 0.84rem;
  line-height: 1.42;
}

.journey-state-note.is-active { border-left-color: var(--teal); background: #e7f2ef; color: var(--teal-dark); }

.journey-master-alert { display: grid; gap: 4px; border-left-color: var(--coral); }
.journey-master-alert strong { color: var(--ink); }
.journey-master-alert span { color: var(--muted); font-size: 0.8rem; }
.journey-note { margin: 0; color: var(--muted); font-size: 0.83rem; line-height: 1.42; }

.journey-field-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.journey-field-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  background: #f9f6ef;
  padding: 9px;
}

.journey-field-summary span { color: var(--muted); font-size: 0.72rem; font-weight: 850; }
.journey-field-summary strong { color: var(--teal-dark); font-size: 0.85rem; }
.journey-field-context { display: grid; gap: 5px; border-left-color: var(--teal); background: #e7f2ef; color: var(--teal-dark); }
.journey-field-context span { font-size: 0.76rem; font-weight: 800; }
.journey-field-context p { color: #41635f !important; font-size: 0.78rem; }

.journey-agency-section,
.journey-map-section,
.journey-field-section,
.journey-document-section,
.journey-ledger-section {
  padding: clamp(18px, 3vw, 28px);
}

.journey-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.journey-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.28rem, 2.5vw, 1.9rem);
  letter-spacing: 0;
}

.journey-section-heading > span {
  max-width: 580px;
  color: var(--muted);
  line-height: 1.42;
}

.journey-agency-grid,
.journey-field-cards,
.journey-acts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.journey-agency-card,
.journey-operator-card,
.journey-act-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fffdf8;
  padding: 12px;
}

.journey-agency-card header,
.journey-operator-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.journey-agency-capability {
  min-height: 39px;
  margin: 0;
  color: var(--teal-dark);
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.35;
}

.journey-confirmation-state,
.journey-map-assignment {
  display: grid;
  gap: 3px;
  margin: 0;
  border-left: 3px solid var(--amber);
  padding-left: 8px;
}

.journey-confirmation-state span,
.journey-map-assignment span { color: var(--muted); font-size: 0.7rem; font-weight: 850; text-transform: uppercase; }
.journey-confirmation-state strong,
.journey-map-assignment strong { color: var(--teal-dark); font-size: 0.8rem; line-height: 1.3; }

.journey-map {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #e9e3d5;
}

.journey-map::before,
.journey-map::after {
  position: absolute;
  content: "";
  inset: 12% 8%;
  border: 1px solid rgba(23, 107, 100, 0.18);
  transform: rotate(-8deg);
}

.journey-map::after { inset: 24% 14%; transform: rotate(13deg); border-color: rgba(197, 69, 47, 0.2); }

.journey-map-incident,
.journey-map-resource {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 88px;
  min-height: 50px;
  border: 2px solid #fffdf8;
  background: var(--teal-dark);
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 14px rgba(23, 32, 29, 0.18);
}

.journey-map-incident {
  top: 43%;
  left: 45%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--coral);
  padding: 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.journey-map-resource { padding: 6px; font-size: 0.7rem; font-weight: 850; }
.journey-map-resource span { color: #c1d3cf; font-size: 0.62rem; }
.journey-map-resource.health { top: 10%; left: 13%; }
.journey-map-resource.security { top: 15%; right: 13%; }
.journey-map-resource.traffic { bottom: 12%; left: 17%; }
.journey-map-resource.fire { right: 15%; bottom: 15%; }
.journey-map-resource.is-moving { border-color: #63d7c9; }

.journey-route {
  position: absolute;
  z-index: 1;
  width: 26%;
  height: 2px;
  transform-origin: left center;
  background: rgba(23, 107, 100, 0.5);
}

.journey-route.route-health { top: 31%; left: 25%; transform: rotate(26deg); }
.journey-route.route-security { top: 31%; right: 24%; transform: rotate(150deg); }
.journey-route.route-traffic { bottom: 31%; left: 27%; transform: rotate(-27deg); }
.journey-route.route-fire { right: 25%; bottom: 31%; transform: rotate(207deg); }

.journey-selection-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-left-color: var(--teal);
  background: #e7f2ef;
  color: var(--teal-dark);
}

.journey-selection-note span { color: #41635f; }

.journey-map-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.journey-map-resource-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #fffdf8;
  padding: 12px;
}

.journey-map-resource-card.security { border-left-color: #4d7a94; }
.journey-map-resource-card.health { border-left-color: #2d9a83; }
.journey-map-resource-card.traffic { border-left-color: var(--amber); }
.journey-map-resource-card.fire { border-left-color: var(--coral); }

.journey-map-resource-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.journey-map-resource-card header span,
.journey-map-resource-card header > strong { color: var(--muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.journey-map-resource-card header > strong { max-width: 160px; color: var(--teal-dark); text-align: right; line-height: 1.28; }
.journey-map-resource-card h3 { margin: 3px 0 0; color: var(--ink); font-size: 1rem; }

.journey-map-resource-data,
.journey-final-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.journey-map-resource-data div,
.journey-final-summary div {
  min-width: 0;
  border: 1px solid var(--line);
  background: #f9f6ef;
  padding: 7px;
}

.journey-map-resource-data dt,
.journey-final-summary dt { color: var(--muted); font-size: 0.64rem; font-weight: 900; text-transform: uppercase; }
.journey-map-resource-data dd,
.journey-final-summary dd { margin: 3px 0 0; color: var(--ink); font-size: 0.76rem; font-weight: 850; line-height: 1.3; overflow-wrap: anywhere; }

.journey-map-human-note {
  margin: 12px 0 0;
  border-left: 4px solid var(--teal);
  background: #e7f2ef;
  padding: 10px;
  color: #41635f;
  font-size: 0.84rem;
  line-height: 1.42;
}

.journey-operator-card > p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.38; }
.journey-operator-instruction { border-left-color: var(--amber); font-size: 0.77rem; }
.journey-operator-actions button { flex: 1 1 80px; min-height: 34px; padding: 7px; font-size: 0.72rem; }

.journey-act-card > span { color: var(--teal); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.journey-act-card > strong { color: var(--teal-dark); font-size: 0.82rem; }
.journey-integration { margin-top: 12px; border-left-color: var(--teal); background: #e7f2ef; color: var(--teal-dark); }
.journey-integration strong { display: block; margin-top: 4px; }

.journey-closure-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
}

.journey-closure-section > div:first-child { display: grid; align-content: start; gap: 10px; }
.journey-closure-section h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.journey-closure-section > div:first-child > p:not(:first-child) { margin: 0; color: var(--muted); line-height: 1.45; }
.journey-closure-status { color: var(--teal-dark); font-size: 0.88rem; font-weight: 850; }

.journey-citizen-package {
  min-width: 0;
  border-left: 4px solid var(--teal);
  background: #e7f2ef;
  padding: 16px;
}

.journey-closure-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--teal-dark);
  font-size: 0.75rem;
  font-weight: 850;
}

.journey-closure-flow span,
.journey-closure-flow strong { border: 1px solid rgba(23, 107, 100, 0.22); background: #f4fbf9; padding: 5px 7px; }
.journey-closure-flow b { color: var(--coral); font-size: 0.92rem; }

.journey-final-phone {
  min-height: 0;
  border-color: #17201d;
  box-shadow: 0 14px 30px rgba(23, 32, 29, 0.15);
}

.journey-final-phone-content { display: grid; gap: 10px; padding: 14px; }
.journey-final-phone-content > strong { color: var(--ink); font-size: 1.08rem; }
.journey-final-phone-content > p { margin: 0; color: #41635f; font-size: 0.82rem; line-height: 1.4; }
.journey-final-phone-content .journey-phone-user { display: block; }
.journey-final-scenario { color: var(--coral); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }

.journey-return-indicators { display: flex; flex-wrap: wrap; gap: 5px; }
.journey-return-indicators span { border: 1px solid rgba(23, 107, 100, 0.2); background: #e7f2ef; padding: 5px 7px; color: var(--teal-dark); font-size: 0.68rem; font-weight: 850; }
.journey-final-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.journey-final-actions button:last-child { grid-column: 1 / -1; }

.journey-ledger-section { padding-bottom: 20px; }
.journey-ledger { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.journey-ledger li { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); gap: 6px 12px; border-left: 4px solid var(--teal); background: #f7f4ed; padding: 10px; }
.journey-ledger strong { color: var(--teal-dark); font-size: 0.8rem; }
.journey-ledger span { color: var(--ink); font-size: 0.86rem; }
.journey-ledger code { grid-column: 1 / -1; color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; }
.journey-empty { margin: 0; color: var(--muted); }

.journey-advanced-link {
  padding: 0;
}

.journey-advanced-link summary { cursor: pointer; padding: 16px; color: var(--teal-dark); font-weight: 900; }
.journey-advanced-link p { margin: 0; border-top: 1px solid var(--line); padding: 14px 16px 0; color: var(--muted); line-height: 1.42; }
.journey-advanced-link button { margin: 12px 16px 16px; }

@media (max-width: 1040px) {
  .journey-main-grid { grid-template-columns: 1fr 1fr; }
  .journey-citizen { grid-row: span 2; }
  .journey-field { grid-column: 2; }
  .journey-agency-grid,
  .journey-field-cards,
  .journey-acts-grid,
  .journey-map-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #pipoOperationalJourney { width: min(100% - 20px, 760px); }
  .journey-header,
  .journey-main-grid,
  .journey-closure-section { grid-template-columns: 1fr; }
  .journey-citizen { grid-row: auto; }
  .journey-field { grid-column: auto; }
  .journey-section-heading { display: grid; align-items: start; }
  .journey-controls { top: 0; align-items: stretch; flex-direction: column; }
  .journey-controls > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .journey-header,
  .journey-zone,
  .journey-agency-section,
  .journey-map-section,
  .journey-field-section,
  .journey-document-section,
  .journey-closure-section,
  .journey-ledger-section { padding: 16px; }
  .journey-agency-grid,
  .journey-field-cards,
  .journey-acts-grid,
  .journey-map-resource-grid,
  .journey-key-values,
  .journey-resource-details,
  .journey-field-summary,
  .journey-map-resource-data,
  .journey-final-summary,
  .journey-final-actions { grid-template-columns: 1fr; }
  .journey-map { min-height: 310px; }
  .journey-map-resource { width: 76px; min-height: 46px; }
  .journey-map-incident { top: 42%; left: 39%; }
  .journey-map-resource.health { left: 6%; }
  .journey-map-resource.security { right: 6%; }
  .journey-map-resource.traffic { left: 7%; }
  .journey-map-resource.fire { right: 7%; }
  .journey-route { width: 30%; }
  .journey-controls > div { grid-template-columns: 1fr; }
  .journey-ledger li { grid-template-columns: 1fr; }
  .journey-ledger code { grid-column: auto; }
  .journey-map-resource-card header { display: grid; }
  .journey-map-resource-card header > strong { max-width: none; text-align: left; }
  .journey-final-actions button:last-child { grid-column: auto; }
}

/* Unified presentation layer. Legacy Build Week modules remain in the source tree
   and are intentionally moved behind the primary presentation experience. */
:root {
  --p-bg: #eef2f0;
  --p-surface: #ffffff;
  --p-surface-muted: #f5f7f6;
  --p-ink: #142522;
  --p-muted: #5f706d;
  --p-line: #d4dfdb;
  --p-navy: #062535;
  --p-navy-2: #0c3c50;
  --p-institutional: #11786f;
  --p-action: #d75036;
  --p-critical: #b92726;
  --p-warning: #bd7a12;
  --p-success: #1c8659;
  --p-radius: 8px;
  --p-phone-radius: 28px;
  --p-shadow: 0 14px 34px rgba(6, 37, 53, 0.12);
  --p-space-1: 8px;
  --p-space-2: 12px;
  --p-space-3: 18px;
  --p-space-4: 28px;
}

body.presentation-unified {
  min-width: 320px;
  overflow-x: clip;
  background: var(--p-bg);
  color: var(--p-ink);
}

body.presentation-unified > #pipoCitizenExperience,
body.presentation-unified > #pipoOperationalJourney,
body.presentation-unified > .hero,
body.presentation-unified > .section-nav,
body.presentation-unified > .layout,
body.presentation-unified > #pipoTechnicalInformation,
body.presentation-unified > #pipoAdvancedModules,
body.presentation-unified > .pipo-noscript {
  display: none;
}

#pipoUnifiedPresentation {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(231, 239, 236, 0.94), rgba(255, 255, 255, 0.96) 420px, var(--p-bg)),
    var(--p-bg);
  color: var(--p-ink);
}

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

#pipoUnifiedPresentation button,
#pipoUnifiedPresentation select { font: inherit; }

#pipoUnifiedPresentation button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--p-radius);
  background: #e7ecea;
  color: var(--p-ink);
  padding: 9px 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

#pipoUnifiedPresentation button:hover:not(:disabled) { border-color: var(--p-institutional); }
#pipoUnifiedPresentation button:disabled { cursor: not-allowed; opacity: 0.52; }
#pipoUnifiedPresentation button:focus-visible,
#pipoUnifiedPresentation a:focus-visible,
#pipoUnifiedPresentation select:focus-visible,
#pipoUnifiedPresentation input:focus-visible,
#pipoUnifiedPresentation summary:focus-visible { outline: 3px solid #4cc8bd; outline-offset: 3px; }

.presentation-header,
.presentation-main { width: min(1320px, calc(100% - 32px)); margin: 0 auto; }

.presentation-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(212, 223, 219, 0.94);
  border-top: 0;
  border-radius: 0 0 var(--p-radius) var(--p-radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 18px rgba(6, 37, 53, 0.08);
  padding: 10px 14px;
  backdrop-filter: blur(14px);
}

.presentation-brand {
  display: inline-flex;
  align-items: center;
  color: var(--p-navy);
  font-size: 1.24rem;
  font-weight: 950;
  letter-spacing: 0;
  text-decoration: none;
}

.presentation-brand span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--p-action);
  color: white;
  font-size: 0.84rem;
}

.presentation-nav { display: flex; justify-content: center; gap: 4px; min-width: 0; }
.presentation-nav a { color: var(--p-muted); padding: 8px 9px; border-radius: 6px; font-size: 0.78rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.presentation-nav a:hover { background: #e9f3f0; color: var(--p-institutional); }

.presentation-locale { display: grid; gap: 2px; color: var(--p-muted); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.presentation-locale select { min-width: 124px; min-height: 34px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-surface); color: var(--p-ink); padding: 5px 8px; font-weight: 750; }

.presentation-main { padding: 22px 0 52px; }
.presentation-hero,
.presentation-tour,
.presentation-section,
.presentation-advanced { margin-top: 18px; }

.presentation-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  gap: var(--p-space-4);
  overflow: hidden;
  border-radius: var(--p-radius);
  background: linear-gradient(130deg, var(--p-navy), #083c51 70%, #0e625f);
  color: white;
  padding: clamp(26px, 5vw, 56px);
  box-shadow: var(--p-shadow);
}

.presentation-hero::after { content: ""; position: absolute; inset: auto -15% -70% 42%; height: 420px; border: 1px solid rgba(96, 230, 212, 0.28); border-radius: 50%; transform: rotate(-18deg); }
.presentation-hero-copy,
.presentation-hero-map { position: relative; z-index: 1; }
.presentation-kicker { margin: 0 0 8px; color: #3fd4c6; font-size: 0.74rem; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.presentation-hero h1 { max-width: 770px; margin: 0; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 0.95; letter-spacing: 0; }
.presentation-hero h2 { max-width: 680px; margin: 16px 0 0; color: #e0fbf6; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.12; }
.presentation-hero p:not(.presentation-kicker) { max-width: 720px; margin: 16px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.56; }
.presentation-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.presentation-primary { background: var(--p-action) !important; color: #fff !important; }
.presentation-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid rgba(255,255,255,0.38); border-radius: var(--p-radius); color: #fff; padding: 9px 12px; font-size: 0.9rem; font-weight: 850; text-decoration: none; }
.presentation-secondary:hover { background: rgba(255, 255, 255, 0.12); }
.presentation-icon-action { width: 42px; padding: 0 !important; border-color: rgba(255,255,255,0.38) !important; background: transparent !important; color: white !important; font-size: 1.35rem; }

.presentation-hero-map { min-height: 282px; align-self: center; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--p-radius); background: linear-gradient(145deg, rgba(2, 21, 32, 0.77), rgba(12, 85, 87, 0.6)); overflow: hidden; }
.hero-grid-line { position: absolute; width: 160%; border-top: 1px solid rgba(87, 239, 219, 0.22); transform: rotate(-26deg); }
.hero-grid-line.line-one { top: 34%; left: -28%; }
.hero-grid-line.line-two { top: 61%; left: -18%; }
.hero-node { position: absolute; display: grid; width: 112px; min-height: 70px; place-items: center; border: 1px solid rgba(255,255,255,0.34); border-radius: var(--p-radius); background: rgba(6,37,53,0.84); color: #e8fffb; padding: 8px; text-align: center; font-size: 0.74rem; font-weight: 900; box-shadow: 0 10px 20px rgba(0,0,0,0.22); }
.hero-citizen { top: 24px; left: 24px; }
.hero-master { top: 102px; right: 50%; transform: translateX(50%); background: var(--p-institutional); }
.hero-field { right: 24px; bottom: 28px; }
.hero-flow { position: absolute; right: 18px; bottom: 18px; left: 18px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 12px; color: #9feee3; font-size: 0.69rem; font-weight: 900; text-align: center; }
.hero-flow b { color: #fff; padding: 0 6px; }
.presentation-simulation-notice { grid-column: 1 / -1; max-width: none !important; margin: 0 !important; border-left: 3px solid #f2c266; background: rgba(4, 25, 39, 0.45); padding: 10px 12px; font-size: 0.82rem !important; }

.presentation-tour,
.presentation-section,
.presentation-advanced { border: 1px solid var(--p-line); border-radius: var(--p-radius); background: var(--p-surface); box-shadow: 0 6px 18px rgba(6,37,53,0.05); }
.presentation-tour { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 18px; }
.presentation-tour h2 { max-width: 640px; margin: 0; color: var(--p-ink); font-size: 1rem; line-height: 1.4; }
.presentation-tour-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 8px; }
.presentation-tour-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.presentation-tour-steps li { display: grid; gap: 7px; min-width: 0; color: var(--p-muted); font-size: 0.68rem; font-weight: 800; line-height: 1.2; }
.presentation-tour-steps span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--p-line); border-radius: 50%; background: var(--p-surface-muted); color: var(--p-muted); }
.presentation-tour-steps li.is-active { color: var(--p-navy); }
.presentation-tour-steps li.is-active span { border-color: var(--p-action); background: var(--p-action); color: white; }
.presentation-tour-steps li.is-complete span { border-color: var(--p-success); background: #e2f4ea; color: var(--p-success); }
.presentation-live { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--p-institutional); font-size: 0.82rem; font-weight: 750; }

.presentation-section { padding: var(--p-space-4); scroll-margin-top: 84px; }
.presentation-section.is-tour-active { border-color: var(--p-action); box-shadow: 0 0 0 3px rgba(215,80,54,0.16), var(--p-shadow); }
.presentation-section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 18px; }
.presentation-section-heading h2 { margin: 0; color: var(--p-navy); font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.08; }
.presentation-section-heading p:not(.presentation-kicker) { max-width: 720px; margin: 8px 0 0; color: var(--p-muted); line-height: 1.48; }
.presentation-step-tag { flex: 0 0 auto; border: 1px solid #a7d8d0; border-radius: 999px; background: #e5f5f1; color: #075b54; padding: 6px 9px; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; }

.presentation-device-layout { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); align-items: center; gap: 26px; }
.presentation-phone { position: relative; width: min(100%, 340px); min-height: 570px; overflow: hidden; border: 8px solid #102822; border-radius: var(--p-phone-radius); background: #f7faf9; box-shadow: 0 16px 30px rgba(6,37,53,0.2); }
.phone-status { display: flex; justify-content: space-between; padding: 11px 16px 9px; background: #102822; color: #e8f6f1; font-size: 0.68rem; font-weight: 900; }
.phone-appbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; background: #e2f2ee; color: #0b5952; padding: 10px 14px; font-size: 0.8rem; }
.phone-appbar span { color: #52716b; font-size: 0.61rem; font-weight: 800; text-transform: uppercase; }
.phone-message-card { display: flex; align-items: center; gap: 10px; margin: 14px; border: 1px solid #d7e1de; border-radius: var(--p-radius); background: white; padding: 11px; }
.phone-message-card strong,
.phone-message-card small { display: block; }
.phone-message-card strong { color: var(--p-ink); font-size: 0.8rem; }
.phone-message-card small { margin-top: 4px; color: var(--p-muted); font-size: 0.69rem; }
.phone-contact-dot { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #d75036, #e8b650); }
.phone-screen-lines { display: grid; gap: 10px; padding: 12px 14px; }
.phone-screen-lines span { height: 54px; border: 1px solid #e0e9e6; border-radius: 7px; background: linear-gradient(90deg, #fff 0 20%, #eff4f2 20% 68%, #fff 68%); }
.presentation-phone footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; border-top: 1px solid #d7e1de; background: #fff; color: #51736c; padding: 13px; font-size: 1rem; }
.pipo-floating-point { position: absolute; z-index: 4; top: 42px; left: 50%; display: grid; width: 58px; min-height: 58px !important; place-items: center; border: 6px solid #fff1ea !important; border-radius: 50% !important; background: var(--p-action) !important; color: white !important; box-shadow: 0 0 0 5px rgba(215,80,54,0.18), 0 12px 22px rgba(6,37,53,0.16); font-size: 1.65rem; line-height: 1; transform: translateX(-50%); }
.citizen-phone .phone-message-card { margin-top: 30px; }

.presentation-alert-workbench { display: none; min-width: 0; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: var(--p-surface-muted); padding: 18px; }
.presentation-alert-workbench.is-open { display: block; animation: presentation-reveal 180ms ease-out both; }
@keyframes presentation-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.presentation-workbench-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.presentation-workbench-head p { margin: 0; color: var(--p-muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.presentation-workbench-head h3 { margin: 4px 0 0; color: var(--p-navy); font-size: 1.18rem; }
.presentation-alert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.presentation-alert-option { display: flex; min-height: 58px !important; align-items: center; gap: 8px; background: white !important; color: var(--p-ink) !important; text-align: left; font-size: 0.78rem; }
.presentation-alert-option span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e4f2ef; color: var(--p-institutional); font-size: 0.66rem; }
.presentation-alert-option.is-selected { border-color: var(--p-institutional) !important; background: #e5f4f1 !important; color: #075b54 !important; }
.presentation-subtype-panel,
.presentation-confidential,
.presentation-municipal-categories { margin-top: 14px; border: 1px solid #d7e4e0; border-left: 4px solid var(--p-action); border-radius: var(--p-radius); background: #fff; padding: 14px; }
.presentation-subtype-panel > div:first-child p { margin: 0; color: var(--p-muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.presentation-subtype-panel > div:first-child strong,
.presentation-subtype-panel > div:first-child small { display: block; }
.presentation-subtype-panel > div:first-child strong { margin-top: 4px; color: var(--p-navy); }
.presentation-subtype-panel > div:first-child small { margin-top: 4px; color: var(--p-critical); font-weight: 800; }
.presentation-subtypes,
.presentation-municipal-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.presentation-subtypes { margin-top: 11px; }
.presentation-subtypes span,
.presentation-municipal-categories span { border: 1px solid #d7e4e0; border-radius: 999px; background: #f7fbf9; padding: 5px 8px; color: #34514b; font-size: 0.68rem; font-weight: 750; }
.presentation-subtypes span.is-picked { border-color: #e29e90; background: #fff0ea; color: #9c2e20; }
.presentation-reserved,
.presentation-confidential p { margin: 10px 0 0; color: var(--p-muted); font-size: 0.78rem; line-height: 1.42; }
.presentation-confidential strong { color: var(--p-navy); }
.presentation-confidential > small { display: block; margin-top: 9px; color: var(--p-critical); font-size: 0.76rem; font-weight: 800; }
.presentation-confidential > button { margin-top: 10px; background: #e5f2ee !important; color: #075b54 !important; font-size: 0.76rem; }
.presentation-confidential-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 11px; }
.presentation-confidential-fields span { display: flex; align-items: center; gap: 6px; border: 1px solid #d7e5e1; border-radius: 6px; background: #f7fbf9; padding: 7px; color: #405b55; font-size: 0.7rem; font-weight: 750; }
.presentation-confidential-fields b { color: var(--p-institutional); font-size: 0.63rem; }
.presentation-permission-set { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: #fff; padding: 12px; }
.presentation-permission-set legend { color: var(--p-muted); font-size: 0.72rem; font-weight: 900; padding: 0 4px; text-transform: uppercase; }
.presentation-permission-set label,
.presentation-permission-set > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8e7e2; border-radius: 999px; background: #f2f8f6; padding: 6px 8px; color: #075b54; font-size: 0.72rem; font-weight: 800; }
.presentation-permission-set input { accent-color: var(--p-institutional); }
.presentation-alert-submit { width: 100%; margin-top: 14px; }
.presentation-record-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; border-top: 1px solid var(--p-line); padding-top: 18px; color: var(--p-muted); font-size: 0.76rem; font-weight: 800; text-align: center; }
.presentation-record-flow strong { color: var(--p-navy); }
.presentation-record-flow b { color: var(--p-action); }

.master-console-surface { overflow: hidden; border: 1px solid #bed4cf; border-radius: var(--p-radius); background: #edf5f2; }
.master-console-surface > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--p-navy); color: white; padding: 13px 16px; font-size: 0.86rem; font-weight: 900; }
.master-console-surface > header small { display: block; margin-top: 3px; color: #b6d7d1; font-size: 0.65rem; font-weight: 750; }
.console-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #53d4a5; box-shadow: 0 0 0 4px rgba(83,212,165,0.16); }
.presentation-chip { display: inline-flex; align-items: center; border-radius: 999px; background: #e7ecea; color: #49605a; padding: 5px 8px; font-size: 0.67rem; font-weight: 900; text-transform: uppercase; }
.presentation-chip.critical { background: #f9ddda; color: #9d1e1e; }
.presentation-chip.warning { background: #fff0d4; color: #8a5710; }
.presentation-chip.success { background: #dcf3e6; color: #1c7250; }
.presentation-chip.muted { background: #ecf0ef; color: #798682; }
.master-console-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) minmax(220px, 0.75fr); gap: 12px; padding: 14px; }
.master-console-grid > article,
.presentation-console-card,
.presentation-field-workspace,
.presentation-justice-grid > article,
.presentation-act-card,
.presentation-closure-console,
.presentation-municipal-card { min-width: 0; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: #fff; padding: 14px; }
.master-console-grid p,
.presentation-field-workspace > header p,
.presentation-justice-grid h3 + p,
.presentation-municipal-card p,
.presentation-master-record p { margin: 0; color: var(--p-muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.master-alert-card h3 { margin: 5px 0; color: var(--p-institutional); font-size: 1.36rem; }
.master-alert-card > strong { color: var(--p-navy); font-size: 0.92rem; }
.master-console-grid dl,
.presentation-console-card dl,
.field-context-card dl,
.presentation-justice-grid dl,
.presentation-act-card dl,
.presentation-closure-console dl,
.presentation-municipal-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.master-console-grid dl div,
.presentation-console-card dl div,
.field-context-card dl div,
.presentation-justice-grid dl div,
.presentation-act-card dl div,
.presentation-closure-console dl div,
.presentation-municipal-card dl div { min-width: 0; border-top: 1px solid #edf1ef; padding-top: 7px; }
.master-console-grid dt,
.presentation-console-card dt,
.field-context-card dt,
.presentation-justice-grid dt,
.presentation-act-card dt,
.presentation-closure-console dt,
.presentation-municipal-card dt { color: var(--p-muted); font-size: 0.62rem; font-weight: 900; text-transform: uppercase; }
.master-console-grid dd,
.presentation-console-card dd,
.field-context-card dd,
.presentation-justice-grid dd,
.presentation-act-card dd,
.presentation-closure-console dd,
.presentation-municipal-card dd { margin: 3px 0 0; color: var(--p-ink); font-size: 0.73rem; font-weight: 800; overflow-wrap: anywhere; }
.presentation-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.presentation-button-grid button { font-size: 0.78rem; }
.master-human-note { margin-top: 12px !important; border-left: 3px solid var(--p-warning); background: #fff8e8; padding: 9px; color: #73521b !important; font-size: 0.76rem !important; font-weight: 750 !important; text-transform: none !important; }
.presentation-route-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.presentation-route-chips span { border: 1px solid #d7e5e1; border-radius: 999px; background: #f6f9f8; padding: 6px 8px; color: #46625c; font-size: 0.7rem; font-weight: 850; }
.presentation-route-chips span.is-routed { border-color: #91cfc3; background: #e2f5f0; color: #075b54; }
.master-route-card > strong,
.master-route-card > small { display: block; }
.master-route-card > strong { color: var(--p-institutional); font-size: 0.86rem; }
.master-route-card > small { margin-top: 6px; color: var(--p-muted); line-height: 1.4; }

.presentation-console-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.presentation-console-card { background: #f9fbfa; opacity: 0.78; }
.presentation-console-card.is-involved { border-color: #94cfc4; background: #fff; opacity: 1; box-shadow: 0 8px 20px rgba(17,120,111,0.08); }
.presentation-console-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.presentation-console-card h3 { margin: 0; color: var(--p-navy); font-size: 0.88rem; line-height: 1.2; }
.presentation-console-card small { display: block; margin-top: 3px; color: var(--p-muted); font-size: 0.64rem; font-weight: 700; }
.console-kind { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: #96a9a4; }
.console-kind.coordination { background: #4678a7; }.console-kind.security { background: #bd3b35; }.console-kind.health { background: #2f9a79; }.console-kind.fire { background: #d75d2f; }.console-kind.civil { background: #bd7a12; }.console-kind.gender { background: #8d5db5; }.console-kind.childhood { background: #3f9bc2; }.console-kind.traffic { background: #436f9c; }.console-kind.justice { background: #775a44; }.console-kind.community { background: #41845b; }.console-kind.cyber { background: #2f5aa6; }.console-kind.station { background: #496b85; }.console-kind.municipal { background: #56816f; }
.presentation-resource-suggestion { display: grid; gap: 5px; margin-top: 11px; border-top: 1px solid #e6efec; padding-top: 11px; color: var(--p-muted); font-size: 0.68rem; }
.presentation-resource-suggestion strong { color: var(--p-institutional); font-size: 0.72rem; }
.presentation-resource-suggestion button { margin-top: 3px; min-height: 34px !important; background: #e2f4ef !important; color: #075b54 !important; font-size: 0.72rem; }
.presentation-confirmation-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; border-left: 3px solid var(--p-warning); background: #fff8e8; padding: 11px; color: #745417; font-size: 0.78rem; }
.presentation-confirmation-note strong { color: #6c4d13; }

.presentation-communications-table { overflow: auto; border: 1px solid var(--p-line); border-radius: var(--p-radius); }
.communications-row { display: grid; grid-template-columns: 150px 130px 130px minmax(260px, 1fr) 154px; gap: 10px; align-items: start; min-width: 860px; border-top: 1px solid #e7eeec; padding: 12px 14px; color: var(--p-ink); font-size: 0.76rem; line-height: 1.35; }
.communications-row:first-child { border-top: 0; }
.communications-head { background: #edf5f2; color: #41615a; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; }
.communications-row span b { display: block; color: var(--p-navy); font-size: 0.7rem; }
.presentation-empty { margin: 0; color: var(--p-muted); padding: 18px; }

.presentation-field-layout { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.field-phone { background: #f7faf9; }
.field-context-card { margin: 14px; border: 1px solid #d7e4e0; border-radius: var(--p-radius); background: white; padding: 12px; }
.field-context-card > p:first-child { margin: 0; color: var(--p-institutional); font-size: 0.66rem; font-weight: 950; text-transform: uppercase; }
.field-context-card h3 { margin: 5px 0 0; color: var(--p-navy); font-size: 1rem; line-height: 1.25; }
.field-context-card > p:last-child { margin: 12px 0 0; color: var(--p-muted); font-size: 0.73rem; line-height: 1.4; }
.field-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.field-media span { min-height: 50px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(145deg, #0a3a4c, #176b64); color: #d8faf4; padding: 5px; font-size: 0.61rem; font-weight: 850; text-align: center; }
.field-phone-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; border-top: 1px solid #d7e1de; background: white; padding: 9px; }
.field-phone-actions button { min-height: 35px !important; background: #e7f1ee !important; color: #075b54 !important; font-size: 0.67rem; }
.presentation-field-workspace { display: grid; align-content: start; background: #f8fbfa; }
.presentation-field-workspace > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.presentation-field-workspace > header h3 { max-width: 600px; margin: 4px 0 0; color: var(--p-navy); font-size: 1.1rem; line-height: 1.35; }
.field-workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.field-workspace-grid > div { border: 1px solid var(--p-line); border-radius: var(--p-radius); background: white; padding: 12px; }
.field-workspace-grid h4 { margin: 0; color: var(--p-navy); font-size: 0.86rem; }
.field-workspace-grid p { color: var(--p-muted); font-size: 0.8rem; line-height: 1.45; }
.presentation-mini-ledger { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.presentation-mini-ledger li { border-left: 3px solid var(--p-institutional); background: #f3f8f6; padding: 7px; color: #456159; font-size: 0.69rem; font-weight: 750; }
.presentation-legal-note { margin: 14px 0 0; border-left: 3px solid var(--p-warning); background: #fff7e4; padding: 10px; color: #715018; font-size: 0.76rem; line-height: 1.42; }

/* Documentary-control panels remain compact enough to compare on the master console. */
.presentation-master-resource-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; margin-top: 14px; }
.presentation-resource-card,
.presentation-master-context,
.presentation-service-control,
.presentation-field-context,
.presentation-evidence-panel,
.presentation-field-comms,
.presentation-act-preview,
.presentation-consistency { border: 1px solid var(--p-line); border-radius: var(--p-radius); background: #fff; padding: 14px; }
.presentation-resource-card header,
.presentation-master-context > header,
.presentation-service-control > header,
.presentation-field-context > header,
.presentation-evidence-panel > header,
.presentation-act-preview > header,
.presentation-consistency > header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.presentation-resource-card header p,
.presentation-master-context p,
.presentation-service-control header p,
.presentation-field-context header p,
.presentation-evidence-panel header p,
.presentation-act-preview header p,
.presentation-consistency header p { margin: 0; color: var(--p-muted); font-size: 0.67rem; font-weight: 900; text-transform: uppercase; }
.presentation-resource-card h3,
.presentation-master-context h3,
.presentation-service-control h3,
.presentation-field-context h3,
.presentation-evidence-panel h3,
.presentation-act-preview h3,
.presentation-consistency h3,
.presentation-field-comms h3 { margin: 4px 0 0; color: var(--p-navy); font-size: 0.94rem; line-height: 1.3; }
.presentation-master-context > p { margin-top: 10px; color: var(--p-muted); font-size: 0.74rem; line-height: 1.4; }
.presentation-access-matrix { margin-top: 12px; border-top: 1px solid #dce9e5; padding-top: 11px; }
.presentation-access-matrix > header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.presentation-access-matrix h4 { margin: 0; color: var(--p-navy); font-size: 0.72rem; letter-spacing: 0.03em; }
.presentation-access-matrix small { color: var(--p-muted); font-size: 0.64rem; font-weight: 750; }
.presentation-media-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.presentation-media-preview { display: grid; min-height: 46px; place-items: center; gap: 3px; border: 1px solid #d7e4e0; border-radius: 6px; background: #f7fbf9; color: #48645d; padding: 5px; font-size: 0.61rem; font-weight: 850; text-align: center; }
.presentation-media-preview b { color: var(--p-institutional); font-size: 0.82rem; }
.presentation-media-preview.authorized { border-color: #9fd0bb; background: #edf8f1; color: #216b4b; }
.presentation-media-preview.restricted { border-color: #e4c996; background: #fff7e5; color: #7b5817; }
.presentation-media-preview.request { border-color: #d8dee0; background: #f7f8f8; color: #6e7e80; }
.presentation-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.presentation-access-group { display: grid; gap: 4px; border-radius: 6px; padding: 8px; font-size: 0.64rem; line-height: 1.28; }
.presentation-access-group b { font-size: 0.62rem; text-transform: uppercase; }
.presentation-access-group span { color: #49635c; }
.presentation-access-group.authorized { background: #edf8f1; color: #1e704d; }
.presentation-access-group.restricted { background: #fff7e5; color: #795414; }
.presentation-access-group.request { background: #f0f5f3; color: #46655b; }
.presentation-access-group.disabled { background: #f3f4f4; color: #6f7d7c; }
.presentation-field-workspace { gap: 12px; }
.presentation-field-context .presentation-data-list,
.presentation-service-control .presentation-data-list { margin-top: 12px; }
.presentation-service-states { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.presentation-service-states span { border: 1px solid #dce6e3; border-radius: 999px; background: #f7faf9; padding: 4px 7px; color: #61716d; font-size: 0.62rem; font-weight: 800; }
.presentation-service-states span.is-current { border-color: #88c9ae; background: #e6f5ed; color: #176847; }
.presentation-evidence-panel .presentation-button-grid,
.presentation-field-comms .presentation-button-grid,
.presentation-act-preview .presentation-button-grid,
.presentation-consistency .presentation-button-grid { margin-top: 12px; }
.presentation-evidence-records { display: grid; gap: 8px; margin-top: 12px; }
.presentation-evidence-records > article { border: 1px solid #d8e6e1; border-radius: 6px; background: #f7fbf9; padding: 9px; }
.presentation-evidence-records > article > b { color: var(--p-institutional); font-size: 0.7rem; }
.presentation-evidence-records .presentation-data-list { margin-top: 8px; }
.presentation-evidence-panel .presentation-button-grid button,
.presentation-field-comms .presentation-button-grid button,
.presentation-act-preview .presentation-button-grid button,
.presentation-consistency .presentation-button-grid button { min-height: 35px; font-size: 0.7rem; }
.presentation-act-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.presentation-act-sections span { display: flex; gap: 7px; align-items: center; border: 1px solid #e0eae7; border-radius: 6px; background: #f8fbfa; padding: 7px; color: #48625b; font-size: 0.67rem; font-weight: 760; }
.presentation-act-sections b { color: var(--p-institutional); font-size: 0.63rem; }
.presentation-clarification-alert,
.presentation-addendum { margin-top: 12px; border-left: 3px solid var(--p-warning); background: #fff8e7; padding: 10px; color: #6e5017; font-size: 0.74rem; line-height: 1.42; }
.presentation-clarification-alert p,
.presentation-addendum p { margin: 5px 0; }
.presentation-clarification-alert button { margin-top: 5px; }
.presentation-consistency { margin-top: 14px; }
.presentation-consistency-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.presentation-consistency-table > div,
.presentation-clarification-form > span { display: grid; gap: 3px; border: 1px solid #e1eae7; border-radius: 6px; background: #f8fbfa; padding: 8px; color: #4f675f; font-size: 0.68rem; }
.presentation-consistency-table b,
.presentation-clarification-form b { color: var(--p-navy); font-size: 0.65rem; }
.presentation-clarification-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }

.presentation-justice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.presentation-justice-grid h3 { margin: 0; color: var(--p-navy); font-size: 1rem; }
.presentation-justice-grid > article > p { margin: 12px 0 0; color: var(--p-muted); line-height: 1.44; font-size: 0.82rem; }
.presentation-document-ref { color: var(--p-institutional) !important; font-size: 0.7rem !important; font-weight: 850; }
.presentation-municipal-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; margin-top: 12px; background: #f7fbf9; }
.presentation-municipal-card h3 { margin: 5px 0 0; color: var(--p-navy); font-size: 0.94rem; line-height: 1.4; }
.presentation-municipal-card dl { margin: 0; }

.presentation-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.presentation-act-card header { display: flex; gap: 10px; align-items: center; }
.presentation-act-card header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e3f3ef; color: var(--p-institutional); font-size: 0.74rem; font-weight: 900; }
.presentation-act-card h3 { margin: 0; color: var(--p-navy); font-size: 0.92rem; }
.presentation-act-card small { color: var(--p-muted); font-size: 0.68rem; font-weight: 750; }
.presentation-master-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; border: 1px solid #b8d6cf; border-radius: var(--p-radius); background: #eaf5f1; padding: 16px; }
.presentation-master-record h3 { margin: 4px 0; color: var(--p-navy); font-size: 1rem; }
.presentation-master-record span { color: var(--p-muted); font-size: 0.72rem; font-weight: 750; }
.presentation-master-record > div:last-child { display: grid; justify-items: end; gap: 7px; }
.presentation-master-record > div:last-child strong { color: var(--p-institutional); font-size: 0.8rem; }
.presentation-master-preview { margin-top: 14px; border: 1px solid #b8d6cf; border-radius: var(--p-radius); background: #f7fbf9; padding: 14px; }
.presentation-master-preview > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.presentation-master-preview header p { margin: 0; color: var(--p-muted); font-size: 0.67rem; font-weight: 900; text-transform: uppercase; }
.presentation-master-preview header h3 { margin: 4px 0 0; color: var(--p-navy); font-size: 0.94rem; line-height: 1.25; }
.presentation-master-preview .presentation-data-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.presentation-master-preview .presentation-data-list div { min-width: 0; }
.presentation-master-preview .presentation-data-list dd { overflow-wrap: anywhere; }

.presentation-closure-layout { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(240px, 340px); gap: 26px; align-items: center; }
.presentation-closure-console { min-height: 270px; }
.presentation-closure-console h3 { margin: 0; color: var(--p-navy); font-size: 1.18rem; }
.presentation-closure-console > p { color: var(--p-muted); line-height: 1.45; }
.closure-phone { min-height: 430px; justify-self: end; }
.closure-package { margin: 14px; border: 1px solid #d4e5df; border-radius: var(--p-radius); background: #fff; padding: 14px; }
.closure-package > p { margin: 0; color: var(--p-institutional); font-size: 0.74rem; font-weight: 900; }
.closure-package h3 { margin: 7px 0; color: var(--p-navy); font-size: 1.02rem; }
.closure-package dl { margin: 12px 0; }
.closure-package dl div { margin-top: 7px; }
.closure-package dt { color: var(--p-muted); font-size: 0.66rem; font-weight: 900; text-transform: uppercase; }
.closure-package dd { margin: 3px 0 0; color: var(--p-ink); font-size: 0.78rem; font-weight: 800; }
.closure-package ol { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--p-muted); font-size: 0.73rem; line-height: 1.4; }

.presentation-advanced { padding: 20px; }
.presentation-advanced h2 { margin: 0; color: var(--p-navy); font-size: 1.15rem; }
.presentation-advanced p { max-width: 860px; color: var(--p-muted); line-height: 1.48; }
.presentation-advanced .presentation-secondary { display: inline-flex; margin-top: 4px; }

body.advanced-demo { background: #f5f7f6; }
.advanced-demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1180px; margin: 16px auto 0; padding: 14px 18px; border: 1px solid #b8d4cb; border-radius: 8px; background: #0e4f48; color: #fff; }
.advanced-demo-banner p { margin: 0 0 3px; color: #cce9e1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.advanced-demo-banner strong { font-size: 1rem; }
.advanced-demo-banner a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid #d6efe8; border-radius: 6px; background: #fff; color: #0e4f48; padding: 0 14px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.advanced-demo-banner a:hover { background: #e3f3ee; }

.advanced-sync-panel,
.advanced-sync-nav { width: min(1180px, calc(100% - 32px)); margin: 16px auto 0; }
.advanced-sync-panel { border: 1px solid #c7dbd5; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(6, 37, 53, 0.05); padding: 22px; }
.advanced-sync-heading,
.advanced-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.advanced-sync-heading h1,
.advanced-section-heading h2 { margin: 4px 0 0; color: #062535; line-height: 1.14; }
.advanced-sync-heading h1 { max-width: 760px; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.advanced-sync-heading p:not(.eyebrow) { max-width: 780px; margin: 12px 0 0; color: #46615b; line-height: 1.5; }
.advanced-section-heading h2 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.advanced-section-heading > span { flex: 0 0 auto; border: 1px solid #b8d6cf; border-radius: 999px; background: #edf8f4; color: #0d665d; padding: 6px 9px; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; }
.advanced-sync-actions { display: grid; flex: 0 0 min(290px, 100%); gap: 8px; }
.advanced-sync-actions a { display: flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid #0e4f48; border-radius: 6px; padding: 0 14px; font-weight: 900; text-align: center; text-decoration: none; }
.advanced-sync-primary { background: #0e4f48; color: #fff; }
.advanced-sync-primary:hover { background: #073f39; }
.advanced-sync-secondary { background: #eef6f3; color: #0e4f48; }
.advanced-sync-secondary:hover { background: #dfeee9; }
.advanced-publication-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.advanced-publication-status li { display: grid; gap: 5px; border-left: 3px solid #168273; background: #f3f8f6; padding: 11px; }
.advanced-publication-status strong { color: #062535; font-size: 0.74rem; line-height: 1.3; }
.advanced-publication-status span { color: #46615b; font-size: 0.68rem; line-height: 1.35; }
.advanced-alignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.advanced-alignment-grid article,
.advanced-document-comparison article { border: 1px solid #d9e5e1; border-radius: 7px; background: #fbfdfc; padding: 15px; }
.advanced-alignment-grid h2,
.advanced-alignment-grid h3,
.advanced-document-comparison h3 { margin: 0; color: #062535; font-size: 0.98rem; }
.advanced-alignment-grid p,
.advanced-document-comparison p { margin: 9px 0 0; color: #46615b; font-size: 0.8rem; line-height: 1.46; }
.advanced-alignment-grid ul { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 18px; color: #46615b; font-size: 0.8rem; line-height: 1.38; }
.advanced-sync-nav { position: sticky; top: 8px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; overflow-x: visible; border: 1px solid #d5e1dd; border-radius: 8px; background: rgba(255, 255, 255, 0.96); padding: 8px; box-shadow: 0 4px 14px rgba(6, 37, 53, 0.06); }
.advanced-sync-nav a { flex: 0 0 auto; border-radius: 6px; background: #eef2ee; color: #16483f; padding: 8px 10px; font-size: 0.72rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.advanced-sync-nav a:hover,
.advanced-sync-nav a:focus-visible { background: #dceee8; color: #073f39; }
.advanced-demo > .section-nav { display: none; }
.advanced-flow-panel { padding-bottom: 18px; }
.advanced-final-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: flow; }
.advanced-final-flow li { min-height: 68px; border: 1px solid #d4e3de; border-radius: 7px; background: #f8fbfa; padding: 10px; color: #163f38; font-size: 0.73rem; font-weight: 850; line-height: 1.32; }
.advanced-final-flow li::before { content: counter(flow); counter-increment: flow; display: block; margin-bottom: 5px; color: #0e786e; font-size: 0.65rem; font-weight: 950; }
.advanced-flow-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.advanced-flow-rules p { margin: 0; border-left: 3px solid #d8951b; background: #fff9eb; padding: 10px; color: #5c4c21; font-size: 0.76rem; line-height: 1.4; }
.advanced-scenarios-panel { margin-bottom: 16px; }
.advanced-service-reference { margin: 16px 0; border: 1px solid #bcd8d1; border-radius: 8px; background: #eff8f5; padding: 14px; }
.advanced-service-reference dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.advanced-service-reference dl div { border: 1px solid #d1e4de; border-radius: 6px; background: #fff; padding: 9px; }
.advanced-service-reference dt { color: #0c635a; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.advanced-service-reference dd { margin: 4px 0 0; color: #234a43; font-size: 0.75rem; font-weight: 750; line-height: 1.35; }
.advanced-service-states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.advanced-service-states span { border: 1px solid #bad8d1; border-radius: 999px; background: #fff; color: #23574e; padding: 5px 8px; font-size: 0.66rem; font-weight: 850; }
.advanced-service-reference > p { margin: 12px 0 0; color: #4a635e; font-size: 0.76rem; line-height: 1.42; }
.advanced-module-note { margin: 9px 0; border-left: 3px solid #168273; background: #edf8f5; padding: 8px 10px; color: #23574e; font-size: 0.76rem; line-height: 1.4; }
.advanced-documentary-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0; border: 1px solid #b8d6cf; border-radius: 7px; background: #eff8f5; padding: 13px; }
.advanced-documentary-flow strong { border-left: 3px solid #0e786e; background: #fff; padding: 7px 9px; color: #063f39; font-size: 0.73rem; line-height: 1.35; }
.advanced-documentary-flow b { color: #c98612; }
.advanced-document-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }

@media (max-width: 900px) {
  .advanced-publication-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-final-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-flow-rules,
  .advanced-service-reference dl { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .advanced-sync-panel,
  .advanced-sync-nav { width: min(100% - 20px, 620px); }
  .advanced-sync-panel { padding: 16px; }
  .advanced-sync-heading,
  .advanced-section-heading { flex-direction: column; }
  .advanced-sync-actions { width: 100%; }
  .advanced-publication-status,
  .advanced-alignment-grid,
  .advanced-final-flow,
  .advanced-document-comparison { grid-template-columns: 1fr; }
  .advanced-sync-nav { top: 0; margin-top: 10px; flex-wrap: nowrap; overflow-x: auto; }
  .advanced-section-heading > span { align-self: flex-start; }
}

@media print {
  .advanced-sync-nav {
    position: static;
    top: auto;
    box-shadow: none;
    overflow: visible;
  }
}

body.presentation-filming .presentation-console-card:not(.is-involved),
body.presentation-filming .presentation-municipal-card { display: none; }
body.presentation-filming .presentation-section:not(.is-tour-active) { opacity: 0.78; }
body.presentation-filming .presentation-section.is-tour-active { opacity: 1; }

@media (max-width: 1120px) {
  .presentation-header { grid-template-columns: auto 1fr; }
  .presentation-nav { grid-column: 1 / -1; grid-row: 2; justify-content: start; overflow-x: auto; padding-bottom: 2px; }
  .presentation-locale { justify-self: end; }
  .presentation-hero { grid-template-columns: minmax(0, 1fr) minmax(310px, 0.8fr); }
  .master-console-grid { grid-template-columns: 1fr 1fr; }
  .master-route-card { grid-column: 1 / -1; }
  .presentation-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presentation-justice-grid { grid-template-columns: 1fr 1fr; }
  .presentation-justice-grid > article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .advanced-demo-banner { margin: 10px; align-items: stretch; flex-direction: column; }
  .advanced-demo-banner a { width: 100%; }
  .presentation-header,
  .presentation-main { width: min(100% - 20px, 620px); }
  .presentation-header { gap: 10px; padding: 9px 10px; }
  .presentation-brand { font-size: 1.08rem; }
  .presentation-locale span { display: none; }
  .presentation-locale select { min-width: 110px; }
  .presentation-hero { grid-template-columns: 1fr; padding: 24px; }
  .presentation-hero-map { min-height: 230px; }
  .presentation-tour { grid-template-columns: 1fr; }
  .presentation-tour-controls { justify-content: start; }
  .presentation-tour-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
  .presentation-section { padding: 18px; }
  .presentation-device-layout,
  .presentation-field-layout,
  .presentation-closure-layout,
  .presentation-master-resource-grid { grid-template-columns: 1fr; }
  .presentation-phone { justify-self: center; }
  .presentation-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-console-grid,
  .presentation-justice-grid,
  .presentation-document-grid,
  .presentation-console-grid,
  .presentation-config-list { grid-template-columns: 1fr; }
  .master-route-card,
  .presentation-justice-grid > article:last-child { grid-column: auto; }
  .presentation-municipal-card { grid-template-columns: 1fr; }
  .presentation-master-record { grid-template-columns: 1fr; }
  .presentation-master-record > div:last-child { justify-items: start; }
  .presentation-master-preview .presentation-data-list { grid-template-columns: 1fr; }
  .presentation-clarification-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closure-phone { justify-self: center; }
}

@media (max-width: 420px) {
  .presentation-header,
  .presentation-main { width: min(100% - 14px, 390px); }
  .presentation-header { border-radius: 0 0 6px 6px; }
  .presentation-nav a { padding: 7px 8px; font-size: 0.72rem; }
  .presentation-hero { margin-top: 8px; padding: 20px; }
  .presentation-hero h1 { font-size: 2.45rem; }
  .presentation-hero h2 { font-size: 1.2rem; }
  .presentation-access-grid,
  .presentation-consistency-table,
  .presentation-act-sections,
  .presentation-clarification-form { grid-template-columns: 1fr; }
  .presentation-media-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .presentation-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .presentation-actions .presentation-primary,
  .presentation-actions .presentation-secondary { min-width: 0; font-size: 0.78rem; }
  .presentation-actions .presentation-icon-action { justify-self: start; }
  .presentation-section-heading { display: grid; }
  .presentation-step-tag { justify-self: start; }
  .presentation-alert-grid { grid-template-columns: 1fr 1fr; }
  .presentation-alert-option { min-height: 52px !important; font-size: 0.7rem; }
  .presentation-permission-set { display: grid; }
  .presentation-permission-set label,
  .presentation-permission-set > span { border-radius: 6px; }
  .presentation-phone { width: 100%; max-width: 330px; }
  .presentation-phone:not(.field-phone) { min-height: 520px; }
  .master-console-grid dl,
  .presentation-console-card dl,
  .field-context-card dl,
  .presentation-justice-grid dl,
  .presentation-act-card dl,
  .presentation-closure-console dl,
  .presentation-municipal-card dl,
  .field-workspace-grid { grid-template-columns: 1fr; }
  .presentation-button-grid { grid-template-columns: 1fr; }
  .presentation-record-flow { justify-content: start; text-align: left; }
  .presentation-tour-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-media { grid-template-columns: 1fr; }
  .presentation-hero-map { min-height: 212px; }
  .hero-master { top: 24px; right: 24px; left: auto; transform: none; }
  .hero-field { right: 50%; bottom: 18px; transform: translateX(50%); }
  .hero-flow { display: none; }
  .presentation-confidential-fields { grid-template-columns: 1fr; }
}

/* Final flow consistency: field phone stays compact and documents expose their next action. */
.presentation-other-consoles { margin-top: 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: #f8fbfa; }
.presentation-other-consoles summary { cursor: pointer; padding: 12px 14px; color: var(--p-institutional); font-size: 0.78rem; font-weight: 900; }
.presentation-other-consoles[open] > .presentation-console-grid { padding: 0 14px 14px; }
.presentation-dispatch-list { display: grid; gap: 7px; margin-top: 12px; }
.presentation-dispatch-list div { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr); gap: 3px 8px; border-left: 3px solid var(--p-institutional); background: #f4f9f7; padding: 8px; }
.presentation-dispatch-list b { color: var(--p-navy); font-size: 0.72rem; }
.presentation-dispatch-list span { color: #41615a; font-size: 0.72rem; font-weight: 750; }
.presentation-dispatch-list small { grid-column: 1 / -1; color: var(--p-muted); font-size: 0.64rem; font-weight: 800; }

.field-phone { height: auto; min-height: 0; display: flex; flex-direction: column; align-self: start; background: #f7faf9; }
.field-phone-context { display: grid; gap: 9px; padding: 13px; }
.field-phone-context > p { margin: 0; color: var(--p-institutional); font-size: 0.66rem; font-weight: 950; text-transform: uppercase; }
.field-phone-context h3 { margin: 0; color: var(--p-navy); font-size: 0.94rem; line-height: 1.3; }
.field-phone-context .presentation-data-list { grid-template-columns: 1fr; margin: 0; }
.field-phone-context .presentation-data-list div { padding: 7px; }
.field-phone-context .presentation-data-list dt { font-size: 0.59rem; }
.field-phone-context .presentation-data-list dd { font-size: 0.7rem; line-height: 1.35; }
.field-phone-actions { position: static; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-phone-actions button:last-child { grid-column: 1 / -1; }

.presentation-document-flow { display: grid; gap: 7px; margin-top: 14px; border: 1px solid #b8d6cf; border-radius: var(--p-radius); background: #edf8f4; padding: 14px; }
.presentation-document-flow > strong { color: var(--p-institutional); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.03em; }
.presentation-document-flow > span { border-left: 3px solid var(--p-institutional); background: #fff; padding: 7px 9px; color: var(--p-navy); font-size: 0.72rem; font-weight: 850; }
.presentation-document-flow > b { justify-self: center; color: var(--p-warning); line-height: 0.9; }
.presentation-document-flow > p { margin: 3px 0 0; color: #41615a; font-size: 0.74rem; line-height: 1.42; }

.presentation-procedure-status { display: grid; gap: 12px; margin-top: 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: #fff; padding: 14px; }
.presentation-procedure-status > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.presentation-procedure-status header p { margin: 0; color: var(--p-muted); font-size: 0.66rem; font-weight: 900; text-transform: uppercase; }
.presentation-procedure-status header h3 { margin: 4px 0 0; color: var(--p-navy); font-size: 0.9rem; line-height: 1.35; }
.presentation-procedure-status ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.presentation-procedure-status li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-left: 3px solid #b9c7c3; background: #f7faf9; padding: 7px 9px; color: #4d645d; font-size: 0.72rem; line-height: 1.35; }
.presentation-procedure-status li b { flex: 0 0 auto; font-size: 0.64rem; }
.presentation-procedure-status li.is-completed { border-left-color: #2c9b75; background: #edf8f1; color: #176847; }
.presentation-procedure-status li.is-in-progress { border-left-color: var(--p-warning); background: #fff7e5; color: #795414; }
.presentation-procedure-next { display: flex; align-items: end; justify-content: space-between; gap: 10px; border-top: 1px solid #e1ebe8; padding-top: 12px; }
.presentation-procedure-next p { margin: 0; color: var(--p-muted); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.presentation-procedure-next strong { display: block; margin-top: 4px; color: var(--p-navy); font-size: 0.78rem; }
.presentation-procedure-next button { min-height: 34px; }
.presentation-procedure-notice { margin: 0; border-left: 3px solid var(--p-warning); background: #fff8e7; padding: 9px; color: #705018; font-size: 0.72rem; line-height: 1.4; }

body.presentation-filming .presentation-other-consoles { display: none; }

@media (max-width: 760px) {
  .presentation-dispatch-list div { grid-template-columns: 1fr; }
  .presentation-dispatch-list small { grid-column: auto; }
  .field-phone { width: 100%; max-width: 360px; justify-self: center; }
  .presentation-procedure-next { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
  .field-phone { min-height: 0; }
  .field-phone-actions { grid-template-columns: 1fr; }
  .field-phone-actions button:last-child { grid-column: auto; }
  .presentation-procedure-status li { align-items: start; flex-direction: column; }
}