/* Approved workspace layout, shared by every HUB screen.
   Keep component surfaces and the existing theme; the page itself is fluid.
   Screen-only rules preserve the dimensions of printed documents. */
@media screen {
  :root {
    --workspace-gutter: clamp(16px, 2vw, 32px);
    --workspace-gap: 16px;
    --workspace-radius: 20px;
  }

  .wrap, .cx {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--workspace-gutter);
    min-width: 0;
  }
  .wrap { padding-top: 105px; padding-bottom: 48px; }
  .nav { padding-inline: var(--workspace-gutter); }
  .login .hd, .login .main { padding-inline: var(--workspace-gutter); }
  .msgwrap { width: 100%; max-width: none; padding-inline: var(--workspace-gutter); }
  .msgwrap > .authcard { width: 100%; max-width: 440px; margin-inline: auto; }

  /* Project choices have a consistent footprint even when names wrap. */
  .pg-landing .tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: var(--workspace-gap);
  }
  .pg-landing .tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 150px;
    padding: 24px;
    border-radius: var(--workspace-radius);
  }
  .pg-landing .tile .tn { overflow-wrap: anywhere; line-height: 1.2; }
  .pg-landing .tile .code { margin-top: auto; padding-top: 20px; }

  /* Content sections remain distinct, with one spacing scale everywhere. */
  .wrap > .card, .wrap > section > .card {
    margin-top: var(--workspace-gap);
    border-radius: var(--workspace-radius);
    min-width: 0;
  }
  .wrap .card__h, .wrap .card__b { padding: 20px; }
  .wrap .card__h--row, .wrap .createform, .wrap .cal-bar {
    flex-wrap: wrap;
    gap: var(--workspace-gap);
  }
  .wrap .createform > .field { min-width: 0; }
  .wrap .createform :is(input, select, textarea) { max-width: 100%; }
  .wrap .card__b--scroll { max-width: 100%; overscroll-behavior-x: contain; }
  .wrap .display { overflow-wrap: anywhere; }
  .wrap .segment { gap: 8px; }
  .wrap .seg { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .wrap .pagehead { justify-content: space-between; gap: var(--workspace-gap); }
  .login .tabs { gap: var(--workspace-gap); align-items: stretch; grid-auto-rows: 1fr; }
  .login .tab { min-width: 0; }

  @media (max-width: 767px) {
    .wrap { padding-top: 96px; }
    .wrap .card__h, .wrap .card__b { padding: 16px; }
    .pg-landing .tiles { grid-template-columns: minmax(0, 1fr); }
    .pg-landing .tile { min-height: 136px; padding: 20px; }
  }
}