/* ========================================================================== */
/*  FireMeBot — LumonOS Theme                                                 */
/*  Refactor aligned to new HTML structure                                    */
/* ========================================================================== */

:root{
  --bg:#0B1B2B;            /* midnight/dark blue */
  --bg-2:#0E2438;          /* panel */
  --ink:#A7FFE5;           /* light greenish-blue text */
  --ink-muted:#22716b;     /* muted text */
  --accent:#63FFF1;        /* accents/cursor */
  --paper:#F7F7F2;         /* popup/white card if needed */
  --paper-ink:#111311;     /* popup text */
  --rule:rgba(167,255,229,0.35);
  --danger:#FF5C7A;

  --gutter-1:4px; --gutter-2:8px; --gutter-3:12px; --gutter-4:16px; --gutter-6:24px; --gutter-8:32px;

  --dur-fast:120ms; --dur-med:180ms; --dur-slow:280ms;
  --easing:cubic-bezier(.2,.6,.2,1);

  --card-li: color-mix(in srgb, var(--ink) 80%, var(--ink-muted) 20%);
  --header-h: 56px;
}

/* Base text everywhere */
html, body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}

/* UI / terminal-ish text prefers Helvetica look */
.mono,
.gauge,
.top-input .input{
  font-family: Helvetica, "Inter", Arial, sans-serif;
}

/* ========================================================================== */
/*  Utilities                                                                 */
/* ========================================================================== */

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[hidden]{ display:none !important; }

.mono{ font-family: inherit; }
.muted{ color: var(--ink-muted); }
.caps{ text-transform: uppercase; letter-spacing: .06em; }
.bad{ color: var(--danger); }
.mt-3{ margin-top: var(--gutter-3); }
.cluster{ display:inline-flex; align-items:center; gap:var(--gutter-2); }

/* Vertical stack utilities for consistent in-card spacing */
.stack-2, .stack-3, .stack-4{
  display:flex;
  flex-direction: column;
}
.stack-2{ gap: var(--gutter-2); }
.stack-3{ gap: var(--gutter-3); }
.stack-4{ gap: var(--gutter-4); }
/* When a stack is used, zero child margins so gap controls rhythm */
.stack-2 > *, .stack-3 > *, .stack-4 > *{ margin: 0; }
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gutter-6);
  align-items: start;
}
@media (min-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.grid > *{ min-width:0; }
.rule{ height:1px; background:var(--rule); margin: var(--gutter-3) 0; }
.card li{ color: var(--card-li); }

/* Tighten spacing for Tips list */
#out-tips{ 
  margin: 0;                 /* remove UA default vertical margins */
  padding-left: 1.25rem;     /* keep bullet indent */
}
#out-tips li{ 
  margin: 0;                 /* reset any margins added by content */
}
#out-tips li + li{ 
  margin-top: var(--gutter-2); /* controlled, small space between bullets */
}
#out-tips p{ 
  margin: 0;                 /* some renderers add <p> inside li */
}

/* Normalize any rendering shape for #out-tips (div or ul) */
#out-tips,
#out-tips ul,
#out-tips ol{
  margin: 0;
  padding-left: 1.25rem;     /* consistent bullet indent */
  line-height: 1.4;          /* slightly tighter bullets */
}
#out-tips > li{ margin: 0; }
#out-tips ul > li,
#out-tips ol > li{ margin: 0; }
#out-tips li + li{ margin-top: var(--gutter-2); }


/* Buttons */
.btn{
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink);
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  transition: transform var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
/* Make action button align with input */
.top-input__button.btn{
  height:100%;
  padding:12px 16px;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: rgba(167,255,229,0.12); }
.btn--primary:hover{ background: rgba(167,255,229,0.18); }
.btn--ghost{ background: transparent; }
.btn--ghost:hover{ background: rgba(167,255,229,0.08); }
/* Visible focus ring on dark bg */
.input:focus, .btn:focus, .input:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Inputs */
.input{
  width:100%;
  padding:12px 14px;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--rule);
  border-radius:6px;
  outline:none;
  box-sizing: border-box; /* Safari: include padding/border in width */
  overflow: hidden;
  text-overflow: ellipsis;
}

