:root {
  --accent-foreground: var(--lima-blue-700);
  --background: #ffffff;
  --border: var(--lima-neutral-200);
  --duration-fast: 180ms;
  --ease-out: cubic-bezier(0.25, 1,    0.5,  1);
  --font-be-vietnam-pro: "Be Vietnam Pro";
  --font-heading: var(--font-be-vietnam-pro), var(--font-ibm-plex-sans), sans-serif;
  --font-ibm-plex-sans: "IBM Plex Sans";
  --font-sans: var(--font-ibm-plex-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-4xl: clamp(1.875rem,  1.4rem   + 2vw,    2.75rem);
  --font-size-base: clamp(0.9375rem, 0.9rem   + 0.25vw, 1rem);
  --font-size-lg: clamp(1rem,      0.95rem  + 0.28vw, 1.125rem);
  --font-size-sm: clamp(0.75rem,   0.72rem  + 0.2vw,  0.875rem);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --foreground: var(--lima-blue-1000);
  --letter-spacing-tighter: -0.05em;
  --lima-blue-1000: #001d29;
  --lima-blue-500: #05aeef;
  --lima-blue-700: #0073a1;
  --lima-blue-900: #003a52;
  --lima-neutral-200: #d4d7d8;
  --lima-neutral-600: #4d5456;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-tight: 1.25;
  --muted-foreground: var(--lima-neutral-600);
  --primary: var(--lima-blue-900);
  --primary-foreground: #ffffff;
  --radius-control: 0.25rem;
  --ring: var(--lima-blue-500);
  --size-icon-lg: 1.5rem;
  --size-icon-sm: 1rem;
  --spacing-1: 0.25rem;
  --spacing-10: clamp(2rem,     1.5rem  + 1.2vw,  2.5rem);
  --spacing-12: clamp(2.25rem,  1.8rem  + 1.2vw,  3rem);
  --spacing-16: clamp(3rem,     2.2rem  + 2vw,    4rem);
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
  --spacing-6: clamp(1.25rem,  1.1rem  + 0.4vw,  1.5rem);
  --spacing-8: clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
  --success-700: #357d2a;
}
/* lima-city PoW page. Light-theme tokens from the Luftschloss design system. */
@font-face { font-family: "IBM Plex Sans"; src: url("/lima-cgi/pow/v2/ibm-plex-sans-v23-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/lima-cgi/pow/v2/ibm-plex-sans-v23-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/lima-cgi/pow/v2/be-vietnam-pro-v12-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; }
button, summary, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, #ipValue:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
[hidden] { display: none !important; }
p, h1 { margin: 0; }
.protection { overflow: auto; padding: clamp(64px, 18vh, 180px) var(--spacing-6) var(--spacing-12); scrollbar-gutter: stable both-edges; }
.protection-content { width: 100%; max-width: 760px; margin-inline: auto; }
.destination { margin-bottom: var(--spacing-3); color: var(--muted-foreground); font-size: var(--font-size-lg); overflow-wrap: anywhere; }
h1 { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tighter); line-height: var(--line-height-tight); }
.verification { display: flex; align-items: center; gap: var(--spacing-4); margin-top: var(--spacing-10); }
.status-icon { display: grid; flex: 0 0 auto; place-items: center; width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--accent-foreground); }
.spinner { display: block; width: var(--size-icon-lg); height: var(--size-icon-lg); border: 2px solid var(--border); border-top-color: var(--accent-foreground); border-right-color: var(--accent-foreground); border-radius: 50%; animation: spin 1.2s linear infinite; }
.status-symbol { display: none; width: var(--size-icon-lg); height: var(--size-icon-lg); }
.status-title { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--foreground); }
.intro { max-width: 62ch; margin-top: var(--spacing-8); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--muted-foreground); }
.status-description { margin-top: var(--spacing-1); color: var(--muted-foreground); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.verification[data-state="interactive"] .spinner, .verification[data-state="error"] .spinner, .verification[data-state="success"] .spinner { display: none; }
.verification[data-state="interactive"] .status-symbol, .verification[data-state="error"] .status-symbol, .verification[data-state="success"] .status-symbol { display: block; }
.verification[data-state="success"] .status-icon { color: var(--success-700); }
.verification[data-state="error"] .status-icon { color: var(--muted-foreground); }
.continue-button { display: flex; justify-content: center; align-items: center; gap: var(--spacing-3); max-width: 100%; min-height: 48px; margin-top: var(--spacing-6); padding: var(--spacing-3) var(--spacing-6); border: 0; border-radius: var(--radius-control); background: var(--primary); color: var(--primary-foreground); font-weight: var(--font-weight-medium); cursor: pointer; }
.continue-button:hover { background: var(--accent-foreground); }
.explanation { margin-top: var(--spacing-8); max-width: 64ch; }
.explanation summary { display: flex; align-items: center; gap: var(--spacing-2); width: fit-content; max-width: 100%; min-height: 44px; color: var(--primary); font-size: var(--font-size-base); list-style: none; cursor: pointer; }
.explanation summary::-webkit-details-marker { display: none; }
.explanation summary:hover { color: var(--accent-foreground); }
.explanation summary svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-out); }
.explanation[open] summary svg { transform: rotate(180deg); }
.explanation-content { padding-top: var(--spacing-2); color: var(--muted-foreground); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.explanation-content p + p { margin-top: var(--spacing-3); }
/* A separate grid row keeps the footer visible without covering scrollable content. */
.protection-footer { background: var(--background); padding: var(--spacing-4) var(--spacing-8); border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--font-size-sm); }
.footer-content { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-6); max-width: 1280px; margin-inline: auto; }
.provider { display: flex; align-items: center; flex: 0 0 auto; gap: var(--spacing-3); }
.brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radius-control); }
.brand img { display: block; width: 104px; height: auto; }
.request-meta { display: flex; align-items: center; justify-content: center; gap: var(--spacing-6); min-width: 0; }
.request-id, .ip-address { display: flex; align-items: center; gap: var(--spacing-1); min-height: 44px; }
.request-id { flex-wrap: wrap; column-gap: var(--spacing-2); }
.request-value { overflow-wrap: anywhere; }
.ip-address { flex-shrink: 0; }
.ip-reveal { min-height: 44px; padding: 0 var(--spacing-1); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--primary); cursor: pointer; }
.ip-reveal:hover { color: var(--accent-foreground); text-decoration: underline; text-underline-offset: 4px; }
#ipValue { overflow-wrap: anywhere; }
.language-switch { display: flex; align-items: center; flex: 0 0 auto; gap: var(--spacing-2); }
.language-switch button { min-height: 44px; padding: 0 var(--spacing-1); border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: var(--radius-control); }
.language-switch button[aria-pressed="true"] { color: var(--primary); font-weight: var(--font-weight-medium); }
.language-switch button:hover { color: var(--accent-foreground); text-decoration: underline; text-underline-offset: 4px; }
.no-script { margin-top: var(--spacing-8); color: var(--muted-foreground); font-size: var(--font-size-base); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 991.98px) {
  .footer-content { flex-wrap: wrap; justify-content: center; column-gap: var(--spacing-8); row-gap: 0; }
  .request-meta { order: 1; flex-basis: 100%; }
}
@media (max-width: 575.98px) {
  .protection { padding: var(--spacing-16) var(--spacing-6) var(--spacing-8); scrollbar-gutter: auto; }
  .verification { margin-top: var(--spacing-8); }
  .intro { margin-top: var(--spacing-6); }
  .explanation { margin-top: var(--spacing-6); }
  .protection-footer { padding: var(--spacing-2) var(--spacing-4); font-size: 0.8125rem; }
  .footer-content { flex-direction: column; gap: 0; }
  .request-meta { order: 0; flex-direction: column; gap: 0; }
  .request-id { min-height: 24px; justify-content: center; }
  .provider { gap: var(--spacing-2); }
  .brand img { width: 96px; }
}
@media (max-height: 600px) {
  .protection { padding-top: var(--spacing-8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.submit-gate-note { margin-top: var(--spacing-6); max-width: 62ch; color: var(--muted-foreground); }
.no-js .verification, .no-js .status-description, .no-js .language-switch, .no-js .ip-address { display: none; }
