/* Client portal: shared typography, legible document catalogue and floating windows. */
:root {
  --brand: #86cfdf;
  --brand-soft: #b9e7f0;
  --brand-strong: #70bdcf;
  --welcome: #091725;
  --chrome: #0b1622;
  --line: #344958;
}
.app {
  grid-template-rows: 72px minmax(0, 1fr) 32px;
}
.topbar {
  padding: 0 28px;
  gap: 24px;
  background: #0b1622f5;
  border-bottom-color: #8bb4c222;
}
.brand {
  gap: 14px;
}
.brand small {
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 1.1px;
}
.topnav {
  gap: 6px;
}
.nav-button,
.nav-link,
.ghost-button,
.primary-compact {
  font-size: 12px;
  min-height: 38px;
  padding: 9px 12px;
}
.nav-button {
  background: transparent;
  border-color: transparent;
}
.ghost-button {
  color: #d6e4ec;
  font-variant-numeric: tabular-nums;
}
.primary-compact,
.primary {
  background: #9bd9e5;
  border: 1px solid #bfebf2;
  box-shadow: 0 6px 24px #122c4160;
  color: #102935;
}
.primary:hover,
.primary-compact:hover {
  background: #b8e7ef;
}
.primary,
.secondary {
  font-size: 13px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.secondary {
  border-color: #547888;
  background: #102634a6;
}
.canvas-grid {
  opacity: 0.18;
  background-size:
    40px 40px,
    40px 40px,
    200px 200px,
    200px 200px;
}
.ambient {
  opacity: 1;
}
.hero {
  width: min(610px, calc(100vw - 780px));
  left: 50%;
  top: 43%;
  text-align: left;
  padding: 28px 4px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -60px -45px;
  z-index: -1;
  background: radial-gradient(ellipse, #081a29ed 30%, #081a2900 72%);
  pointer-events: none;
}
.hero-mark {
  margin: 0 0 24px;
  width: 54px;
  height: 42px;
}
.hero-mark span {
  left: 0;
  border-color: #97dbed88;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #9fc7d1;
  line-height: 1.7;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 520;
  line-height: 1.13;
  letter-spacing: -1.9px;
  color: #f0f5f8;
}
.hero p {
  font-size: 14px;
  line-height: 1.85;
  color: #b5c9d5;
  margin-top: 24px;
}
.hero-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0 0;
  gap: 10px;
}
.hero-actions button {
  flex: 1;
  white-space: nowrap;
}
.hero small {
  font-size: 11px;
  color: #91aebc;
  margin-top: 17px;
}
.hero-process {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  border-top: 1px solid #8ab2c22a;
  padding-top: 22px;
  font-size: 11px;
  color: #b1c7d2;
}
.hero-process b {
  font-size: 10px;
  color: #7d9cae;
  margin-right: 7px;
}
.hero-process i {
  flex: 1;
  height: 1px;
  background: #58738666;
}
.project-panel {
  width: 304px;
  top: 32px;
  right: 24px;
  padding: 20px;
  background: #102131ec;
  border-color: #6d98a744;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px #0003;
  max-height: calc(100% - 64px);
  overflow: auto;
}
.panel-title {
  margin-bottom: 20px;
  min-height: 32px;
}
.panel-title strong {
  font-size: 15px;
}
.project-panel label,
.modal label {
  font-size: 12px;
  gap: 8px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #afc4cf;
}
.project-panel input,
.project-panel select,
.modal input,
.modal select {
  font-size: 13px;
  min-height: 42px;
  border-color: #3b5565;
  background: #0b1a28;
  border-radius: 7px;
  padding: 10px 12px;
}
.panel-stats {
  gap: 10px;
  margin: 20px 0;
}
.panel-stats span {
  font-size: 11px;
}
.panel-stats strong {
  font-size: 12px;
}
.panel-stats > div {
  background: #183040;
  border-color: #3c586a60;
  padding: 12px;
}
.panel-note strong {
  font-size: 12px;
}
.panel-note p {
  font-size: 12px;
  line-height: 1.75;
  color: #a0b7c4;
}
.text-button {
  font-size: 12px;
  color: #a4dce8;
}
.submit-main {
  font-size: 12px;
}
.panel-divider {
  border-color: #668b9f33;
}
.project-panel.is-collapsed {
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
}
.project-panel.is-collapsed > :not(.panel-title) {
  display: none !important;
}
.project-panel.is-collapsed .panel-title {
  margin: 0;
}
.requirements-board {
  padding: 16px !important;
  background: #102131e8;
  border-color: #6d98a744;
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  height: max(360px, calc(100dvh - 230px));
  max-height: calc(100dvh - 230px);
  overflow: hidden;
  box-shadow: 0 20px 60px #0003;
}
.requirements-board[hidden] {
  display: none !important;
}
.catalog-tabs {
  display: flex;
  padding: 4px;
  background: #07172399;
  border-radius: 8px;
  margin-bottom: 20px;
  gap: 4px;
}
.catalog-tabs button {
  flex: 1;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 9px 4px;
  font-size: 11px;
  color: #9ab3c3;
}
.catalog-tabs button[aria-pressed='true'] {
  background: #254052;
  color: #def1f4;
}
.requirements-heading {
  align-items: start;
  gap: 10px;
}
.requirements-heading h2 {
  font-size: 19px !important;
  letter-spacing: -0.4px;
}
.requirements-count {
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}
.requirements-eyebrow {
  font-size: 8px;
  letter-spacing: 1px;
}
.requirements-audience {
  font-size: 11px;
  line-height: 1.6;
  margin: 12px 0;
}
.requirement-item {
  grid-template-columns: 32px 1fr !important;
  gap: 5px 10px !important;
  min-height: 75px !important;
  padding: 10px !important;
  align-items: start;
  border-color: #4a677747;
  border-radius: 7px;
  background: #0b1c2c;
}
.requirement-thumbnail {
  grid-row: 1/3;
}
.requirement-number {
  display: none;
}
.requirement-copy {
  min-width: 0;
}
.requirement-copy strong {
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  display: block;
}
.requirement-copy small {
  font-size: 10px;
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
  display: block;
  margin-top: 3px;
}
.requirement-status {
  grid-column: 2;
  justify-self: start;
  font-size: 8px;
  margin-top: 2px;
}
.requirements-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  align-content: start;
  gap: 8px;
}
.requirements-detail {
  font-size: 11px;
  line-height: 1.6;
  padding: 12px;
}
.requirements-detail strong,
.requirements-detail span {
  font-size: 10px;
  line-height: 1.6;
}
.requirements-source {
  font-size: 9px;
  line-height: 1.6;
  gap: 8px;
}
.help-card {
  left: 24px;
  bottom: 20px;
  width: 250px;
  background: #102131e8;
  border-color: #4e707f66;
  height: 62px;
}
.help-card small {
  font-size: 11px;
}
.help-card strong {
  font-size: 13px;
}
.zoom-controls {
  left: auto;
  right: 24px;
  bottom: 20px;
  background: #102131e8;
}
.zoom-controls output {
  font-size: 12px;
}
.statusbar {
  font-size: 10px;
  padding: 0 28px;
}
.status-note {
  color: #8aa4b3;
}
.modal {
  width: min(580px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border-color: #668b9b70;
  background: #102131;
  border-radius: 14px;
  overflow: auto;
}
.modal form,
.info-content {
  padding: 24px;
}
.modal-title {
  padding-bottom: 16px;
  border-bottom: 1px solid #43617477;
  align-items: center;
}
.modal-title strong {
  font-size: 20px;
  line-height: 1.3;
}
.modal-title small {
  font-size: 9px;
  color: #9bc3d0;
}
.modal p {
  font-size: 13px;
  line-height: 1.75;
  color: #b3c7d2;
}
.modal .consent {
  font-size: 11px;
}
.modal-meta {
  font-size: 11px;
}
.modal-actions {
  gap: 12px;
  margin-top: 20px;
}
.modal::backdrop {
  background: #040d16a8;
  backdrop-filter: blur(8px);
}
.service-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.service-steps li {
  padding: 12px 0 12px 45px;
  position: relative;
}
.service-steps li::before {
  counter-increment: step;
  content: '0' counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  color: #8dcbd7;
  font-size: 13px;
}
.service-steps b {
  font-size: 14px;
}
.service-steps p {
  margin: 7px 0;
}
.info-note {
  padding: 14px;
  background: #1d3545;
  border-radius: 8px;
}
.intake-summary {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  font-size: 13px;
  padding: 15px 0;
}
.intake-summary span {
  color: #9bb1c0;
}
.intake-summary strong {
  font-weight: 500;
}
.viewer,
.irkutsk-preview-window {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 64px));
  height: min(740px, calc(100dvh - 140px));
  min-width: 0;
  border-color: #759aa988;
  z-index: 110;
  background: #102131;
}
.viewer-header {
  height: 60px;
  background: #152c3d;
}
.viewer-title strong {
  font-size: 15px;
}
.viewer-title small {
  font-size: 11px;
}
.viewer-title {
  min-width: 0;
}
.viewer-title strong,
.viewer-title small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-toolbar {
  font-size: 12px;
}
.viewer-body {
  height: calc(100% - 102px);
}
.viewer-actions {
  flex-shrink: 0;
}
.window-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.window-handle:active {
  cursor: grabbing;
}
.window-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border: 0;
  background: #183447;
  color: #b2d9e1;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 10;
  border-radius: 8px 0;
}
.window-interacting iframe {
  pointer-events: none;
}
.viewer[hidden] {
  display: none;
}
@media (max-width: 1299px) and (min-width: 761px) {
  .hero {
    width: calc(100vw - 700px);
  }
  .hero-actions {
    display: grid;
  }
  .hero h1 {
    font-size: 32px;
  }
  .topbar {
    gap: 10px;
    padding: 0 18px;
  }
  .nav-button,
  .nav-link,
  .primary-compact {
    padding: 8px;
    font-size: 11px;
  }
  .project-panel {
    width: 280px;
    right: 18px;
  }
  .hero-process {
    gap: 5px;
    font-size: 10px;
  }
  .hero-process i {
    display: none;
  }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .requirements-board {
    max-height: calc(100dvh - 270px);
  }
  .hero {
    left: 70%;
    width: 44%;
    top: 35%;
  }
  .project-panel {
    top: auto;
    bottom: 24px;
    right: 24px;
    width: 44%;
    max-height: 220px;
  }
  .nav-secondary,
  .brand small,
  .brand-divider {
    display: none;
  }
  .hero-process {
    display: none;
  }
}
@media (max-width: 760px) {
  .app {
    grid-template-rows: 64px minmax(0, 1fr) 28px;
  }
  .topbar {
    padding: 0 16px;
    gap: 8px;
  }
  .topnav {
    display: flex;
    margin-left: auto;
  }
  .topnav > :not([data-action='menu']) {
    display: none;
  }
  .top-actions {
    margin-left: 0;
  }
  .top-actions .primary-compact {
    display: none;
  }
  .top-actions .ghost-button {
    display: flex;
    padding: 6px;
    font-size: 11px;
  }
  .brand img {
    max-width: 92px;
  }
  .brand small,
  .brand-divider {
    display: none;
  }
  .canvas {
    overflow: auto;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
  }
  .ambient,
  .canvas-grid {
    position: fixed;
    top: 64px;
    height: calc(100dvh - 92px);
  }
  .hero {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 50px 24px 36px;
    order: 0;
    text-align: left;
    flex-shrink: 0;
  }
  .hero h1 {
    font-size: 38px;
    letter-spacing: -1.4px;
  }
  .hero p {
    font-size: 14px;
  }
  .hero-actions {
    display: grid;
  }
  .hero-process {
    margin-top: 28px;
  }
  .hero-mark {
    display: none;
  }
  .project-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: auto;
    margin: 0 16px 24px;
    order: 1;
    max-height: none;
    overflow: visible;
    flex-shrink: 0;
  }
  .project-panel > :not(.panel-title) {
    opacity: 1;
    pointer-events: auto;
  }
  .canvas-layer {
    position: relative;
    order: 2;
    inset: auto;
    transform: none !important;
    will-change: auto;
    flex-shrink: 0;
  }
  .requirements-board {
    position: relative;
    top: auto !important;
    left: auto !important;
    margin: 0 16px 24px;
    max-height: none;
    width: calc(100% - 32px) !important;
  }
  .requirements-detail {
    display: block;
  }
  .help-card {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 0 16px 24px;
    order: 3;
    width: calc(100% - 32px);
    flex-shrink: 0;
  }
  .zoom-controls {
    display: none;
  }
  .statusbar {
    padding: 0 16px;
  }
  .viewer,
  .irkutsk-preview-window {
    left: 12px;
    right: auto;
    top: 76px;
    transform: none;
    width: calc(100vw - 24px);
    height: calc(100dvh - 100px);
  }
  .viewer-body {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .viewer-title strong {
    font-size: 13px;
  }
  .viewer-title small {
    font-size: 10px;
  }
  .viewer-header {
    padding: 0 10px;
  }
  .modal-title strong {
    font-size: 18px;
  }
  .modal form,
  .info-content {
    padding: 18px;
  }
  .app[data-mode='work'] .hero {
    display: none;
  }
  .app[data-mode='work'] .canvas-layer {
    min-height: 430px;
  }
  .app[data-mode='work'] .document-card {
    left: 16px !important;
    max-width: calc(100vw - 32px);
  }
  .window-grip {
    width: 32px;
    height: 32px;
  }
  .requirements-board .requirement-item {
    grid-template-columns: 32px 1fr !important;
  }
}
.hero-process > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hero-process b {
  margin-right: 0;
}
@media (min-width: 1001px) {
  .project-panel {
    max-height: calc(100% - 110px);
  }
}
@media (min-width: 761px) and (max-width: 1299px) {
  .hero-process {
    gap: 18px;
  }
}
/* Two independent document windows and the original centered introduction. */
.app[data-mode='welcome'] .project-panel { display:none; }
.hero { width:min(450px,calc(100vw - 920px));text-align:center;top:47%; }
.hero-mark {margin:0 auto 22px;}
.hero h1 {font-size:clamp(28px,2.5vw,38px);line-height:1.15;letter-spacing:-1px;}
.hero-actions {display:grid;width:260px;max-width:100%;margin:24px auto 0;}
.hero p {font-size:13px;}
.requirements-heading {padding-bottom:12px;}
@media (min-width:761px) and (max-width:1050px) {
 .canvas {overflow:auto;display:flex;flex-direction:column;}
 .hero {position:relative;left:auto;top:auto;transform:none;width:auto;padding:44px 24px;flex-shrink:0;}
 .canvas-layer {position:relative;inset:auto;transform:none!important;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;order:2;}
 .requirements-board {position:relative;left:auto!important;top:auto!important;width:auto!important;max-height:650px;}
 .hero {order:1;}.help-card {display:none;}.zoom-controls{display:none;}
 .app[data-mode='work'] .hero{display:none;}
 .project-panel{position:relative;left:auto;right:auto;top:auto;bottom:auto;max-height:none;width:auto;margin:20px;}
}
@media (max-width:760px) {
 .hero {width:auto;top:auto;left:auto;transform:none;padding:48px 24px 36px;text-align:center;}
 .hero h1 {font-size:32px;}.hero-actions{width:100%;}.hero-mark{display:none;}
}
@media (max-width:1050px) { .requirements-board {order:2;flex-shrink:0;} }
@media (min-width:761px) and (max-width:1050px) { .requirements-board {margin:0 20px 20px;} }

