@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

/* ILERPG.com prototype stylesheet.
   Typeface choice: IBM Plex — IBM's own type family. Mono carries the
   display headlines because the entire subject is fixed-width source. */

:root {
  --ink: #090909;
  --card: #151515;
  --card2: #1B1B1B;
  --line: #2A2A2A;
  --primary: #3B82F6;
  --accent: #06B6D4;
  --success: #10B981;
  --muted: #D3D7DD;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: #fff;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Faint 5250 column grid behind the page — the ruler a fixed-format
   source member is written against. Present, never loud. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 84px 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 70%);
}

.shell {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  position: relative;
  z-index: 1;
}

/* ---- Type ---- */
.display {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7280;
}

/* IBM i object names: LIBRARY/OBJECT. Used as the labelling system
   throughout instead of decorative 01 / 02 / 03 markers. */
.objname {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(6, 182, 212, .07);
  border: 1px solid rgba(6, 182, 212, .22);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

/* ---- Source pane: the signature element ---- */
.src-pane {
  background: #0C0C0C;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.src-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--line);
  background: #101010;
  font-size: .6875rem;
  color: #6B7280;
  letter-spacing: .05em;
}

.src-body {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow-x: auto;
}

.src-gutter {
  padding: 1rem .85rem 1rem 1rem;
  color: #3A3A3A;
  text-align: right;
  user-select: none;
  border-right: 1px solid #1C1C1C;
  white-space: pre;
  font-size: .75rem;
}

.src-code {
  padding: 1rem 1.25rem;
  white-space: pre;
  color: #C9D1D9;
}

.src-out {
  border-top: 1px solid var(--line);
  background: #0A0A0A;
  padding: .7rem 1.25rem;
  color: var(--success);
  font-size: .75rem;
  white-space: pre;
  overflow-x: auto;
}

.t-key { color: #7DA9FF; }
.t-str { color: #6EE7B7; }
.t-num { color: #F0B67F; }
.t-cmt { color: #5A6270; font-style: italic; }
.t-fn  { color: #C4A7FF; }

/* ---- Controls ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 500;
  padding: .68rem 1.15rem;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #4C8DF7, #2E6FE0);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 18px -8px rgba(59, 130, 246, .8);
}
.btn-primary:hover { background: linear-gradient(180deg, #5D99F9, #3B82F6); }

.btn-ghost {
  border: 1px solid var(--line);
  color: #E5E7EB;
  background: transparent;
}
.btn-ghost:hover { border-color: #3D3D3D; background: #131313; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .18s ease, transform .18s ease;
}
.card-hover:hover { border-color: #3A3A3A; transform: translateY(-3px); }

/* ---- Locked media ---- */
.lock-media { position: relative; overflow: hidden; }
.lock-media img,
.lock-media .fake-frame { filter: blur(14px) saturate(.35) brightness(.55); transform: scale(1.08); }
.lock-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .85rem;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, rgba(9, 9, 9, .35), rgba(9, 9, 9, .88));
  padding: 1.5rem;
}

/* ---- Grey/muted copy: bumped ~1-1.5px larger for readability
   (colour brightness itself comes from the tailwind.config `muted` value) ---- */
.text-muted { font-size: 1.08em; }
.text-xs.text-muted { font-size: 13px !important; }
.text-sm.text-muted { font-size: 15.5px !important; }
.text-base.text-muted { font-size: 17.5px !important; }
.text-lg.text-muted { font-size: 19.5px !important; }

/* ---- Hero typewriter ---- */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  margin-left: 4px;
  background: currentColor;
  color: #22D3EE;
  height: 0.82em;
  vertical-align: -0.08em;
  animation: tw-blink 1s step-start infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* ---- Motion ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Accessibility ---- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: .5rem;
  background: var(--primary);
  color: #fff;
  padding: .5rem .85rem;
  border-radius: 6px;
  z-index: 60;
}
.skip-link:focus { left: 1rem; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0C0C0C; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 6px; border: 2px solid #0C0C0C; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* ---- Form inputs (added for the PHP app) ---- */
.input{
  width:100%;
  background:#0F0F0F;
  border:1px solid #2A2A2A;
  border-radius:.6rem;
  padding:.7rem .85rem;
  color:#fff;
  font-size:.9rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color:#6B7280; }
.input:focus{
  outline:none;
  border-color:#3B82F6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.input:disabled{ cursor:not-allowed; }
textarea.input{ resize:vertical; min-height:6rem; }

/* ---- Logo-inspired neon accents (blue -> cyan -> green) ---- */
.neon-rule {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #3B82F6 0%, #22D3EE 45%, #5FD64A 100%);
  opacity: .9;
}
.neon-text {
  background: linear-gradient(90deg, #3B82F6, #22D3EE 50%, #5FD64A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.neon-divider {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, #22D3EE 50%, transparent);
  opacity: .5;
}
/* Primary button: subtle blue->cyan neon */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6, #22D3EE) !important;
  border-color: rgba(56,189,248,.5) !important;
  color: #051018 !important;
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5D99F9, #4BE0F5) !important;
}