/* The sign-in page on a practice's own address. Same palette as the practice
   app: espresso chrome, cream page, gold only for focus and the active state. */
:root {
  --pl-primary: #2b2625;
  --pl-on-primary: #ffffff;
  --pl-secondary: #c5a059;
  --pl-on-secondary: #1f1a17;
  --espresso: #2b211c;
  --mocha: #6b5a4e;
  --cream: #f7f2ea;
  --page: #f3efe7;
  --gold: #c5a059;
  --coral: #a3452f;
  --sage: #3f6a48;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, system-ui, sans-serif; color: var(--espresso); background: var(--page); -webkit-font-smoothing: antialiased; }

.pl-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(320px, 1fr) 1.1fr; }
.pl-brand { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem; background: var(--pl-primary); color: var(--pl-on-primary); overflow: hidden; }
.pl-brand::before { content: ''; position: absolute; right: -8rem; top: -8rem; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pl-secondary) 22%, transparent), transparent 70%); pointer-events: none; }
.pl-nova-logo { height: 64px; width: auto; }
/* A practice logo can be any colour, so it sits on a light plate rather than
   directly on espresso, where a dark logo would disappear. */
.pl-logo-plate { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 1rem 1.25rem; border-radius: 1rem; background: #fff; }
.pl-practice-logo { display: block; max-height: 88px; max-width: 280px; width: auto; object-fit: contain; }
.pl-practice-name { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.4rem; line-height: 1.1; color: var(--pl-secondary); font-style: italic; }
.pl-welcome { margin: 1rem 0 0; max-width: 26rem; line-height: 1.6; color: var(--pl-on-primary); opacity: .75; }
.pl-foot { margin: 0; font-size: .85rem; color: var(--pl-on-primary); opacity: .5; }

.pl-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 4rem 1.5rem; }
.pl-lang { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; padding: 2px; border: 1px solid rgba(43,33,28,.15); border-radius: 999px; background: rgba(255,255,255,.7); }
.pl-lang a { padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: rgba(107,90,78,.7); text-decoration: none; }
.pl-lang a.is-active { background: var(--pl-primary); color: var(--pl-on-primary); }
.pl-card { width: 100%; max-width: 26rem; }
.pl-mobile-brand { display: none; }
.pl-eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--pl-secondary) 75%, #000); }
.pl-title { margin: .75rem 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 2.6rem; line-height: 1.05; }
.pl-lede { margin: .6rem 0 0; color: rgba(107,90,78,.85); }

.pl-alert { margin-top: 1.25rem; padding: .8rem 1rem; border-radius: .75rem; border: 1px solid; font-size: .9rem; line-height: 1.5; }
.pl-alert-error { border-color: rgba(192,86,63,.4); background: rgba(192,86,63,.1); color: #8f3a26; }
.pl-alert-info { border-color: rgba(197,160,89,.45); background: rgba(197,160,89,.1); color: rgba(107,90,78,.95); }

.pl-form { display: grid; gap: .5rem; margin-top: 1.75rem; }
.pl-form label { margin-top: .6rem; font-size: .9rem; font-weight: 500; }
.pl-form input[type=email], .pl-form input[type=password] { width: 100%; padding: .8rem 1rem; border: 1px solid rgba(43,33,28,.2); border-radius: .75rem; background: #fff; font: inherit; font-size: 1rem; color: inherit; outline: none; transition: border-color .15s; }
.pl-form input:focus { border-color: var(--pl-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-secondary) 25%, transparent); }
.pl-forgot { justify-self: start; margin-top: .25rem; font-size: .85rem; font-weight: 500; color: rgba(107,90,78,.8); text-decoration: underline; text-decoration-color: var(--pl-secondary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pl-form button { margin-top: 1.25rem; padding: .95rem 1.25rem; border: 0; border-radius: 999px; background: var(--pl-primary); color: var(--pl-on-primary); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.pl-form button:hover { filter: brightness(1.15); }
.pl-form button:focus-visible, .pl-lang a:focus-visible, .pl-forgot:focus-visible { outline: 3px solid var(--pl-secondary); outline-offset: 2px; }
.pl-choices { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.pl-choice { display: flex !important; align-items: center; gap: .75rem; margin: 0 !important; padding: .75rem 1rem; border: 1px solid rgba(43,33,28,.15); border-radius: .75rem; background: #fff; cursor: pointer; }
.pl-choice input { accent-color: var(--pl-primary); }

@media (max-width: 900px) {
  .pl-shell { grid-template-columns: 1fr; }
  .pl-brand { display: none; }
  .pl-main { align-items: flex-start; padding: 5rem 1rem 3rem; }
  .pl-mobile-brand { display: flex; align-items: center; min-height: 48px; margin-bottom: 2rem; }
  .pl-mobile-brand img { max-height: 56px; max-width: 220px; object-fit: contain; }
  .pl-mobile-brand .pl-mobile-nova { padding: .5rem .75rem; border-radius: .6rem; background: var(--pl-primary); max-height: 48px; }
  .pl-mobile-brand span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.8rem; }
  .pl-title { font-size: 2.2rem; }
}