/* "Will it fit?" — the loadability check on the homepage.
   The section used to be a photograph with three labels. This is the same data
   doing work: the visitor's own piece, drawn to scale inside each freighter's
   published door aperture. */

.gf { margin-top: clamp(26px, 3.5vw, 44px); }

.gf-controls { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(11,13,15,.12); border-radius: 14px; background: #fff; }
.gf-lab { display: block; margin-bottom: 8px; font-size: .64rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #7C7669; }

.gf-presets > div { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-presets button { padding: 9px 15px; border: 1px solid rgba(11,13,15,.16); border-radius: 999px;
  background: #fff; font: inherit; font-size: .82rem; font-weight: 600; color: #2A3038; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s; }
.gf-presets button:hover { border-color: #C8A96A; }
.gf-presets button.is-on { background: #0B0D0F; border-color: #0B0D0F; color: #F5F4F0; }

.gf-fields { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.gf-field input { width: 100%; min-height: 54px; padding: 12px 15px; border: 1px solid rgba(11,13,15,.14);
  border-radius: 10px; background: #FCFBF8; font: inherit; font-size: 1.02rem; font-weight: 700; color: #0B0D0F; }
.gf-field input:focus { outline: none; border-color: #C8A96A; box-shadow: 0 0 0 3px rgba(200,169,106,.26); background: #fff; }
.gf-field input::placeholder { font-weight: 500; color: #A8A296; }

/* L × W × H as three boxes on one line, each with its letter tucked inside, and
   the unit switched rather than typed. The × between them is decoration, so it
   never takes a tab stop. */
.gf-dims, .gf-kg { display: flex; align-items: stretch; gap: 8px; }
.gf-dims > span { align-self: center; font-size: 1rem; color: #A8A296; }
.gf-dims label, .gf-kg { position: relative; }
.gf-dims label { flex: 1 1 0; min-width: 0; }
.gf-dims input, .gf-kg input { padding-right: 38px; text-align: left;
  -moz-appearance: textfield; appearance: textfield; }
.gf-dims input::-webkit-outer-spin-button, .gf-dims input::-webkit-inner-spin-button,
.gf-kg input::-webkit-outer-spin-button, .gf-kg input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.gf-dims i, .gf-kg i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #A8A296; pointer-events: none; }
.gf-kg { flex: 1 1 auto; }
.gf-kg input { width: 100%; }
.gf-dims select { min-height: 54px; padding: 0 10px; border: 1px solid rgba(11,13,15,.14);
  border-radius: 10px; background: #FCFBF8; font: inherit; font-size: .92rem; font-weight: 700;
  color: #0B0D0F; cursor: pointer; }
.gf-dims select:focus { outline: none; border-color: #C8A96A; box-shadow: 0 0 0 3px rgba(200,169,106,.26); }

.gf-out { margin-top: 22px; }
.gf-sum { margin: 0 0 16px; color: #0B0D0F; font-family: Newsreader, Georgia, serif; font-size: clamp(20px, 2.4vw, 28px); }
.gf-sum b { font-weight: 400; color: #806536; }
.gf-hint { margin: 0; font-size: .9rem; color: #6B6E72; }


.gf-stage { margin: 4px 0 0; padding: clamp(14px, 2vw, 24px) 0; overflow-x: auto; }
.gf-scene { display: block; width: 100%; min-width: 720px; height: auto; }
.gf-dn { font-family: Satoshi, Inter, Arial, sans-serif; font-size: 26px; font-weight: 700; fill: #0B0D0F; }
.gf-dd { font-family: Satoshi, Inter, Arial, sans-serif; font-size: 22px; font-weight: 600; }
.gf-door.is-no { opacity: .55; }

.gf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 6px 0 0; }
.gf-key { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: #45484C; }
.gf-key::before { content: ''; width: 13px; height: 13px; border-radius: 3px; border: 2px solid; }
.gf-key--fits::before { border-color: #3F7D58; background: rgba(63,125,88,.2); }
.gf-key--tight::before { border-color: #9A7B2F; background: rgba(154,123,47,.2); }
.gf-key--no::before { border-color: #A2402F; background: rgba(162,64,47,.2); border-style: dashed; }
.gf-scalenote { font-size: .74rem; color: #7C7669; }

.gf-note { margin: 16px 0 0; max-width: 86ch; font-size: .78rem; line-height: 1.6; color: #6B6E72; }
.gf-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 18px 0 0; }
.gf-cta a { font-size: .88rem; font-weight: 700; color: #0B0D0F; text-decoration: none;
  border-bottom: 1px solid #C8A96A; padding-bottom: 2px; }
.gf-cta a span { color: #806536; }
.gf-src { font-size: .74rem; color: #7C7669; }

@media (max-width: 1000px) { .gf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .gf-grid, .gf-fields { grid-template-columns: 1fr; }
}


/* The homepage guide section runs on the dark band (#080B10). Everything above
   was coloured for a light surface, so the door outlines were black on black —
   only the piece rectangle showed, identical in every door, which is why eight
   very different apertures looked like eight identical boxes. */
.aircraft-guide .gf-frame { fill: rgba(245,244,240,.05); stroke: rgba(245,244,240,.45); }
.aircraft-guide .gf-floor { stroke: rgba(245,244,240,.4); }
.aircraft-guide .gf-dn { fill: #F5F4F0; }
.aircraft-guide .gf-sum { color: #F5F4F0; }
.aircraft-guide .gf-sum b { color: #C8A96A; }
.aircraft-guide .gf-note,
.aircraft-guide .gf-scalenote { color: rgba(245,244,240,.62); }
.aircraft-guide .gf-key { color: rgba(245,244,240,.82); }
.aircraft-guide .gf-hint { color: rgba(245,244,240,.7); }
.aircraft-guide .gf-cta a { color: #F5F4F0; }
.aircraft-guide .gf-src { color: rgba(245,244,240,.6); }
.aircraft-guide .gf-lab { color: rgba(245,244,240,.62); }

/* The control card stays light — it is an input surface, like the search bar. */
.aircraft-guide .gf-controls { border-color: rgba(245,244,240,.14); background: rgba(245,244,240,.05); }
.aircraft-guide .gf-presets button { background: transparent; border-color: rgba(245,244,240,.24); color: rgba(245,244,240,.9); }
.aircraft-guide .gf-presets button:hover { border-color: #C8A96A; color: #fff; }
.aircraft-guide .gf-presets button.is-on { background: #C8A96A; border-color: #C8A96A; color: #14171B; }
.aircraft-guide .gf-field input { background: rgba(245,244,240,.06); border-color: rgba(245,244,240,.2); color: #F5F4F0; }
.aircraft-guide .gf-field input::placeholder { color: rgba(245,244,240,.45); }
.aircraft-guide .gf-dims select { background: rgba(245,244,240,.06); border-color: rgba(245,244,240,.2); color: #F5F4F0; }
.aircraft-guide .gf-dims select option { color: #0B0D0F; }
.aircraft-guide .gf-dims > span { color: rgba(245,244,240,.5); }
.aircraft-guide .gf-dims i, .aircraft-guide .gf-kg i { color: rgba(245,244,240,.55); }
.aircraft-guide .gf-field input:focus { background: rgba(245,244,240,.1); }

/* .aircraft-guide::before is a decorative grid at inset:0 with no z-index and
   no pointer-events rule. The old markup escaped it because .guide-stage was
   given position:relative;z-index:1 — this block was not, so the overlay sat on
   top of it and swallowed every click. A decorative layer should never be
   catching input in the first place. */
.aircraft-guide::before { pointer-events: none; }
.aircraft-guide .gf { position: relative; z-index: 1; }