/* Design Studio login overlay for Penpot 2.18.3. Every rule is scoped to
   main[data-ds-login], which the script sets only on the recognised login
   page. Without the script this file has no visible effect. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/ds-login/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
main[data-ds-login] {
  --ds-ink: #182421; --ds-slate: #627169; --ds-accent: #24634E; --ds-hover: #30433A;
  --ds-surface: #F7F9F6; --ds-soft: #F0F5EE; --ds-border: #E0E6E2; --ds-card: #FFFFFF;
  --ds-font: Inter, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr;
  position: relative; inline-size: 100%; min-block-size: 100vh; margin: 0; padding: 0; gap: 0; align-items: stretch;
  background: var(--ds-surface) !important; color: var(--ds-ink); font-family: var(--ds-font); color-scheme: light;
}
main[data-ds-login] * { font-family: var(--ds-font); }
/* logo */
main[data-ds-login] [class*="auth__logo-container"] { position: absolute !important; inset-block-start: 28px; inset-inline-start: max(24px, calc((50vw - 440px) / 2)); margin: 0; z-index: 3; }
main[data-ds-login] [class*="auth__logo-btn"] { white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; color: var(--ds-ink); text-decoration: none; inline-size: auto; block-size: auto; }
main[data-ds-login] .ds-tile { inline-size: 35px; block-size: 35px; flex: none; }
main[data-ds-login] .ds-word { white-space: nowrap; line-height: 1; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ds-ink); }
main[data-ds-login] .ds-word i { font-style: normal; color: var(--ds-slate); }
/* form column */
main[data-ds-login] [class*="auth__auth-content"] { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; justify-self: stretch; align-self: stretch; padding: 96px 24px 48px; background: transparent !important; inline-size: 100%; max-inline-size: none; block-size: auto; }
main[data-ds-login] [class*="auth__auth-content"] [class*="__wrapper"] { inline-size: min(440px, 100%); margin: 0; padding: 0; background: transparent; display: block; }
main[data-ds-login] [class*="auth__auth-content"] [class*="__title"] { margin: 0 0 16px; font-size: clamp(32px, 3.2vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--ds-ink); }
main[data-ds-login] [class*="login__tagline"] { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: var(--ds-slate); }
main[data-ds-login] [class*="auth__auth-content"] [class*="__separator"] { display: none; }
main[data-ds-login] [class*="login__sso-row"] { margin: 0; }
main[data-ds-login] a[class*="sso-btn"] { display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: 100%; block-size: 52px; border: 0; border-radius: 10px; background: var(--ds-accent) !important; color: #fff !important; font-size: 15px; font-weight: 600; text-transform: none; text-decoration: none; transition: background .16s cubic-bezier(.2,.8,.2,1), transform .16s; }
main[data-ds-login] a[class*="sso-btn"]:hover { background: var(--ds-hover) !important; transform: translateY(-1px); }
main[data-ds-login] a[class*="sso-btn"]:focus-visible, main[data-ds-login] .ds-toggle:focus-visible, main[data-ds-login] input:focus-visible, main[data-ds-login] button:focus-visible { outline: 3px solid #9CC9B7; outline-offset: 2px; }
main[data-ds-login] .ds-sso-ic { display: inline-flex; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; overflow: hidden; }
main[data-ds-login] .ds-sso-ic svg { inline-size: 100%; block-size: 100%; }
main[data-ds-login] .ds-or { display: flex; align-items: center; gap: 16px; margin: 20px 0; color: var(--ds-slate); font-size: 13px; }
main[data-ds-login] .ds-or::before, main[data-ds-login] .ds-or::after { content: ""; flex: 1; block-size: 1px; background: var(--ds-border); }
main[data-ds-login] .ds-toggle { display: block; inline-size: 100%; block-size: 48px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); color: var(--ds-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
main[data-ds-login] .ds-toggle:hover { border-color: var(--ds-accent); }
main[data-ds-login] .ds-toggle[hidden], main[data-ds-login] .ds-or[hidden] { display: none; }
main[data-ds-login] form[hidden] { display: none; }
main[data-ds-login] [class*="auth__auth-content"] form { margin-block-start: 20px; }
main[data-ds-login] label, main[data-ds-login] [class*="forms__input-with-label"] label { color: var(--ds-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
main[data-ds-login] input[type="email"], main[data-ds-login] input[type="password"], main[data-ds-login] input[type="text"] { background: var(--ds-card) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-border) !important; border-radius: 10px; block-size: 48px; font-size: 14px; }
main[data-ds-login] input::placeholder { color: #7B8A82; }
main[data-ds-login] [class*="forms__input-wrapper"], main[data-ds-login] [class*="forms__input-and-icon"] { background: transparent !important; }
main[data-ds-login] [class*="forgot-password-link"], main[data-ds-login] [class*="account-link"], main[data-ds-login] [class*="go-back-link"] { color: var(--ds-accent) !important; font-size: 13px; font-weight: 600; text-decoration: none; }
main[data-ds-login] button[class*="form-submit-btn"] { inline-size: 100%; block-size: 48px; border: 0; border-radius: 10px; background: var(--ds-accent) !important; color: #fff !important; font-size: 14px; font-weight: 600; text-transform: none; }
main[data-ds-login] button[class*="form-submit-btn"][disabled] { background: #B9CBC2 !important; color: #fff !important; cursor: not-allowed; }
main[data-ds-login] [class*="login__links"] { display: none; }
main[data-ds-login] [class*="__subtitle"], main[data-ds-login] [class*="account-text"], main[data-ds-login] [class*="forms__hint"], main[data-ds-login] [class*="checkbox-label"] { color: var(--ds-slate) !important; font-size: 13px; line-height: 1.5; }
main[data-ds-login] [class*="__links"] { margin-block-start: 20px; text-align: start; }
main[data-ds-login] [class*="checkbox-label"] > span { background: var(--ds-card) !important; border: 1px solid #8FA096 !important; border-radius: 4px; }
main[data-ds-login] [class*="checkbox-label"]:has(input:checked) > span { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; }
main[data-ds-login] [class*="go-back-row"] a, main[data-ds-login] a[class*="go-back-link"] { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 48px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card) !important; color: var(--ds-ink) !important; font-size: 14px; font-weight: 500; text-transform: none; text-decoration: none; }
main[data-ds-login] [class*="go-back-row"] a:hover { border-color: var(--ds-accent); }
main[data-ds-login] [class*="__form-row"] { margin-block-end: 12px; }
main[data-ds-login] .ds-note[hidden] { display: none; }
main[data-ds-login] .ds-note { margin: 24px 0 0; color: var(--ds-slate); font-size: 13px; line-height: 1.5; }
main[data-ds-login] .ds-attrib { margin: 16px 0 0; padding-block-start: 16px; border-block-start: 1px solid var(--ds-border); color: var(--ds-slate); font-size: 12px; line-height: 1.5; }
/* pill panel */
main[data-ds-login] [class*="auth__login-illustration"] { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; background: var(--ds-soft) !important; margin: 0; padding: 0; inline-size: 100%; max-inline-size: none; block-size: auto; min-block-size: 100vh; justify-self: stretch; align-self: stretch; display: block !important; }
main[data-ds-login] [class*="auth__login-illustration"] > img { display: none !important; }
main[data-ds-login] .ds-pills { position: absolute; inset: 0; }
main[data-ds-login] .ds-caption { position: absolute; inset-block-start: 48px; inset-inline-start: 40px; margin: 0; color: var(--ds-slate); font-size: 14px; font-weight: 500; }
main[data-ds-login] .ds-pill { position: absolute; display: inline-flex; align-items: center; gap: 10px; block-size: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; user-select: none; rotate: var(--r, 0deg); transition: transform .24s cubic-bezier(.2,.8,.2,1), rotate .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s; }
main[data-ds-login] .ds-pill:has(.ds-ic) { padding-inline-start: 14px; }
main[data-ds-login] .ds-pill b { font-weight: 600; }
main[data-ds-login] .ds-ic { display: inline-flex; inline-size: 24px; block-size: 24px; flex: none; }
main[data-ds-login] .ds-ic svg { inline-size: 100%; block-size: 100%; }
main[data-ds-login] .ds-white { background: #fff; border-color: var(--ds-border); color: var(--ds-ink); }
main[data-ds-login] .ds-soft { background: var(--ds-soft); border-color: var(--ds-border); color: var(--ds-ink); }
main[data-ds-login] .ds-ink { background: var(--ds-ink); color: #fff; }
main[data-ds-login] .ds-accent { background: var(--ds-accent); color: #fff; }
main[data-ds-login] .ds-outline { background: transparent; border-color: var(--ds-accent); color: var(--ds-accent); }
main[data-ds-login] .ds-idle { animation: ds-bob var(--dur, 7s) ease-in-out var(--ph, 0s) infinite; }
main[data-ds-login] .ds-pill:hover { --r: 0deg; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(24, 36, 33, .12); }
main[data-ds-login] .ds-paused .ds-idle { animation-play-state: paused; }
@keyframes ds-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { main[data-ds-login] .ds-idle { animation: none; } main[data-ds-login] .ds-pill, main[data-ds-login] a[class*="sso-btn"] { transition: none; } }
main[data-ds-login] .ds-sm .ds-pill { block-size: 38px; padding: 0 14px; font-size: 13px; gap: 8px; }
main[data-ds-login] .ds-sm .ds-pill:has(.ds-ic) { padding-inline-start: 10px; }
main[data-ds-login] .ds-sm .ds-ic { inline-size: 20px; block-size: 20px; }
/* narrow screens: form first, short pile underneath */
@media (max-width: 900px) {
  main[data-ds-login] { grid-template-columns: 1fr; grid-template-rows: auto 280px; }
  main[data-ds-login] [class*="auth__logo-container"] { inset-inline-start: 20px; inset-block-start: 20px; }
  main[data-ds-login] [class*="auth__auth-content"] { grid-column: 1; grid-row: 1; padding: 96px 20px 32px; }
  main[data-ds-login] [class*="auth__login-illustration"] { grid-column: 1; grid-row: 2; min-block-size: 280px; block-size: 280px; }
  main[data-ds-login] .ds-caption { display: none; }
}