.input::placeholder{ color: var(--ink-muted); }

/* Layout */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--gutter-6) var(--gutter-4);
}
.header, .topbar{
  position: fixed;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: var(--gutter-4);
  margin-bottom: var(--gutter-6);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  /* full-bleed header bar */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--gutter-4);
  padding-right: var(--gutter-4);
  box-sizing: border-box;
  min-height: var(--header-h);
}
.brand__title{ font-size:24px; font-weight:bold; line-height:1; }
.brand__badge{ font-size:12px; }

.main{ display:block; }
/* Note: .header (alias for previous .topbar) and .header-bar (alias for previous .top-input) */

/* Cards / Panels */
.panel{ margin-top: var(--gutter-4); }
.card{
  display: none;
  border:1px solid var(--rule);
  background:var(--bg-2);
  padding: var(--gutter-6);
  margin-bottom: var(--gutter-6);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(167,255,229,0.05) inset;
}
.card + .card{ margin-top: var(--gutter-6); }
/* Default card heading spacing; stacks will override child margins */
.card h2, .card h3{ margin: 0 0 var(--gutter-3) 0; }
/* Tighter title-to-rule spacing in key cards */
#results-card h2{ margin-bottom: var(--gutter-2); }
#results-card .rule{ margin: var(--gutter-2) 0 var(--gutter-3); }
#post-card h3{ margin-bottom: var(--gutter-2); }
#post-card .rule{ margin: var(--gutter-2) 0 var(--gutter-3); }
/* Remove the automatic next-sibling bump when using stacks */
.card :is(.stack-2, .stack-3, .stack-4) > :is(h1,h2,h3,h4) + *{ margin-top: 0; }

/* ========================================================================== */
/*  Footer (inline SVG + link)                                                */
/* ========================================================================== */

#fm-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: var(--gutter-6);
  margin-bottom: var(--gutter-6);
  padding: var(--gutter-6) var(--gutter-4);   /* requested padding */
  color: var(--ink-muted);                      /* SVG fill via currentColor */
  background: transparent;                    /* keep page bg, color drives fill */
}

#fm-footer a{
  display:flex;
  flex-direction: column;                     /* center logo above wordmark */
  align-items:center;
  gap: var(--gutter-2);
  text-decoration: none;
  color: inherit;                             /* match footer color */
}

#fm-footer a:hover{
  color: #82d6bd;
}

#fm-footer .logo{
  position: relative;
  display:block;
  width: 140px;
  max-width: 60vw;
  line-height: 0;
}

#fm-footer .logo svg{
  display:block;
  width:100%;
  height:auto;
}

#fm-footer .wordmark{
  font: 500 12px/1 "Inter", Helvetica, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: lowercase;
  opacity: .9;
}

/* Shimmer overlay (only when loading) */
#fm-footer .logo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.00) 42%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.00) 58%,
    transparent 100%);
  transform: translateX(-150%);
  pointer-events: none;
  opacity: 0; /* default off */
}

/* play shimmer only while progress pct is loading */
@keyframes fm-shimmer { to { transform: translateX(150%); } }

