/* Lightly tinted fields remain distinct from the application's grey canvas. */
#seafix-demo { --sf-entry-background: light-dark(#fafafb, #2b2c30); }
#seafix-demo .sf-auth-shell .sf-input-wrap,
#seafix-demo .sf-auth-shell :is(input:not([type="checkbox"]), select),
#seafix-demo .sf-report-form :is(input:not([type="radio"]), textarea, select),
#seafix-demo .sf-report-form .sf-input-wrap,
#seafix-demo .sf-report-form .sf-photo,
#seafix-demo .sf-report-form .sf-priority-option {
  background: var(--sf-entry-background);
  border-color: light-dark(#dddde2, #45464c);
}
#seafix-demo .sf-auth-shell .sf-input-wrap :is(input, select),
#seafix-demo .sf-report-form .sf-input-wrap :is(input, select) { background: transparent; }
#seafix-demo .sf-language-mini { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 0 0 22px; }
#seafix-demo .sf-language-mini button {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
  border-radius: 9px; padding: 6px 8px; background: transparent; color: var(--sf-muted);
  font: inherit; font-size: 12px; cursor: pointer; min-height: 34px;
}
#seafix-demo .sf-language-mini button[aria-pressed="true"] { color: var(--sf-heading); border-color: var(--sf-line); background: var(--sf-entry-background); }
#seafix-demo .sf-language-options { display: grid; gap: 12px; max-width: 620px; margin-top: 26px; }
#seafix-demo .sf-language-option {
  display: grid; grid-template-columns: 32px 1fr 22px; align-items: center; gap: 14px;
  width: 100%; padding: 18px; border: 1px solid var(--sf-line); border-radius: 14px;
  background: var(--sf-entry-background); color: var(--sf-heading); text-align: left; font: inherit; cursor: pointer;
}
#seafix-demo .sf-language-option strong, #seafix-demo .sf-language-option small { display: block; }
#seafix-demo .sf-language-option strong { font-size: 15px; font-weight: 600; }
#seafix-demo .sf-language-option small { margin-top: 4px; font-size: 13px; color: var(--sf-muted); }
#seafix-demo .sf-language-option [data-lucide="check"] { visibility: hidden; }
#seafix-demo .sf-language-option[aria-pressed="true"] { border-color: var(--sf-heading); }
#seafix-demo .sf-language-option[aria-pressed="true"] [data-lucide="check"] { visibility: visible; }
#seafix-demo [data-language-choice]:focus-visible { outline: 2px solid var(--sf-heading); outline-offset: 3px; }
#seafix-demo .sf-language-flag { width: 23px; height: 16px; border: 1px solid #0002; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
/* The language bar belongs to the shell, so it never shifts an auth form. */
#seafix-demo .sf-auth-shell { position:relative; }
#seafix-demo .sf-auth-shell > .sf-language-mini { grid-column:1; grid-row:1; width:100%; max-width:460px; box-sizing:border-box; justify-self:center; margin:0; padding:16px 28px 0; }
#seafix-demo .sf-auth-shell > .sf-login { grid-row:2; }
@media(min-width:960px) {
  #seafix-demo .sf-auth-shell > .sf-language-mini { position:absolute; grid-area:auto; top:0; right:0; width:420px; max-width:calc(100% - var(--sf-login-art-width) - var(--sf-login-gap)); padding:0; margin:0; z-index:2; }
  #seafix-demo .sf-auth-shell > .sf-login { grid-row:1; padding-block:62px; align-self:center; }
  #seafix-demo .sf-auth-shell > .sf-login-visual { align-self:start; }
}