/*
  The gate page (index.html, gate.js): the login card a stranger gets at the web address, before any of the app is
  downloaded, in the look of the app's own login card (docs/DESIGN.md, "The gate page"). The design system is not
  running yet, so its tokens are copied here as custom properties named after them: they mirror
  src/Gather.Client/Themes/Tokens.axaml (Color.Surface is --Color-Surface, FontSize.Body is --FontSize-Body), and
  GatePageTokensTests fails when one differs. Change them together. Light or dark by the system's choice: the app's own
  theme setting is not known before the login.
*/

/* Dark: Tokens.axaml, ResourceDictionary Dark. */
:root {
  color-scheme: dark light;
  --Color-Surface: #1F1A17;
  --Color-Panel: #26201C;
  --Color-Raised: #2E2722;
  --Color-Border: #3A3129;
  --Color-BorderStrong: #4A3F35;
  --Color-Text: #F2EBE2;
  --Color-TextMuted: #A89C8F;
  --Color-TextFaint: #6F655A;
  --Color-Accent: #EC643C;
  --Color-AccentHover: #F2764F;
  --Color-AccentPressed: #D6552F;
  --Color-OnAccent: #1F1A17;
  --Color-AccentText: #F49068;
  --Color-Warning: #F4CC44;
  --Color-Danger: #E25A4A;
  --Color-DangerText: #F28B7E;

  /* The same in both themes. */
  --FontSize-Caption: 11px;
  --FontSize-Small: 12px;
  --FontSize-Body: 14px;
  --FontSize-Display: 24px;
  --Space-1: 4px;
  --Space-2: 8px;
  --Space-3: 12px;
  --Space-4: 16px;
  --Size-Row: 32px;
  --Size-Touch: 44px;
  --Radius-Control: 6px;
  --Radius-Card: 10px;
  --Motion-Quick: 120ms;
  --Motion-Show: 180ms;
}

/* Light: Tokens.axaml, ResourceDictionary Light. */
@media (prefers-color-scheme: light) {
  :root {
    --Color-Surface: #FBF8F3;
    --Color-Panel: #F4EDE3;
    --Color-Raised: #FFFFFF;
    --Color-Border: #E4DCCC;
    --Color-BorderStrong: #CFC4B2;
    --Color-Text: #2C241C;
    --Color-TextMuted: #7A6E62;
    --Color-TextFaint: #A89C8F;
    --Color-Accent: #EC643C;
    --Color-AccentHover: #E0552D;
    --Color-AccentPressed: #C94A26;
    --Color-OnAccent: #1F1A17;
    --Color-AccentText: #C4502A;
    --Color-Warning: #A67C0A;
    --Color-Danger: #C9402F;
    --Color-DangerText: #B5362A;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--Color-Surface);
  color: var(--Color-Text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--FontSize-Body);
}

/* The page under the card, and over the app while it starts (app.css puts the app beneath, z-index 1). */
.gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--Color-Surface);
  transition: opacity var(--Motion-Show) ease-out;
}

.gate.done {
  opacity: 0;
  pointer-events: none;
}

/* Border.card.logincard: 440 wide, padded 32 by 28, on the panel tone with a hairline. */
.gate-card {
  box-sizing: border-box;
  width: 440px;
  margin: var(--Space-3);
  padding: 28px 32px;
  background: var(--Color-Panel);
  border: 1px solid var(--Color-Border);
  border-radius: var(--Radius-Card);
}

.gate-view {
  display: flex;
  flex-direction: column;
  gap: var(--Space-3);
  margin: 0;
}

.gate-view[hidden],
[hidden] {
  display: none !important;
}

.gate-mark {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--Space-3);
}

.gate-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gate-title {
  margin: 0;
  font-size: var(--FontSize-Display);
  font-weight: 600;
  text-align: center;
}

.caption {
  margin: 0;
  font-size: var(--FontSize-Caption);
  color: var(--Color-TextMuted);
}

.gate-heading .caption {
  text-align: center;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--Space-1);
}

.field label {
  font-size: var(--FontSize-Small);
  font-weight: 600;
}

/* TextBox: raised, bordered, the ember ring when focused. */
.field input {
  box-sizing: border-box;
  height: var(--Size-Row);
  padding: 6px 10px;
  font: inherit;
  color: var(--Color-Text);
  background: var(--Color-Raised);
  border: 1px solid var(--Color-Border);
  border-radius: var(--Radius-Control);
  outline: none;
  transition: border-color var(--Motion-Quick) ease-out;
}

