/* ============================================================================
   signin.css — the sign-in page, styles A and B.

   Plain CSS on the shell's own tokens (--color-*, --radius-*, --font-*), no
   Tailwind. Loaded from index.html (style-src 'self'); the one value that comes
   from data — the colour shown while the picture loads — is set through the
   CSSOM (element.style), which the CSP allows, never a style attribute.

   Style A: the existing card, with the logo above the title.
   Style B: a split page — the form on one side, a full-height picture on the
   other. The grid follows the document's direction, so Arabic mirrors it with
   no rule of its own. Below 900px the picture is left out (and not downloaded).
   ==========================================================================*/

/* ---------------------------------------------------------------- shared */

.oc-signin-logo { display: block; height: 2rem; width: auto; }
.oc-signin-logo[data-mode="dark"] { display: none; }
.dark .oc-signin-logo[data-mode="light"] { display: none; }
.dark .oc-signin-logo[data-mode="dark"] { display: block; }

/* Style A: the logo sits above the card's title. */
.oc-signin-a .oc-signin-logo { margin-block-end: 1.25rem; }

/* A field kept in the form but not shown (style B leaves out "Keep me signed in";
   its value still travels, so signing in behaves exactly as before). */
.oc-signin-hidden { display: none !important; }

/* ---------------------------------------------------------------- style B */

.oc-signin-b {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  min-height: 100dvh;
  padding: 1.5rem;
  background: var(--color-gray-50, #f9fafb);
  color: var(--color-gray-900, #111827);
  font-family: var(--font-sans, system-ui, sans-serif);
}
:lang(ar) .oc-signin-b, [dir="rtl"] .oc-signin-b { font-family: var(--font-arabic, var(--font-sans, system-ui, sans-serif)); }
.dark .oc-signin-b {
  background: var(--color-gray-950, #030712);
  color: var(--color-gray-50, #f9fafb);
}

.oc-signin-b__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem clamp(1rem, 5vw, 4.5rem);
}
.oc-signin-b__side > * { width: 100%; max-width: 24rem; margin-inline: auto; }
.oc-signin-b__brand { margin-block-end: 2.5rem; }

.oc-signin-b__trial {
  display: inline-block;
  margin-block-start: 1.5rem;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-brand-600, #4f46e5);
  text-decoration: none;
  text-underline-offset: 3px;
}
.oc-signin-b__trial:hover, .oc-signin-b__trial:focus-visible { text-decoration: underline; }
.dark .oc-signin-b__trial { color: var(--color-brand-400, #818cf8); }

/* The picture: a rounded panel, full height, the loading colour behind it. */
.oc-signin-b__art {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  min-height: calc(100dvh - 3rem);
  background-color: var(--color-gray-200, #e5e7eb);
}
.dark .oc-signin-b__art { background-color: var(--color-gray-800, #1f2937); }
.oc-signin-b__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.oc-signin-b__art.is-loaded img { opacity: 1; }
/* The theme's name, quietly, in the reader's language. */
.oc-signin-b__caption {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #fff;
  background: rgb(0 0 0 / 0.28);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .oc-signin-b__art img { transition: none; }
}

/* Narrow screens: the form alone, the picture left out. */
@media (max-width: 899px) {
  .oc-signin-b { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .oc-signin-b__art { display: none; }
  .oc-signin-b__side { padding: 2.5rem 1.25rem; }
}

/* ------------------------------------------------- a workspace's own page */

/* /login/{code} with branded sign-in on: the workspace's logo and name in
   place of the platform's. One image for both modes — a workspace has one. */
.oc-signin-brand--workspace { display: flex; align-items: center; gap: 0.75rem; }
.oc-signin-logo--workspace {
  height: 2.75rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  border-radius: var(--radius-md, 0.375rem);
}
.oc-signin-brand__name {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-900, #111827);
}
.dark .oc-signin-brand__name { color: var(--color-gray-50, #f9fafb); }
.oc-signin-a .oc-signin-brand--workspace { margin-block-end: 1.25rem; }

/* ------------------------------------------- language and appearance */

/* Shared by both placements (components/signin-prefs.js PREFS_PLACEMENT). */
.oc-signin-prefs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 'top': fixed in the top corner on the START side (the form's side in style
   B, never over the picture); it mirrors in Arabic with the page. */
.oc-signin-prefs--top {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 20;
}

/* 'bottom': under the form, Google/Facebook style, on the form's side only. */
.oc-signin-prefs--bottom {
  justify-content: flex-start;
  width: 100%;
}
/* Style A (centred card): card and pickers stacked, same width. */
.oc-signin-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
}
/* Style B (split page): at the bottom of the form's side, clear of the picture. */
.oc-signin-b__side:has(> .oc-signin-prefs--bottom) {
  position: relative;
  padding-block-end: 4.5rem;
}
.oc-signin-b__side > .oc-signin-prefs--bottom {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline: 2rem;
  width: auto;
}
.oc-signin-prefs__select {
  font: inherit;
  font-size: 0.8125rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-md, 0.5rem);
  background-color: var(--color-white, #fff);
  color: var(--color-gray-900, #111827);
  cursor: pointer;
}
.dark .oc-signin-prefs__select {
  border-color: rgb(255 255 255 / 0.15);
  background-color: var(--color-gray-900, #111827);
  color: var(--color-gray-50, #f9fafb);
}
.oc-signin-prefs__select:focus-visible {
  outline: 2px solid var(--color-brand-600, #4f46e5);
  outline-offset: 2px;
}
/* 'bottom': quiet text buttons that open a dropdown (Google style) — no box,
   muted text, a soft tint on hover; the native arrow stays as the cue. */
.oc-signin-prefs--bottom .oc-signin-prefs__select,
.dark .oc-signin-prefs--bottom .oc-signin-prefs__select {
  border-color: transparent;
  background-color: transparent;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.oc-signin-prefs--bottom .oc-signin-prefs__select { color: var(--color-gray-500, #6b7280); }
.dark .oc-signin-prefs--bottom .oc-signin-prefs__select { color: var(--color-gray-400, #9ca3af); }
.oc-signin-prefs--bottom .oc-signin-prefs__select:hover {
  background-color: rgb(0 0 0 / 0.05);
  color: var(--color-gray-700, #374151);
}
.dark .oc-signin-prefs--bottom .oc-signin-prefs__select:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: var(--color-gray-200, #e5e7eb);
}
/* The open list itself follows the page's colours, not the transparent button. */
.oc-signin-prefs--bottom .oc-signin-prefs__select option {
  background-color: var(--color-white, #fff);
  color: var(--color-gray-900, #111827);
}
.dark .oc-signin-prefs--bottom .oc-signin-prefs__select option {
  background-color: var(--color-gray-900, #111827);
  color: var(--color-gray-50, #f9fafb);
}
/* Read by screen readers, not shown. */
.oc-signin-prefs__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}