body {
  --client-header-width: 1260px;
  --client-login-edge: clamp(12px, 2vw, 32px);
}

@media (min-width: 768px) {
  html[lang="en"] body:has(#client-signin:not([hidden])) > .site-header {
    padding-inline: max(24px, var(--client-login-edge), calc((100% - var(--client-header-width)) / 2));
  }
}

.client-main {
  display: grid;
  align-items: start;
  justify-items: center;
  min-height: 100svh;
  padding: clamp(112px, 14vh, 160px) 20px 108px;
  background: var(--paper);
}
.client-panel {
  position: relative;
  width: min(100%, 950px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
}
.client-main:has(#client-signin:not([hidden])) {
  display: block;
  padding: clamp(74px, 9vh, 96px) var(--client-login-edge) 16px;
  background: linear-gradient(0deg, #141c17db, #141c1712 68%),
    url("login-cove-wide.jpg") right center / cover no-repeat;
}
.client-panel:has(#client-signin:not([hidden])) {
  width: 100%;
  border: 0;
  background: transparent;
}
#client-signin:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, calc((100vw - 2 * var(--client-login-edge)) * .29));
  max-width: 860px;
  margin-inline: auto;
  align-items: end;
  min-height: calc(100svh - clamp(74px, 9vh, 96px) - 16px);
  direction: ltr;
  gap: clamp(24px, 4vw, 48px);
}
@media (min-width: 768px) {
  html[lang="en"] #client-signin:not([hidden]) {
    max-width: var(--client-header-width);
    width: min(100%, calc(100vw - 48px));
    padding-inline-end: clamp(0px, calc((100vw - 1260px) / 20), 28px);
  }
}
[dir="rtl"] :is(.client-hero-copy, .client-signin-card) { direction: rtl; }
.client-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-width: 0;
  padding: 0 0 clamp(32px, 7vh, 80px);
  color: #fff;
}
.client-hero-copy h2 { font-size: clamp(2rem, 3.5vw, 3.65rem); }
html[lang="en"] .client-hero-copy h2 { font-family: Syne, "DM Sans", sans-serif; }
.client-panel .client-hero-copy :is(p, .client-kicker) { color: #fff; }
.client-signin-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  align-self: end;
  margin-block-end: clamp(20px, 6vh, 68px);
  padding: clamp(25px, 3vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  color: var(--ink);
}
.client-signin-card .button { border-radius: 999px; min-height: 52px; }
.client-signin-card input { min-height: 52px; }
.client-signin-card #client-status { padding: 0; margin-block-start: 14px; }
.client-panel h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
html[lang="en"] .client-panel h1 { font-family: Syne, "DM Sans", sans-serif; }
.client-panel p { margin-block-start: 12px; color: var(--muted); }
.client-panel .client-kicker {
  margin: 0 0 12px;
  color: var(--action);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.client-panel form { display: grid; gap: 10px; margin-block-start: 24px; }
.client-panel [hidden] { display: none; }
.client-panel label { font-weight: 650; }
.client-panel :is(input, textarea) {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.client-panel form .button { margin-block-start: 5px; }
.client-reset {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  text-decoration: underline;
}
#client-status { margin: 0; padding: 0 clamp(24px, 5vw, 56px) 22px; }
#client-status:empty { display: none; }
#client-projects { padding: clamp(22px, 5vw, 48px); }
.client-projects-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-block-end: 26px; }
.client-quiet-button { flex: none; }
#client-project-list {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#client-project-list small { display: block; color: var(--muted); }
.client-project {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.client-project-name { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.client-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.client-steps li { padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; color: var(--muted); }
.client-steps li.done { background: var(--tint); color: var(--ink); }
.client-steps li.current { background: var(--action); border-color: var(--action); color: var(--surface); font-weight: 700; }
.client-box { display: grid; gap: 10px; padding: clamp(14px, 3vw, 22px); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.client-box h3 { font-size: 1.15rem; }
.client-box p { margin: 0; }
.client-box textarea { resize: vertical; }
.client-pay-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-panel :is(.client-quiet-button, .button-secondary) { background: transparent; color: var(--action); border: 1px solid currentColor; }
.client-panel :is(.client-quiet-button, .button-secondary):hover { background: var(--tint); color: var(--ink); }
.client-paid { margin: 0; font-weight: 650; }
.client-project summary { cursor: pointer; font-weight: 700; }
.client-updates { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.client-updates li { border-inline-start: 2px solid var(--line); padding-inline-start: 12px; }
.client-updates time { font-size: .85rem; color: var(--muted); }
.client-updates p { margin: 2px 0 0; color: var(--ink); white-space: pre-wrap; }
@media (max-width: 660px) {
  .client-main { padding-block-start: 90px; }
  .client-main:has(#client-signin:not([hidden])) {
    padding: 76px 12px 82px;
    background: linear-gradient(to bottom, transparent 26%, rgba(12, 17, 16, .52) 61%, rgba(12, 17, 16, .24)),
      url("login-cove-portrait.webp") center / cover no-repeat;
  }
  #client-signin:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 1fr) auto; min-height: calc(100svh - 158px); gap: 14px; }
  .client-hero-copy {
    min-height: max(285px, 80vw);
    padding: 12px 12px 8px;
  }
  .client-hero-copy h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .client-hero-copy p { margin-block-start: 6px; }
  .client-signin-card { margin: 0; padding: 22px; }
  .client-projects-heading { flex-wrap: wrap; }
}
[data-sif-theme="dark"] .client-panel :is(.client-kicker, .client-reset, .client-quiet-button, .button-secondary) { color: var(--accent); }
[data-sif-theme="dark"] .client-panel .client-hero-copy .client-kicker { color: #fff; }
[data-sif-theme="dark"] .client-steps li.current { color: #fff; }
.client-customer-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: 10px 20px;
  margin: 0;
}
.client-customer-details dt { color: var(--muted); font-size: .85rem; }
.client-customer-details dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.client-customer-details dd[dir="ltr"] { text-align: left; }
[dir="rtl"] .client-customer-details dd[dir="ltr"] { text-align: right; }

html:not([data-sif-theme="dark"]) .site-header #sif-side-menu {
  --menu-paper: var(--surface);
  background: var(--menu-paper);
}