body:has(.top-input [data-state="loading"] #progress-pct),
body:has(.header-bar [data-state="loading"] #progress-pct) #fm-footer .logo::after{
  opacity: 1;
  animation: fm-shimmer 1.6s linear infinite;
}

/* ========================================================================== */
/*  Header Bar (sticky) + Loader                                               */
/* ========================================================================== */

.top-input, .header-bar{
  position:sticky; top:var(--header-h); z-index:99;
  border-bottom:1px solid var(--rule);
  background: var(--bg);
  padding: var(--gutter-3) var(--gutter-4);
  margin-top: var(--gutter-6);
  margin-bottom: var(--gutter-6);
  box-shadow: none;
}
/* remove margin once results are fully loaded */
.top-input[data-state="done"],
.header-bar[data-state="done"] {
  margin-top: 0;
}

.top-input__form, .header-bar__form{
  display:flex;
  align-items:stretch;
  gap: var(--gutter-2);
  position:relative;
  flex-wrap: nowrap;
}
.top-input__field, .header-bar__field{
  flex: 1 1 260px;  /* grow, shrink, give a sensible min basis */
  min-width:0;
  border-radius:0;
}
.top-input__button, .header-bar__button{
  position:relative;
  z-index:2;
  white-space:nowrap;
  border-radius:6px;
  margin-left:0;
  align-self: stretch;
  display:inline-flex;
  align-items:center;
  padding:0;                      /* let .btn control interior */
  flex: 0 0 auto;
  background: transparent;
}

/* Input progress fill as background */
.top-input__field, .header-bar__field{
  position: relative;
  --pct: 0; /* 0..100 */
  background: transparent;
  isolation: isolate; /* for blend-mode option */
  min-width: 0;
}
.top-input__field::before, .header-bar__field::before{
  content:"";
  position:absolute; inset:0;
  width: calc(var(--pct) * 1%);
  background: var(--ink);
  border-radius:4px 4px 4px 4px;
  z-index: 1;
  transition: width var(--dur-slow) var(--easing);
}
.top-input__field .input, .header-bar__field .input{
  position: relative; z-index: 1;
  background: transparent;
}

#progress-pct{
  position:absolute;
  top:50%;
  left: clamp(1%, calc(var(--pct) * 1%), 100%);
  transform: translate(-100%, -50%);
  font-size: clamp(12px, 3.4vw, 16px);
  white-space: nowrap;
  pointer-events:none;
  z-index: 10;                  /* above input + fill */
  color:#0B1B2B;                /* dark text on mint fill */
  padding-right: 12px;          /* buffer from the fill edge */
  /*opacity: 0;                   /* hidden by default */
  transition: opacity var(--dur-fast) var(--easing),
              left var(--dur-med) var(--easing);
  will-change: opacity, left;
}
.top-input__field[data-fill-at-right="true"] .input::placeholder, .header-bar__field[data-fill-at-right="true"] .input::placeholder {
  opacity: 0; color: transparent;
}

/* Show only while active (loading) */
/* Show + fade in when not idle; 0 at 30%, 1 at 100% */
.top-input__field[data-state="active"] #progress-pct,
.top-input__field[data-state="working"] #progress-pct,
.top-input__field[data-state="loading"] #progress-pct,
.top-input__field[data-state="fadeout"] #progress-pct,
.header-bar__field[data-state="active"] #progress-pct,
.header-bar__field[data-state="working"] #progress-pct,
.header-bar__field[data-state="loading"] #progress-pct,
.header-bar__field[data-state="fadeout"] #progress-pct,
.top-input__form[data-state="active"] #progress-pct,
.top-input__form[data-state="working"] #progress-pct,
.top-input__form[data-state="loading"] #progress-pct,
.top-input__form[data-state="fadeout"] #progress-pct,
.header-bar__form[data-state="active"] #progress-pct,
.header-bar__form[data-state="working"] #progress-pct,
.header-bar__form[data-state="loading"] #progress-pct,
.header-bar__form[data-state="fadeout"] #progress-pct,
.top-input [data-state="active"] #progress-pct,
.top-input [data-state="working"] #progress-pct,
.top-input [data-state="loading"] #progress-pct,
.top-input [data-state="fadeout"] #progress-pct,
.header-bar [data-state="active"] #progress-pct,
.header-bar [data-state="working"] #progress-pct,
.header-bar [data-state="loading"] #progress-pct,
.header-bar [data-state="fadeout"] #progress-pct{
  opacity: calc((var(--pct) - 30) / 70);
}
@keyframes pct-enter {
  from { opacity: 0; transform: translate(calc(-100% + 8px), -50%); }
  to   { opacity: 1; transform: translate(-100%, -50%); }
}
.top-input__field[data-darktext="true"] #progress-pct, .header-bar__field[data-darktext="true"] #progress-pct{
  animation: pct-enter 180ms ease-out;
}
.top-input__field[data-fill-at-right="true"] #progress-pct, .header-bar__field[data-fill-at-right="true"] #progress-pct{
  color: var(--paper-ink);
}
.top-input__field[data-onlight="true"] .input, .header-bar__field[data-onlight="true"] .input{
  color: var(--paper-ink);
}
.top-input__field[data-onlight="true"] .input::placeholder, .header-bar__field[data-onlight="true"] .input::placeholder{
  color: color-mix(in srgb, var(--paper-ink) 65%, #666 35%);
}
.top-input__field[data-darktext="true"] .input, .header-bar__field[data-darktext="true"] .input{
  color: var(--bg);
}
.top-input__field[data-darktext="true"] #progress-pct, .header-bar__field[data-darktext="true"] #progress-pct{
  color: var(--bg);
}

