/* V1.7 fluid responsive layer; loaded after legacy styles.css. */
:root {
  --desktop-content: 1520px;
  --desktop-gutter: clamp(20px, 4vw, 72px);
}

.login-brand-panel {
  display: none;
}

@media (min-width: 1440px) {
  .login-screen {
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, 0.92fr);
    gap: clamp(56px, 7vw, 140px);
    min-height: 100dvh;
    padding: clamp(56px, 7vh, 92px) max(var(--desktop-gutter), calc((100vw - var(--desktop-content)) / 2));
  }

  .login-brand-panel {
    display: grid;
    align-content: center;
    max-width: 620px;
    color: #fff;
  }

  .login-brand-panel strong {
    color: #d9ad4a;
    font-size: clamp(22px, 1.7vw, 32px);
    letter-spacing: 0.08em;
  }

  .login-brand-panel h2 {
    max-width: 620px;
    margin: 22px 0 16px;
    color: #fff;
    font-size: clamp(48px, 4.2vw, 72px);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .login-brand-panel p {
    max-width: 560px;
    margin: 0;
    color: #cbd5e1;
    font-size: clamp(18px, 1.25vw, 22px);
    line-height: 1.75;
  }

  .login-card {
    width: clamp(500px, 28vw, 540px);
    justify-self: end;
    padding: clamp(38px, 3vw, 52px);
  }

  .intro {
    width: 100%;
    max-width: none;
    padding-inline: max(var(--desktop-gutter), calc((100vw - var(--desktop-content)) / 2));
  }

  .app-view,
  .home-view,
  #intakeView.workspace,
  #clientsView,
  .detail-view,
  .mine-view {
    width: min(calc(100% - (2 * var(--desktop-gutter))), var(--desktop-content));
    max-width: var(--desktop-content);
  }

  .bottom-nav {
    left: 50%;
    width: min(760px, calc(100vw - 48px));
    transform: translateX(-50%);
  }

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

  .home-stats button {
    grid-template-columns: 44px minmax(0, 1fr) auto 12px;
    min-height: 92px;
  }

  .records-panel {
    padding-inline: 0;
  }

  .client-sticky-toolbar {
    top: 76px;
  }

  .records-list {
    display: grid;
    gap: 0;
  }

  .record-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(520px, 3fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 96px;
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
  }

  .record-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 18px;
  }

  #clientForm.form-panel {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  #clientForm .form-page-heading {
    grid-column: 1 / -1;
  }

  #clientForm .inline-chat-assistant {
    grid-column: 1;
    grid-row: 2 / span 4;
    margin: 0;
  }

  #clientForm .form-step-nav,
  #clientForm .form-grid,
  #clientForm .actions,
  #clientForm #statusMessage {
    grid-column: 2;
  }

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

  #clientForm .full-row {
    grid-column: 1 / -1;
  }

  #detailContent .detail-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #detailContent .detail-menu > section:last-child {
    grid-column: 1 / -1;
  }

  .mine-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
  }

  .mine-menu button {
    min-height: 72px;
  }

  .mine-tools,
  .mine-tools .export-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 1439px) {
  .intro {
    width: 100%;
    max-width: none;
  }

  .app-view {
    width: min(calc(100% - 40px), 1180px);
    max-width: 1180px;
  }

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

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

@media (max-width: 680px) {
  .form-grid,
  .mine-menu {
    grid-template-columns: 1fr;
  }
}