/* Account menu → Home page (home-page.js): the toolbar, and the signed-out page shown in a frame to edit. */

.ra-homepage{
  --hp-ink: #0f1b2d;
  --hp-ink-2: #3d4a5c;
  --hp-mute: #5f6b7b;
  --hp-line: #e2ddd3;
  --hp-navy: #102d4e;
  --hp-navy-2: #1c4471;
  --hp-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --hp-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The whole window for the page: no side menu while editing (Home brings it back). */
body:has([data-rw-agent-page="home-page"]:not([hidden])) .ra-owner__nav{
  display: none !important;
}

body:has([data-rw-agent-page="home-page"]:not([hidden])) .ra-portal__main{
  display: block !important;
  grid-template-columns: none !important;
}

body:has([data-rw-agent-page="home-page"]:not([hidden])) .ra-owner__pages{
  width: 100%;
  max-width: none;
}

/* Back to home: a quiet text link above the title, as on Rentals. */
.ra-homepage__back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px -4px;
  padding: 6px 10px 6px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hp-mute);
  font: 550 0.9rem/1 var(--hp-sans);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ra-homepage__back:hover{
  background: #f1eee8;
  color: var(--hp-ink);
}

.ra-homepage__back:focus-visible{
  outline: none;
  box-shadow: var(--hp-ring);
}

.ra-homepage .ra-invoice-head{
  flex-wrap: wrap;
  row-gap: 12px;
}

.ra-homepage__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.ra-homepage__btn,
.ra-homepage__seg button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hp-ink);
  font: 600 13.5px/1 var(--hp-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ra-homepage__btn:hover:not(:disabled){
  border-color: #c7c0b2;
  background: #fbfaf7;
}

.ra-homepage__btn[aria-pressed="true"]{
  border-color: var(--hp-navy);
  color: var(--hp-navy);
  background: #eef2f8;
}

.ra-homepage__btn--quiet{
  border-color: transparent;
  background: transparent;
  color: #be123c;
}

.ra-homepage__btn--quiet:hover:not(:disabled){
  border-color: transparent;
  background: #fde8ec;
}

.ra-homepage__btn--primary{
  min-width: 96px;
  border-color: var(--hp-navy);
  background: var(--hp-navy);
  color: #fff;
}

.ra-homepage__btn--primary:hover:not(:disabled){
  border-color: var(--hp-navy-2);
  background: var(--hp-navy-2);
}

.ra-homepage__btn:disabled{
  opacity: 0.45;
  cursor: default;
}

.ra-homepage__btn:focus-visible,
.ra-homepage__seg button:focus-visible{
  outline: none;
  box-shadow: var(--hp-ring);
}

.ra-homepage__seg{
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  background: #f4f1eb;
}

.ra-homepage__seg button{
  height: 30px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--hp-ink-2);
}

.ra-homepage__seg button[aria-pressed="true"]{
  background: #fff;
  color: var(--hp-ink);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.12);
}

/* One line, always: a message never moves the page under it. */
.ra-homepage__hint{
  min-height: 1lh;
  margin: 4px 0 14px;
  color: var(--hp-mute);
  font: 400 14px/1.45 var(--hp-sans);
}

.ra-homepage__hint[data-tone="ok"]{ color: #15803d; }
.ra-homepage__hint[data-tone="error"]{ color: #b91c1c; }
.ra-homepage__hint[data-tone="busy"]{ color: #92580c; }

.ra-homepage__stage{
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: max(520px, calc(100dvh - 210px));
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 12px 32px -18px rgba(15, 27, 45, 0.25);
}

.ra-homepage__frame{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Phone: the same page at a phone's width, in a device outline. */
.ra-homepage__stage.is-phone{
  padding: 24px 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 27, 45, 0.08) 1px, transparent 0) 0 0 / 18px 18px,
    #f4f1eb;
}

.ra-homepage__stage.is-phone .ra-homepage__frame{
  box-sizing: border-box;
  width: 390px;
  max-width: 100%;
  border: 10px solid #0f1b2d;
  border-radius: 36px;
  box-shadow: 0 24px 48px -20px rgba(15, 27, 45, 0.45);
}

@media (max-width: 640px){
  .ra-homepage__actions{
    justify-content: flex-start;
    margin-left: 0;
  }

  .ra-homepage__stage{
    height: max(480px, calc(100dvh - 260px));
  }

  /* Already a phone: show the page edge to edge. */
  .ra-homepage__stage.is-phone{
    padding: 0;
  }

  .ra-homepage__stage.is-phone .ra-homepage__frame{
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}