.field input:hover {
  border-color: var(--Color-BorderStrong);
}

.field input:focus {
  border-color: var(--Color-Accent);
  box-shadow: 0 0 0 1px var(--Color-Accent);
}

.field input[aria-invalid="true"] {
  border-color: var(--Color-Danger);
}

.field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--Color-Danger);
}

.field input.code {
  font-family: "Cascadia Mono", Consolas, Menlo, "DejaVu Sans Mono", monospace;
  letter-spacing: 0.5px;
}

.field-error {
  margin: 0;
  font-size: var(--FontSize-Small);
  color: var(--Color-DangerText);
}

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space-2);
  flex-wrap: wrap;
}

.actions-end {
  justify-content: flex-end;
}

button {
  box-sizing: border-box;
  min-height: var(--Size-Row);
  padding: 6px 12px;
  font: inherit;
  border-radius: var(--Radius-Control);
  cursor: pointer;
  transition: background-color var(--Motion-Quick) ease-out, border-color var(--Motion-Quick) ease-out;
}

/* Button.primary: the ember, ink on it, semibold. */
.primary {
  margin-left: auto;
  color: var(--Color-OnAccent);
  background: var(--Color-Accent);
  border: 1px solid var(--Color-Accent);
  font-weight: 600;
}

.primary:hover {
  background: var(--Color-AccentHover);
  border-color: var(--Color-AccentHover);
}

.primary:active {
  background: var(--Color-AccentPressed);
  border-color: var(--Color-AccentPressed);
}

.primary:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* Button.ghost: quiet until the pointer is on it. */
.ghost {
  color: var(--Color-Text);
  background: transparent;
  border: 1px solid transparent;
}

.ghost:hover {
  border-color: var(--Color-Border);
}

/* A link in accent text. */
.link {
  padding: 6px 0;
  color: var(--Color-AccentText);
  background: none;
  border: 0;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* The focus ring is the ember, for every control, from the keyboard. */
:focus-visible {
  outline: 2px solid var(--Color-Accent);
  outline-offset: 2px;
}

.field input:focus-visible {
  outline: none;
}

/* Border.notice: the offer under a login whose name has no account. */
.notice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--Color-Panel);
  border: 1px solid var(--Color-Border);
  border-radius: var(--Radius-Control);
}

.notice strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.notice .actions {
  margin-top: var(--Space-2);
}

.status {
  margin: 0;
  font-size: var(--FontSize-Caption);
  color: var(--Color-TextMuted);
  text-align: center;
}

.status.problem {
  color: var(--Color-DangerText);
  font-size: var(--FontSize-Small);
}

/* Opening Gather…: the download's progress, the ember on a bordered track (ProgressBar). */
.opening-title {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.progress {
  height: 6px;
  overflow: hidden;
  background: var(--Color-Border);
  border-radius: 3px;
}

.progress-fill {
  width: 0;
  height: 100%;
  background: var(--Color-Accent);
  transition: width var(--Motion-Quick) linear;
}

.progress.waiting .progress-fill {
  width: 30%;
  animation: progress-wait 1600ms ease-in-out infinite;
}

.opening .caption {
  text-align: center;
}

.opening .problem {
  color: var(--Color-Warning);
  font-size: var(--FontSize-Small);
}

@keyframes progress-wait {
  0% { margin-left: -30%; }
  100% { margin-left: 100%; }
}

/* The narrow layout (Size.NarrowBreakpoint, 640): the card fills the page less a margin; fingers get Size.Touch. */
@media (max-width: 639px) {
  .gate {
    align-items: flex-start;
  }

  .gate-card {
    width: auto;
    flex: 1;
    margin: var(--Space-3);
    padding: 24px 20px;
  }

  .field input,
  button {
    min-height: var(--Size-Touch);
    height: var(--Size-Touch);
    font-size: 16px;
  }

  .link {
    min-height: var(--Size-Touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate,
  .field input,
  button,
  .progress-fill {
    transition: none;
  }

  .progress.waiting .progress-fill {
    animation: none;
    margin-left: 0;
    width: 100%;
    opacity: 0.4;
  }
}