/* Hand-written additions to the landing design, loaded AFTER landing.css.

   landing.css is generated from the design prototype's styles.css by tools/landing-port and is
   overwritten on every re-port — nothing hand-edited may live there. This file is the opposite:
   it is never generated, and holds the rules the prototype has no counterpart for, either because
   the prototype had no server behind it (form alerts, the honeypot, the submit spinner it declared
   but never styled) or because the portal has a page the prototype does not (/download).

   Same --lp-* tokens as landing.css; it must be loaded second. */

/* ==========================================================================
   17. Port additions
   Classes that exist in the Razor views but not in the design prototype, either because the
   prototype had no server behind it (form alerts, the honeypot, the submit spinner it declared
   but never styled) or because the port had to say something the prototype did not (a roadmap
   badge, an unavailable download, a rating source link).

   Kept in one clearly-labelled block at the end so a re-port can replace sections 1-16 wholesale
   from the prototype without losing them. Same --lp-* tokens as everything above.
   ========================================================================== */

/* The language menu is a list of little POST forms rather than clickable <li>s, so that picking a
   language persists it in a cookie. These carry the item styling the prototype put on the li. */
.lang-dropdown li {
  padding: 0;
  display: block;
}
.lang-dropdown li form {
  margin: 0;
}
.lang-option {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 0.5rem 0.85rem;
  font-family: var(--lp-font-body);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--lp-text-primary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: var(--lp-transition-fast);
}
.lang-option:hover {
  background: rgba(1, 110, 54, 0.08);
  color: var(--lp-omr-green);
}
.lang-option.active {
  background: var(--lp-omr-green);
  color: #ffffff;
  font-weight: 600;
}
.lang-option.active .lang-flag {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}



/* A feature that is on the roadmap rather than shipped. Deliberately legible rather than subtle:
   the point is that a reader cannot mistake it for something they can use today. */
.feature-soon-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  background: var(--lp-omr-surface, rgba(6, 182, 212, 0.1));
  color: var(--lp-omr-cyan);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-family: var(--lp-font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.feature-card.is-upcoming .feature-icon {
  opacity: 0.72;
}

/* Server-side error summary above the trial form. */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-family: var(--lp-font-body);
  font-size: 0.85rem;
  line-height: 1.5;
}
.form-alert-error {
  background: var(--lp-omr-red-surface);
  color: var(--lp-omr-red-dark);
  border: 1px solid rgba(233, 32, 40, 0.25);
}
.form-alert i {
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Honeypot. Off-screen rather than display:none — some bots skip fields that are display:none,
   and a screen reader is kept away by aria-hidden and tabindex="-1" on the input itself. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cloudflare Turnstile on the trial form. min-height reserves the widget's 65px so the submit button
   does not jump when the iframe arrives. The flexible widget needs at least 300px, and the card's
   2.5rem side padding left about 278px inside it at a 390px phone width, so the card pads less on
   small screens. */
.turnstile-group {
  min-height: 65px;
}
.turnstile-group .cf-turnstile {
  max-width: 100%;
}
@media (max-width: 600px) {
  .trial-form-card {
    padding: 2rem 1.25rem;
  }
}

/* "By clicking Submit Trial Request, you agree to the Terms and the Privacy Policy." Replaces the
   prototype's terms checkbox (owner, 2026-09-14), which sat directly above Turnstile's own. */
.trial-terms-notice {
  margin: 0.25rem 0 1rem;
  font-family: var(--lp-font-body);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--lp-text-primary);
  text-align: center;
}
.trial-terms-notice strong {
  color: var(--lp-text-heading);
  font-weight: 600;
}
.trial-terms-notice a {
  color: var(--lp-omr-green);
  font-weight: 600;
  text-decoration: none;
}
.trial-terms-notice a:hover,
.trial-terms-notice a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The submit button's spinner. The prototype's markup declared <span class="spinner"> and its JS
   toggled it, but no rule for it was ever written, so it was invisible either way. */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: lp-spin 0.7s linear infinite;
}
.spinner.hidden {
  display: none;
}
@keyframes lp-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* "No installer published yet." DesktopApp:DownloadUrl is blank until a release ships, and saying
   so is the deliberate behaviour — never replace this with a placeholder link. */
.download-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(245, 158, 11, 0.1);
  color: #92610a;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-family: var(--lp-font-body);
  font-size: 0.875rem;
}

/* Reference number on the submission confirmation. */
.modal-reference {
  font-family: var(--lp-font-mono);
  font-size: 0.8rem;
  color: var(--lp-text-muted);
  margin-top: -0.35rem;
  margin-bottom: 1rem;
}

/* Link to wherever the reviews behind the aggregate rating actually live. Rendered only when
   Site:Rating:SourceUrl is set, because a rating nobody can check is not evidence. */
