.brand,
.rail-add,
.rail-profile,
.org-dot {
  border-radius: 50%;
}

.org-hero {
  position: relative;
  align-items: center;
  padding-right: 105px;
}

.hero-logo {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.hero-logo img {
  object-fit: contain;
}

.hero-edit {
  position: absolute;
  top: 18px;
  right: 18px;
}

.org-hero-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
}

.org-hero.editing {
  display: block;
  padding-right: 26px;
}

.editor-header-actions {
  flex-wrap: nowrap;
  margin-left: auto;
}

.inline-editor-grid {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
}

.inline-image {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
}

.inline-image .hero-logo {
  width: 96px;
  height: 96px;
  justify-content: start;
}

.inline-image input[type="file"] {
  max-width: 100%;
  font-size: 12px;
}

.inline-actions {
  display: flex;
  justify-content: flex-end;
}

#profile-edit-form .profile-layout {
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
}

.profile-mark {
  overflow: hidden;
}

.profile-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rail-profile img,
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.month-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.month-weekday {
  color: #9eb7c2;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  padding: 3px 0 8px;
  text-align: center;
  text-transform: uppercase;
}

.month-day {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  overflow: hidden;
  text-align: left;
  color: #eaf2f5;
  background: #172936;
  border: 1px solid #344b59;
  border-radius: 10px;
}

.month-day:hover {
  border-color: #77d8e2;
}

.month-day.outside {
  opacity: .47;
}

.month-day.selected {
  background: #244657;
  border-color: #80dce4;
  box-shadow: inset 0 0 0 1px #80dce4;
}

.date-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 750;
}

.month-day.today .date-number {
  border-radius: 50%;
  background: #7bd9e2;
  color: #0b2330;
}

.month-events {
  width: 100%;
  display: grid;
  gap: 4px;
}

.month-event {
  display: block;
  padding: 4px 5px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #315464;
  color: #d4f6f8;
  font-size: 10px;
}

.month-more {
  color: #9dd5db;
  font-size: 10px;
}

.month-count {
  display: none;
}

@media (max-width: 780px) {
  :root {
    --mobile-top-inset: 24px;
    --mobile-top-inset: max(24px, env(safe-area-inset-top, 0px));
  }

  html, body { overscroll-behavior-y: none; touch-action: pan-x pan-y; }
  html { height: 100%; overflow: hidden; }
  body { height: 100dvh; overflow: hidden; }
  dialog { touch-action: pan-x pan-y; }

  .shell {
    height: 100dvh;
    min-height: 0;
    padding-top: var(--mobile-top-inset);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .shell::before {
    content: '';
    position: fixed;
    inset: 0 0 auto;
    height: var(--mobile-top-inset);
    background: #0b1420;
    border-bottom: 1px solid var(--line);
    pointer-events: none;
    z-index: 11;
  }
  .org-unlawful .shell::before { background: #1b131c; border-color: #54313d; }
  .rail {
    top: 0;
    height: calc(100dvh - var(--mobile-top-inset));
  }
  .main {
    align-self: flex-start;
    min-height: calc(100dvh - var(--mobile-top-inset));
    padding-bottom: 0;
  }
  #app::after {
    content: '';
    display: block;
    height: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  html.auth-screen #app::after { display: none; }

  .inline-editor-grid,
  #profile-edit-form .profile-layout {
    grid-template-columns: 1fr;
  }

  .month-day {
    min-height: 0;
    position: relative;
  }

  .month-events {
    display: none;
  }

  .month-count {
    display: grid;
    place-items: center;
    position: absolute;
    bottom: 4px;
    left: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #6bcbd7;
    color: #0a2530;
    font-size: 10px;
    font-weight: 800;
  }
}

@media (max-width: 780px) and (display-mode: standalone) {
  body, .shell { height: 100vh; }
  .rail { height: calc(100vh - var(--mobile-top-inset)); }
  .main { min-height: calc(100vh - var(--mobile-top-inset)); }
  .bottom-nav { bottom: calc(100dvh - 100vh - 10px); }
}

@media (max-width: 520px) {
  .org-hero.editing {
    padding: 17px;
  }

  .org-hero {
    padding-right: 76px;
  }

  .org-hero:not(.editing) {
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    row-gap: 12px;
    padding: 17px;
  }

  .org-hero:not(.editing) > .hero-logo { grid-column: 1; }
  .org-hero:not(.editing) > .hero-logo + div { grid-column: 2; min-width: 0; }
  .org-hero:not(.editing) h1 { overflow-wrap: anywhere; }
  .org-hero:not(.editing) .org-hero-role {
    position: static;
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 0;
  }

  .hero-edit {
    top: 12px;
    right: 12px;
    padding: 7px 10px;
  }

  .month-toolbar .ghost {
    flex: 1;
    padding: 8px 5px;
    font-size: 11px;
  }

  .month-grid {
    gap: 3px;
  }

  .month-weekday {
    font-size: 9px;
    letter-spacing: 0;
  }

  .month-day {
    min-height: 0;
    padding: 2px;
    gap: 2px;
    border-radius: 7px;
    align-items: flex-start;
  }

  .month-date-line { display: block; }
  .month-contract-icon { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; }

  .date-number {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }

  .month-count {
    min-width: 13px;
    height: 13px;
    bottom: 2px;
    left: 2px;
    font-size: 8px;
  }
}

@media (max-width: 380px) {
  .month-count { display: none; }
}