/* Layer: page-specific
   Scope: welcome page and its attached LoginForm.
   Used by: REALM/assets/atoms/starter/welcome.html
   The Reegl CSS palette and the shared Reegl Classic mark form the visual baseline. */

.welcome-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

.welcome-page :is(p, h1, h2) { margin: 0; }
.welcome-page :where(details) { margin: 0; padding: 0; border: 0; border-radius: 0; }
.welcome-page details > * + * { margin-block-start: 0; }
.welcome-page summary::before { content: none; }
.welcome-symbols { display: none; }

.welcome-main svg {
  inline-size: var(--uspm);
  block-size: var(--uspm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-page :is(summary, a, select):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

.welcome-skip {
  position: absolute;
  inset-block-start: var(--usps);
  inset-inline-start: var(--usps);
  padding: var(--usps);
  border-radius: var(--radius);
  background: var(--surface);
  transform: translateY(-200%);
  z-index: 10;
}

.welcome-skip:focus { transform: none; }

.welcome-header {
  inline-size: 100%;
  grid-template-columns: auto minmax(0, 1fr);
}

.welcome-main {
  inline-size: min(100%, 54rem);
  margin-inline: auto;
  padding: var(--uspxl) var(--uspm) var(--uspl);
  flex: 1;
}

.welcome-hero { text-align: center; }
.welcome-hero p { margin-inline: auto; }

.welcome-main .welcome-mark {
  display: block;
  inline-size: calc((var(--usp2xl) + var(--uspl)) * 0.625);
  block-size: calc(var(--usp2xl) + var(--uspl));
  margin-inline: auto;
  margin-block-end: var(--uspm);
  stroke: none;
}

.welcome-hero h1 {
  font-size: var(--ust4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.welcome-hero h1 span { color: var(--text-muted); font-weight: 350; }

.welcome-hero .welcome-product {
  margin-block-start: var(--uspxs);
  font-size: var(--ust-1);
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.welcome-hero .welcome-intro {
  margin-block-start: var(--uspm);
  font-size: var(--ust0);
  color: var(--text-muted);
}

.welcome-account {
  margin-block: var(--uspl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.welcome-page summary { list-style: none; cursor: pointer; font-weight: 400; }
.welcome-page summary::-webkit-details-marker { display: none; }

.welcome-account-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uspm);
  padding: var(--uspm);
}

.welcome-account-summary:focus-visible { outline-offset: -4px; }

.welcome-avatar {
  display: grid;
  place-items: center;
  inline-size: var(--uspxl);
  block-size: var(--uspxl);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
}

.welcome-account-copy { flex: 1 1 14rem; }
.welcome-account-copy .welcome-greeting { font-size: var(--ust1); font-weight: 550; }
.welcome-account-copy strong { font-weight: inherit; }
.welcome-account-copy > p + p { margin-block-start: var(--usp2xs); font-size: var(--ust-1); color: var(--text-muted); }
.welcome-sign-in { min-block-size: 44px; font-size: var(--ust0); }
.welcome-sign-in svg { inline-size: var(--usps); block-size: var(--usps); }
#rx-account-action::after { content: "→"; margin-inline-start: var(--uspxs); }

.welcome-login {
  display: grid;
  gap: var(--usps);
  padding: var(--uspm);
  border-top: 1px solid var(--border);
}

.welcome-page .rx-login-error { margin: var(--uspm); color: var(--c-danger); font-size: var(--ust-1); }

.welcome-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--usplxl);
  padding-block: var(--usps) var(--uspxl);
}

.welcome-tool h2 {
  display: flex;
  align-items: center;
  gap: var(--uspxs);
  font-size: var(--ust0);
  font-weight: 550;
}

.welcome-tool h2 svg { color: var(--text-muted); }
.welcome-tool > p { margin-block-start: var(--uspxs); font-size: var(--ust-1); color: var(--text-muted); }
.welcome-ping-controls { display: flex; gap: var(--uspxs); margin-block: var(--uspm) var(--usps); }
.welcome-ping-controls .input { flex: 1; inline-size: 0; min-inline-size: 0; }
.welcome-ping-controls .btn { flex: none; min-block-size: 44px; white-space: nowrap; }
.welcome-ping-controls .btn:disabled { opacity: 1; color: var(--text-muted); border-color: var(--border); }
.welcome-ping-controls svg { inline-size: var(--usps); block-size: var(--usps); }
.welcome-page .welcome-note { font-size: var(--ust-1); color: var(--text-muted); }

.welcome-runtime {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--uspxs) var(--uspl);
  margin-block: var(--uspm) var(--usp2xs);
  padding-block: var(--usps);
  border-block: 1px solid var(--border);
  font-size: var(--ust-1);
}

.welcome-runtime > div { display: contents; }
.welcome-runtime dt { color: var(--text-muted); font-weight: 400; }
.welcome-runtime dd { margin: 0; font-weight: 550; }
.welcome-guide { border-block: 1px solid var(--border); }
.welcome-guide > summary { display: flex; align-items: center; gap: var(--uspm); padding-block: var(--uspm); }
.welcome-guide > summary > svg { color: var(--text-muted); }
.welcome-guide > summary > span { flex: 1; }
.welcome-guide strong { display: block; font-size: var(--ust0); font-weight: 550; }
.welcome-guide summary span span { display: block; margin-block-start: var(--usp2xs); font-size: var(--ust-1); color: var(--text-muted); }
.welcome-guide[open] .welcome-chevron { transform: rotate(90deg); }
.welcome-guide-content { display: grid; justify-items: start; gap: var(--usps); padding-block-end: var(--uspm); }
.welcome-guide-content img { border-radius: var(--radius); }
.welcome-guide-content a { min-block-size: 44px; display: inline-flex; align-items: center; gap: var(--usp2xs); font-size: var(--ust-1); }

.welcome-main > .welcome-larry {
  margin-block-start: var(--uspl);
  margin-inline: auto;
  color: var(--text-muted);
  font-size: var(--ust-1);
  text-align: center;
}

.welcome-larry > span:first-child { margin-inline-end: var(--usp2xs); color: var(--c1); font-family: var(--font-mono); }

@media (max-width: 36rem) {
  .welcome-account-copy { flex-basis: calc(100% - var(--uspxl) - var(--uspm)); }
  .welcome-sign-in { inline-size: 100%; }
}

.welcome-page [hidden] { display: none; }
#rx-api-state { overflow-wrap: anywhere; }
.welcome-guide-content img { inline-size: 100%; block-size: auto; }