.top-input__progress, .header-bar__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:transparent;
}
#progress-bar{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background: var(--ink);
  transition: width var(--dur-slow) var(--easing);
}
@media (max-width: 520px){
  .top-input__form, .header-bar__form{
    flex-wrap: nowrap;
    gap: var(--gutter-2);
  }
  .top-input__field, .header-bar__field{
    flex: 1 1 auto;
    min-width: 0;          /* allow input to actually shrink */
  }
  .top-input__button, .header-bar__button{
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
  }
  .top-input__button .btn, .header-bar__button .btn{
    padding: 8px 10px;     /* tighter tap target on phones */
  }
}


/* ========================================================================== */
/*  Gauge                                                                     */
/* ========================================================================== */

.gauge{ display:flex; align-items:center; gap:var(--gutter-6); }
.gauge__bar{
  flex:1; height:12px; border:1px solid var(--rule); border-radius:2px;
  background:var(--bg);
  overflow:hidden;
}
.gauge__fill{
  height:100%; width:0%;
  background: var(--ink-muted);
  transition: width var(--dur-med) var(--easing), background var(--dur-fast) var(--easing);
}
/* color states driven by JS by toggling one of these classes */
.gauge__fill--green{ background:#00C46A; }
.gauge__fill--yellow{ background:#E6D200; }
.gauge__fill--red{ background:#FF3B3B; }

.gauge__value{ min-width:56px; text-align:right; }
@media (max-width:520px){
  .gauge{ gap: var(--gutter-4); }
}

/* ========================================================================== */
/*  Typewriter (body text printing)                                           */
/* ========================================================================== */

.typewriter{
  min-height: 3lh;
  white-space: pre-wrap;
  max-width: 66ch;
}
@media (prefers-reduced-motion: no-preference){
  .typewriter.typing,
  .typewriter li.typing{
    border-right: 1px solid var(--accent);
    animation: caret-blink .75s step-end infinite;
  }
}

/* ========================================================================== */
/*  “KV” Label                                                                */
/* ========================================================================== */

.kv__k{
  font-size:12px;
  font-weight: bold;
  color: var(--ink-muted);
  letter-spacing: .08em;
  margin-bottom: var(--gutter-2);
}

/* ========================================================================== */
/*  Error Card                                                                */
/* ========================================================================== */

#errorCard[hidden]{ display:none; }
#errorCard .mono{ color: var(--ink); }
#errorCard{ border-color: rgba(255,92,122,0.45); box-shadow: 0 0 0 1px rgba(255,92,122,0.08) inset; }

/* ========================================================================== */
/*  Scroll & Sticky spacing                                                   */
/* ========================================================================== */

@media (min-width:1px){
  /* ensure in-page links/alerts don’t hide beneath sticky header */
  body{ scroll-padding-top: var(--header-h); }
}

/* ========================================================================== */
/*  Optional: “paper” pop-ups (white w/ black text) to sell the 60s vibe      */
/* ========================================================================== */

.popup{
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid #D8D8CE;
  box-shadow: 0 6px 40px rgba(0,0,0,.35);
}

/* Inline badges */
.badge{ display:inline-block; border:1px solid var(--rule); padding:2px 6px; border-radius:3px; font-size:12px; }
.badge--error{ color:#FF5C7A; border-color: rgba(255,92,122,.45); }