html { height: 100%; overflow: hidden; background: var(--background); }

body.desktop-home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--background);
}

.desktop-home .public-candidate-backdrop {
  position: fixed;
  z-index: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: min(34rem, 34vw);
  height: min(72vh, 52rem);
  object-fit: contain;
  object-position: right bottom;
  opacity: .14;
  pointer-events: none;
  user-select: none;
}

.desktop-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 4.75rem minmax(0, 1fr);
  background: transparent;
}

.desktop-header {
  position: relative;
  z-index: 200;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  background: var(--surface-overlay-strong);
}

.desktop-brand { display: flex; min-width: 0; align-items: center; gap: 1.1rem; }
.desktop-brand .brand-logos { flex: 0 0 auto; }
.desktop-brand .brand-logos img { height: 2rem; }
.desktop-brand .harapan-logo { max-width: 4.25rem; }
.desktop-brand .party-logo { max-width: 2.75rem; }
.desktop-brand h1 { overflow: hidden; margin: 0; font-size: 1.08rem; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.desktop-header-controls { z-index: 201; flex: 0 0 auto; }

.desktop-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 15.5rem minmax(0, 1fr);
}

.desktop-navigation {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: .25rem;
  border-right: 1px solid var(--line);
  padding: 1.25rem .9rem;
  background: var(--surface-overlay);
}

.desktop-navigation .public-nav-item {
  position: relative;
  display: grid;
  min-height: 3.25rem;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: .625rem;
  padding: .55rem .75rem;
  color: #556174;
  background: transparent;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.desktop-navigation .public-nav-item:hover { color: #263246; background: var(--surface-overlay-hover); }
.desktop-navigation .public-nav-item.active { color: var(--red-dark); background: rgba(255, 240, 241, .84); }
.desktop-navigation .public-nav-item.active::before { position: absolute; top: .65rem; bottom: .65rem; left: 0; width: 3px; background: var(--red); content: ""; }
.desktop-navigation .public-nav-item svg { width: 1.2rem; height: 1.2rem; justify-self: center; }
.desktop-navigation .public-nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desktop-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }

.desktop-intake-bar {
  position: relative;
  z-index: 100;
  display: grid;
  min-height: 4.75rem;
  grid-template-columns: minmax(9rem, auto) minmax(18rem, 32rem) 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid var(--line);
  padding: .7rem clamp(1.5rem, 4vw, 3.25rem);
  background: var(--surface-overlay-strong);
}

.intake-heading { min-width: 0; padding-right: .75rem; }
.intake-heading h2 { margin: 0 0 .15rem; color: var(--ink); font-size: .8rem; font-weight: 750; }
.desktop-intake-bar .intake-distance { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desktop-home .app-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.desktop-home .tab-panel {
  width: min(100%, 78rem);
  gap: 1rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem) 3rem;
}

.desktop-home #homePanel {
  grid-template-columns: minmax(20rem, .85fr) minmax(27rem, 1.15fr);
  grid-template-areas:
    "services-heading updates-heading"
    "primary-actions updates-list";
  align-items: start;
  column-gap: clamp(2rem, 4vw, 4rem);
}

.desktop-home #homePanel > .services-heading { grid-area: services-heading; }
.desktop-home #homePanel > .primary-actions { grid-area: primary-actions; }
.desktop-home #homePanel > .updates-heading { grid-area: updates-heading; }
.desktop-home #homePanel > .updates-list { grid-area: updates-list; }
.desktop-home .primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.desktop-home #homePanel .primary-actions { grid-template-columns: 1fr; }
.desktop-home .primary-actions.has-single-action .primary-action:not(.hidden) { grid-column: 1 / -1; }
.desktop-home .primary-action { min-height: 5.5rem; justify-content: flex-start; padding: 1rem 1.1rem; text-align: left; }
.desktop-home .primary-action .action-icon { width: 2.8rem; height: 2.8rem; flex: 0 0 auto; }
.desktop-home .primary-action .action-icon svg { width: 1.45rem; height: 1.45rem; }
.desktop-home .primary-action .action-label { font-size: .98rem; }
.desktop-home .secondary-action { min-height: 3.75rem; }

.desktop-home :where(#contactPanel, #discoverPanel, #profilePanel) { width: min(100%, 58rem); }
.desktop-home .contact-section { gap: 1rem; }
.desktop-home .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.desktop-home .contact-button { min-height: 4.75rem; }
.desktop-home .profile-summary { min-height: 4.5rem; justify-content: flex-start; }
.desktop-home .profile-avatar { width: 3.5rem; height: 3.5rem; }
.desktop-home .action-status, .desktop-home .error-message { width: min(calc(100% - 3rem), 70rem); margin: 0 auto 1rem; }
.desktop-home .powered-by { position: static; z-index: auto; display: flex; width: max-content; min-height: 2.5rem; justify-content: center; margin: 1.25rem auto .25rem; transform: none; border-radius: .625rem; box-shadow: none; }

@media (max-width: 1120px) {
  .desktop-workspace { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .desktop-intake-bar { grid-template-columns: minmax(8rem, auto) minmax(15rem, 1fr) 2.75rem; }
  .desktop-intake-bar::after { display: none; }
  .desktop-home #homePanel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "services-heading"
      "primary-actions"
      "updates-heading"
      "updates-list";
  }
  .desktop-home #homePanel .primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .desktop-shell { grid-template-rows: auto minmax(0, 1fr); }
  .desktop-header { min-height: 4.25rem; padding: .55rem .75rem; }
  .desktop-header .header-text-button > span, .desktop-header .button-chevron { display: none; }
  .desktop-header .header-text-button { width: 2.6rem; justify-content: center; padding: 0; }
  .desktop-brand h1 { font-size: .95rem; }
  .desktop-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .desktop-navigation { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: .35rem .5rem; }
  .desktop-navigation .public-nav-item { min-width: 0; grid-template-columns: 1.5rem minmax(0, 1fr); padding-inline: .45rem; }
  .desktop-navigation .public-nav-item.active::before { top: auto; right: .5rem; bottom: -.35rem; left: .5rem; width: auto; height: 3px; }
  .desktop-intake-bar { grid-template-columns: minmax(0, 1fr) 2.75rem; padding: .65rem .75rem; }
  .desktop-intake-bar .intake-heading { grid-column: 1 / -1; }
  .desktop-home .tab-panel { padding: 1rem .75rem 2rem; }
  .desktop-home #homePanel .primary-actions, .desktop-home .primary-actions, .desktop-home .contact-actions { grid-template-columns: 1fr; }
}