/* Baltz Street: Desktop layout (900px and up) and small-screen tweaks. */

@media (min-width: 900px) {
  .map-wrap {
    padding: calc(env(safe-area-inset-top, 0px) + 96px + var(--urg, 0px)) 48px 48px 452px;
    display: grid;
    align-content: center;
    overflow-x: auto;
  }
  .street {
    max-width: none;
    width: 2104px;
    grid-template-rows: 152px 32px 2px 32px 152px;
    grid-template-columns: 56px 96px 96px repeat(20, 80px) 200px 56px;
  }
  .cell {
    grid-column: var(--da) / var(--dae);
    grid-row: var(--l) / var(--le);
  }
  .xstreet span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    top: 0;
  }
  .road-name {
    display: block;
    writing-mode: horizontal-tb;
    padding: 0 16px;
    flex: none;
  }
  .road {
    flex-direction: row;
    background-image: linear-gradient(90deg, var(--dash) 50%, transparent 0);
    background-size: 24px 2px;
    background-repeat: repeat-x;
    background-position: left center;
    overflow: visible;
    z-index: 1;
  }
  .cars {
    flex-direction: row;
  }
  .car {
    width: 36px;
    height: 16px;
  }
  .car::before {
    left: auto;
    right: 7px;
    top: 3px;
    bottom: 3px;
    width: 8px;
    height: auto;
    border-radius: 1px 3px 3px 1px;
  }
  .car::after {
    left: 5px;
    top: 3px;
    bottom: 3px;
    width: 5px;
    height: auto;
    border-radius: 3px 1px 1px 3px;
  }
  .house,
  .house.even,
  .house.odd {
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0;
    margin: 0 0 0 8px;
  }
  .house.odd {
    margin-bottom: 8px;
  }
  .house.even {
    margin-top: 8px;
    flex-direction: column-reverse;
  }
  .house.wide .door,
  .house.wide.even .door {
    right: auto;
    top: auto;
    bottom: 12px;
    left: calc((1 - var(--dp)) * (100% + 8px) - 10px);
  }
  .house.wide.even .door {
    bottom: auto;
    top: 12px;
  }
  .faces,
  .house.even .faces {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  .house {
    gap: 8px;
  }
  .more {
    display: none;
  }
  /* desktop shows up to two people; three or more switch to one avatar + "+N" like phones */
  .house.many .more {
    display: grid;
  }
  .house.many .face.extra {
    display: none;
  }
  .fstack,
  .house.even .fstack {
    margin: 0;
  }
  .face.extra {
    display: grid;
  }
  .fstack + .face,
  .house.corner .fstack + .face {
    margin: 0 0 0 -4px;
  }
  /* desktop: keep the door's space (24px + 8px gap) so faces sit level with single lots */
  .house.wide {
    align-items: center;
  }
  .house.wide > .faces,
  .house.wide.even > .faces {
    margin-left: 0;
    margin-right: 0;
  }
  .house.wide > .plaque,
  .house.wide > .faces {
    margin-top: 0;
  }
  .house.wide > .faces {
    height: auto;
    margin-bottom: 32px;
  }
  .house.wide.even > .faces {
    margin-bottom: 0;
    margin-top: 32px;
  }
  .face + .face,
  .house.even .face + .face {
    margin: 0 0 0 -4px;
  }
  .house.corner,
  .house.corner.odd,
  .house.corner.even,
  .house.corner.x31,
  .house.corner.x31.slot0,
  .house.corner.x31.slot1 {
    width: auto;
    height: 68px;
    padding: 12px;
    gap: 8px;
    flex-direction: row;
    justify-self: stretch;
    margin: 0 0 0 8px;
  }
  .house.corner .faces,
  .house.corner.x31 .faces {
    flex: 1;
    flex-direction: row;
    margin: 0;
  }
  .house.corner .door,
  .house.corner.x31.slot1 .door {
    position: relative;
    inset: auto;
  }
  .house.corner .face + .face,
  .house.corner.x30 .face + .face {
    margin: 0 0 0 -4px;
  }
  .house.corner.x31.slot1 {
    flex-direction: row-reverse;
    align-self: start;
  }
  /* 1232 mirrors 1235: plaque away from 30th, faces centred, door in the Baltz/30th corner */
  .house.corner.x30 {
    align-self: start;
    margin-top: 8px;
    margin-right: 8px;
    gap: 8px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .house.corner.x30 .faces {
    flex: 1;
    justify-content: center;
    margin: 0 20px 0 0;
  }
  .house.corner.x30 .door {
    position: absolute;
    left: auto;
    right: 12px;
    top: 12px;
  }
  /* 1235: same pattern as 1237 (plaque right, face centred), door in the lower-left corner toward Baltz and 31st */
  .house.corner.x31.slot0 {
    align-self: end;
    margin-bottom: 8px;
    flex-direction: row-reverse;
  }
  .house.corner.x31.slot0 .door {
    position: absolute;
    left: 12px;
    bottom: 12px;
    right: auto;
    top: auto;
  }
  .house.corner.x31.slot0 .faces {
    margin-left: 20px;
  }
  /* corner lots: avatars centred on the whole lot, like every other house */
  .house.corner .faces,
  .house.corner.x31 .faces,
  .house.corner.x30 .faces,
  .house.corner.x31.slot0 .faces {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  /* 30th St runs on past 1232 to where 1230 would be */
  .parcel.p-ne {
    margin: 0 8px 8px 8px;
  }
  .parcel.p-sw {
    margin: 8px 0 0 8px;
  }
  .parcel.p-1230 {
    justify-self: stretch;
    width: auto;
    height: 68px;
    margin: 0 8px;
    align-self: end;
  }
  .mapbar {
    left: 452px;
    padding-top: 32px;
    padding-right: 32px;
  }
  .ndrop {
    right: 32px;
  }
  .urgent {
    left: 32px;
    right: 32px;
  }
  body.collapsed .map-wrap {
    padding-left: 48px;
  }
  .sheet {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    bottom: 16px;
    width: 404px;
    height: auto;
    border-radius: 24px;
    transform: none !important;
    transition: none;
    touch-action: auto;
  }
  .sheet-head {
    cursor: default;
    padding: 16px 16px 12px;
  }
  .headrow,
  .titlebar {
    min-height: 44px;
  }
  .sheet-head [data-act="collapse"] {
    visibility: hidden;
  }
  /* open: X sits in the panel's top-right corner (16px inset); closed: menu button at the screen's top-left (32px) */
  body.collapsed #menuBtn {
    display: none;
  }
  #scrim {
    display: none;
  }
  body:not(.collapsed)[data-view="edit"] #menuBtn {
    display: none;
  }
  #menuBtn {
    display: grid;
    top: 32px;
    left: 360px;
    width: 44px;
    height: 44px;
    box-shadow: none;
    background: var(--paper-2);
  }
  body:not(.collapsed) .brand {
    display: none;
  }
  body.collapsed .mapbar {
    left: 0;
    padding-left: 32px;
  }
  .grab {
    display: none;
  }
  .sheet-body {
    max-height: none !important;
    padding: 0 16px 32px;
  }
  /* toasts: bottom-right, same 32px inset as the corner buttons */
  .toast {
    left: auto;
    top: auto;
    right: 32px;
    bottom: 32px;
    max-width: 360px;
    transform: translateY(12px);
  }
  .toast.on {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}