/* Keep the window chrome visible while its document list scrolls. */
.requirements-heading,
.requirements-audience,
.requirements-detail,
.requirements-source { flex-shrink: 0; }
@media (max-width:1050px) {
  .requirements-board { height: 650px; max-height: 75dvh; }
}

@media (max-width:1050px) {
  .requirements-board .window-handle { touch-action: pan-y; cursor: default; }
  .requirements-board .window-grip { display: none; }
}
@media (max-width:760px) {
  .viewer,
  .irkutsk-preview-window {
    top: max(76px, env(safe-area-inset-top));
    height: min(640px, calc(100dvh - 124px));
    bottom: auto;
  }
  .viewer-header { flex-shrink: 0; }
  .viewer-title { flex: 1; overflow: hidden; }
  .viewer-title > span:last-child { min-width: 0; }
  .viewer-actions button { min-width: 44px; min-height: 44px; font-size: 24px; }
  .irkutsk-preview-window { display: flex; flex-direction: column; overflow: hidden; }
  .irkutsk-preview-toolbar { flex-shrink: 0; }
  .irkutsk-preview-window .viewer-body { flex: 1; min-height: 0; height: auto; }
  .irkutsk-preview-note { flex-shrink: 0; }
}

.start-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.start-option { min-height: 104px; padding: 20px 12px; border: 1px solid #547887; border-radius: 10px; background: #183446; color: #e1eff3; font-size: 17px; font-weight: 600; cursor: pointer; }
.start-option:hover, .start-option:focus-visible { background: #24495b; border-color: #a0d8e2; }
#startModal .modal-title button { min-width: 44px; min-height: 44px; }
@media (max-width: 420px) { .start-options { grid-template-columns: 1fr; } .start-option { min-height: 76px; } }

.office-demo-modal { width: min(1200px, calc(100vw - 32px)); height: calc(100dvh - 40px); max-height: calc(100dvh - 24px); padding: 16px; overflow: hidden; }
.office-demo-modal[open] { display: flex; flex-direction: column; }
.office-demo-modal > .modal-title { flex-shrink: 0; }
.office-demo-modal .modal-title button { min-width: 44px; min-height: 44px; }
.office-demo-modal .office-demo-notice { font-size: 12px; margin: 8px 0 0; flex-shrink: 0; }
.office-demo-modal .office-demo-status { font-size: 11px; margin: 5px 0 10px; flex-shrink: 0; }
.office-demo-host { flex: 1; min-height: 0; overflow: hidden; }
.office-demo-host > div, .office-demo-host iframe { width: 100%; height: 100%; border: 0; }
@media (max-width:760px) { .office-demo-modal { padding: 10px; width: calc(100vw - 16px); height: calc(100dvh - 24px); } }

.office-demo-host iframe { position: static !important; }

.office-window-actions { display: flex; gap: 4px; flex-shrink: 0; }
.office-demo-modal.is-maximized { position: fixed !important; inset: 0 !important; margin: 0 !important; transform: none !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0; border: 0; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.office-demo-modal.is-maximized .window-grip { display: none; }
.office-demo-modal.is-maximized .window-handle { cursor: default; }

/* A single compact title bar when the document fills the viewport. */
.office-demo-modal.is-maximized { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.office-demo-modal.is-maximized > .modal-title { height: 34px; min-height: 34px; margin: 0; padding: 0 6px 0 12px; gap: 6px; align-items: center; }
.office-demo-modal.is-maximized > .modal-title > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.office-demo-modal.is-maximized .modal-title small { font-size: 11px; letter-spacing: 0; }
.office-demo-modal.is-maximized .modal-title strong { font-size: 12px; line-height: 1; }
.office-demo-modal.is-maximized .modal-title strong::before { content: '·'; margin-right: 7px; color: #9bc3d0; }
.office-demo-modal.is-maximized .modal-title button { min-width: 32px; min-height: 32px; padding: 0; }
.office-demo-modal.is-maximized .office-demo-notice,
.office-demo-modal.is-maximized .office-demo-status { display: none; }
@media (pointer: coarse) {
  .office-demo-modal.is-maximized > .modal-title { height: 44px; min-height: 44px; }
  .office-demo-modal.is-maximized .modal-title button { min-height: 44px; min-width: 40px; }
}

.requirements-guide { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 0; border: 0; background: transparent; color: #a3d6e1; cursor: pointer; white-space: nowrap; text-align: right; }
.requirements-guide span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.requirements-guide:hover { color: #e0f7ff; }
#signageGuideModal .modal-title button, #facadeGuideModal .modal-title button { min-width: 44px; min-height: 44px; }