.testimonials-rating-source {
  margin-top: 1.75rem;
  font-family: var(--lp-font-body);
  font-size: 0.85rem;
}
.testimonials-rating-source a {
  color: var(--lp-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonials-rating-source a:hover {
  color: var(--lp-omr-green);
}

/* --------------------------------------------------------------------------
   /download — the desktop app's details page.

   The prototype has no counterpart (it only has the #download SECTION on the home page), so this
   composes the same primitives that section uses: .hud-card, .download-card, .section-header,
   .badge-tag. Nothing here is invented chrome.

   It exists as its own block because the landing layout does NOT load the theme's core.css, so the
   Bootstrap utilities this page used to lean on (d-flex, mb-4, text-body-secondary, h4) are no-ops
   here — which is what left it rendering as raw prose on first port.
   -------------------------------------------------------------------------- */
.lp-doc-section {
  padding: 8rem 0 5rem;
}

.lp-dl-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.lp-dl-version-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 1.5rem;
}
.lp-dl-label {
  font-family: var(--lp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}
.lp-dl-version {
  font-family: var(--lp-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--lp-text-dark);
}

.lp-dl-heading {
  font-family: var(--lp-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--lp-text-heading);
  text-align: center;
  margin: 4rem 0 1.75rem;
}

/* Install steps as cards rather than a numbered list, echoing the home page's step tabs. */
.lp-dl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.lp-dl-step {
  padding: 1.5rem;
}
.lp-dl-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  background: var(--lp-omr-green);
  color: #ffffff;
  font-family: var(--lp-font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.lp-dl-step p {
  font-family: var(--lp-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--lp-text-primary);
  margin: 0;
}

/* The unsigned-installer notice. Amber rather than brand green: it is a caution, and a reader
   skimming for what Windows will do should find it without reading the paragraph. */
.lp-doc-warning {
  margin: 2.5rem auto 0;
  max-width: 820px;
  padding: 1.5rem;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(254, 252, 232, 0.92);
}
.lp-doc-warning h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lp-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #92610a;
  margin: 0 0 0.6rem;
}
.lp-doc-warning p,
.lp-doc-warning li {
  font-family: var(--lp-font-body);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--lp-text-primary);
}
.lp-doc-warning ol {
  margin: 0.5rem 0 0;
  padding-left: 1.3rem;
}

.lp-dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.lp-dl-panel {
  padding: 1.75rem;
}
.lp-dl-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lp-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-text-heading);
  margin: 0 0 1rem;
}
.lp-dl-panel h3 i {
  color: var(--lp-omr-green);
  font-size: 1.2rem;
}
.lp-dl-panel p {
  font-family: var(--lp-font-body);
  font-size: 0.925rem;
  line-height: 1.8;
  color: var(--lp-text-primary);
  margin: 0 0 0.75rem;
}
.lp-dl-check {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-dl-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--lp-font-body);
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--lp-text-primary);
  margin-bottom: 0.55rem;
}
.lp-dl-check i {
  color: var(--lp-omr-green);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.lp-dl-contact {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lp-border-subtle);
  color: var(--lp-text-muted);
  font-size: 0.875rem;
}
.lp-dl-contact a {
  color: var(--lp-omr-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .lp-dl-steps { grid-template-columns: 1fr; }
  .lp-dl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-doc-section { padding: 6.5rem 0 3rem; }
  .lp-dl-heading { margin: 3rem 0 1.25rem; }
  .lp-dl-version { font-size: 2rem; }
}

/* The language switcher names every language in its own script (हिन्दी, ภาษาไทย, རྫོང་ཁ ...), on every
   page. In the text stacks those names would pull each self-hosted script face - about 1.3 MB, the
   Tibetan one alone 731 KB - into every visit, English included, defeating the unicode-range
   scoping in landing-fonts.css. Rendered in the system stack they cost nothing, and every OS a
   reader of that language uses ships a face for its own script. 2026-09-26. */
.lang-dropdown .lang-option {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Trial form country picker (landing.js), 2026-09-26: every country with its flag, searchable.
   The native <select> stays in the form, visually hidden, so it still submits and is what a
   no-JavaScript visitor sees. The button reuses .form-control.select-control, so the arrow, the
   floating label and the .has-error state all come from landing.css unchanged. */
.country-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.country-picker-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
}
.country-picker-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-flag {
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.country-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  width: max(100%, 300px);
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--lp-border-subtle);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.country-open .country-panel {
  display: block;
}
.country-search {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
}
.country-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.country-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--lp-text-dark);
  cursor: pointer;
}
.country-option[hidden] {
  display: none;
}
.country-option.active,
.country-option:hover {
  background: rgba(1, 110, 54, 0.08);
}
.country-option[aria-selected="true"] {
  font-weight: 600;
  color: var(--lp-omr-green);
}
.country-empty {
  padding: 0.6rem;
  font-size: 0.85rem;
  color: var(--lp-text-muted);
}
@media (max-width: 480px) {
  .country-panel {
    width: 100%;
  }
}