/* Flight strip page + authentic green nonradar strip rendering */

.strips-main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.75rem;
}

.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-bottom: 1rem;
}
.back-link:hover { color: var(--green); }

.page-title { margin: 0 0 0.25rem; font-size: 1.35rem; }
.page-sub { margin: 0 0 1.5rem; color: var(--text-dim); font-size: 0.9rem; }

/* ---------- Controls ---------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.control label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.control select,
.control input[type="number"] {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  padding: 0.45rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  min-width: 8.5rem;
}
.control input[type="number"] { min-width: 5rem; }

.btn {
  background: var(--green);
  color: #06210f;
  border: none;
  border-radius: 5px;
  padding: 0.55rem 1.2rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--sans);
  transition: filter 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
}
.btn-ghost:hover { color: var(--green); border-color: var(--green); }

.toggles { display: flex; gap: 1rem; align-items: center; margin-left: auto; }
.toggle {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.toggle input { accent-color: var(--green); }

/* ---------- Strip output ---------- */
#output { display: flex; flex-direction: column; gap: 1.5rem; }

.empty-state {
  text-align: center;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 3rem 1rem;
  border: 1px dashed var(--border-bright);
  border-radius: 8px;
}

.strip-card { display: flex; flex-direction: column; gap: 0.5rem; }

.strip-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.strip-tag .badge {
  background: var(--green-dim);
  color: #eafff2;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 700;
}
.strip-tag .bay-badge {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  color: var(--amber);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* FPS2000-style paper flight progress strip */
.fps-strip {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 188;
  background: #cdeeb0;              /* FPS green paper */
  color: #10240c;
  border: 1.5px solid #3f5a3a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: "Consolas", "SFMono-Regular", "Liberation Mono", monospace;
  /* slashed zeros where the font supports it (belt-and-suspenders: JS also substitutes) */
  font-feature-settings: "zero" 1;
  overflow: hidden;
  container-type: inline-size; /* enables cqw text sizing below */
}
.fps-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fps-grid line, .fps-grid rect { stroke: #4d6b48; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

.fps-cell {
  position: absolute;
  color: #10240c;
  line-height: 1.05;
  white-space: pre;
  overflow: hidden;
}
/* Text is sized in container-query units so it scales with the strip's width
   (1cqw = 1% of the strip). Values are the original pixel sizes at the 900px
   design width divided by 9. */
.fps-cell.aid { font-weight: 700; font-size: 2.55cqw; letter-spacing: 0; } /* 7-char call sign fits the 13cqw cell */
.fps-cell.type, .fps-cell.tas { font-size: 1.44cqw; }
.fps-cell.big { font-size: 1.56cqw; font-weight: 700; }
.fps-cell.mid { font-size: 1.44cqw; }
.fps-cell.sm { font-size: 1.22cqw; }
.fps-cell.arrow { font-size: 4.44cqw; font-weight: 900; text-align: right; line-height: 0.85; -webkit-text-stroke: 0.13cqw currentColor; }
.fps-cell.dir { font-size: 1.78cqw; font-weight: 700; text-align: center; line-height: 1; }
.fps-cell.pfv { display: flex; align-items: center; text-align: left; }
/* space 15 center estimate: larger hours, raised smaller minutes, lighter weight */
.fps-cell.est { font-weight: 500; }
.fps-cell.est .hh { font-size: 2.67cqw; }
.fps-cell.est .mm { font-size: 1.78cqw; position: relative; top: -0.9cqw; margin-left: 0.1cqw; }
.fps-cell.route { font-size: 1.33cqw; white-space: normal; line-height: 1.25; }
.fps-cell.rem { font-size: 1.22cqw; white-space: normal; line-height: 1.2; }

/* optional field-number overlay */
.fps-num {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.89cqw;
  color: #b23b2e;
  transform: translate(-0.1cqw, -1cqw);
  pointer-events: none;
  opacity: 0.8;
}

/* editable (blank template) mode */
.fps-strip.editable .fps-cell {
  outline: none;
  cursor: text;
}
.fps-strip.editable .fps-cell:focus { background: rgba(80, 150, 255, 0.14); }
.fps-strip.editable .fps-cell:empty::before {
  content: "";
}

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .controls, .back-link, .page-title, .page-sub,
  .reveal-row, .answer-key, .strip-tag, .scanlines { display: none !important; }
  .fps-strip { box-shadow: none; page-break-inside: avoid; margin-bottom: 8px; }
}

/* clamp strip width so proportions stay realistic on wide screens */
.strip-card .fps-strip { max-width: 900px; }

@media (min-width: 700px) {
  #output.small-strips .fps-strip { }
}

/* ---------- Answer key ---------- */
.reveal-row { display: flex; gap: 0.5rem; }

.answer-key {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
}
.answer-key h4 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-family: var(--mono);
  letter-spacing: 0.5px;
  color: var(--green);
  text-transform: uppercase;
}
.answer-key dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0;
}
.answer-key dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.answer-key dd { margin: 0; color: var(--text); }
.answer-key .math {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--amber);
}
.answer-key .note {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.78rem;
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .answer-key dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .answer-key dt { margin-top: 0.4rem; }
  .toggles { margin-left: 0; width: 100%; }
}

/* ---------- Bay board page chrome ---------- */
.board-hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.strip-details { display: flex; flex-direction: column; gap: 1rem; }
.empty-note {
  margin: 0;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.8rem;
}