/* Aeroinis — contract documents.
 *
 * These pages are read once, carefully, by someone about to commit money.
 * So: a document, not a landing page. Long measure, quiet rules, a clause
 * numbering you can quote down a phone, and a print stylesheet — because
 * the family office will print it and put it in the file. */

.agr-page { background: #FBFAF6; color: #10151C; }
.agr { --navy: #0B0F1E; --gold: #C8A96A; --hair: rgba(11, 15, 30, .13);
       --mute: rgba(22, 24, 29, .66);
       --serif: "Newsreader", Georgia, serif; --sans: "Satoshi", -apple-system, sans-serif; }
.agr-wrap { width: min(calc(100% - 40px), 760px); margin-inline: auto; }

/* ── masthead: who, what, which booking ── */
.agr-head { background: var(--navy); color: #F5F4F0; padding: clamp(72px, 9vw, 110px) 0 clamp(30px, 4vw, 44px); }
.agr-head em { display: block; font: 700 .66rem/1 var(--sans); font-style: normal; letter-spacing: .3em;
               text-transform: uppercase; color: var(--gold); }
.agr-head h1 { margin: 16px 0 0; font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.15 var(--serif); letter-spacing: -.02em; }
.agr-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; border-top: 1px solid rgba(245, 244, 240, .16); }
.agr-meta div { padding: 14px 26px 14px 0; margin-right: 26px; border-right: 1px solid rgba(245, 244, 240, .16); }
.agr-meta div:last-child { border-right: 0; }
.agr-meta dt { font: 700 .6rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 244, 240, .55); }
.agr-meta dd { margin: 3px 0 0; font: 500 1.02rem/1.2 ui-monospace, Consolas, monospace; color: #F5F4F0; letter-spacing: .04em; }
/* the counterparty and the Terms version in force: a client should never
   have to leave the document they are signing to learn who they are
   contracting with, or which Terms outrank it */
.agr-meta dd.agr-ent { font: 400 .82rem/1.45 var(--sans); letter-spacing: 0; max-width: 34ch; }

/* whose flight this is: the file's own facts, printed on the document
   so the reader is not asked to sign a form about someone in general */
.agr-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 0 26px;
  margin: 0; padding: 20px 0 4px; border-top: 1px solid rgba(245, 244, 240, .16); }
.agr-who div { padding: 9px 0; }
.agr-who dt { font: 700 .58rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 244, 240, .5); }
.agr-who dd { margin: 3px 0 0; font: 400 1rem/1.4 var(--serif, Georgia, serif); color: #F5F4F0; }
@media print { .agr-who dt, .agr-who dd { color: #000; } .agr-who { border-color: rgba(0,0,0,.2); } }

.agr-meta dd.is-ref { color: #E9C87F; font-size: 1.25rem; letter-spacing: .12em; }

/* ── body ── */
.agr-body { padding: clamp(40px, 5vw, 64px) 0 clamp(70px, 8vw, 110px); }
.agr-lead { margin: 0 0 34px; font: 400 1.02rem/1.75 var(--sans); color: var(--mute); }
.agr h2 { margin: 44px 0 10px; font: 400 1.35rem/1.3 var(--serif); letter-spacing: -.01em; }
.agr h3 { margin: 26px 0 6px; font: 600 .95rem/1.4 var(--sans); }
.agr p, .agr li { font: 400 .95rem/1.75 var(--sans); color: #2A2D33; }
.agr p { margin: 0 0 12px; }
.agr ul { margin: 0 0 14px; padding-left: 20px; }
.agr li { margin-bottom: 5px; }
.agr .cl { padding-left: 0; }
.agr .cl b { font-weight: 600; }
.agr a { color: #806536; }
.agr strong { font-weight: 600; }

/* the plain-language aside: what this clause means in practice */
.agr-note { margin: 16px 0 20px; padding: 14px 18px; border-left: 2px solid var(--gold);
            background: rgba(200, 169, 106, .08); font-size: .92rem; line-height: 1.7; color: #3A3D44; }
.agr-note b { display: block; margin-bottom: 3px; font: 700 .62rem/1.6 var(--sans);
              letter-spacing: .18em; text-transform: uppercase; color: #806536; }

/* the document hierarchy block */
.agr-order { margin: 20px 0 26px; padding: 0; list-style: none; counter-reset: ord; }
.agr-order li { position: relative; padding: 9px 0 9px 40px; border-bottom: 1px solid var(--hair); counter-increment: ord; }
.agr-order li::before { content: counter(ord); position: absolute; left: 0; top: 9px;
  font: 500 .8rem/1.75 ui-monospace, Consolas, monospace; color: var(--gold); }

/* the Flight Order's four conditions, and the state of the other documents.
   A condition that has happened is stated quietly; one still outstanding
   carries the weight, because that is the one the reader has to act on.
   Nothing is coloured green: a booking is binding or it is not, and a tick
   that says "3 of 4" invites a client to feel three-quarters booked. */
.agr-cond, [data-fo-status] {
  display: inline-block; margin-left: 10px; font-style: normal;
  font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; vertical-align: 1px;
}
[data-fo-done="yes"] > .agr-cond, [data-fo-status][data-fo-done="yes"] {
  color: #6A6C62; background: rgba(11, 15, 30, .05);
}
/* the file has not answered yet: the page says so rather than guessing,
   because "outstanding" is itself a claim about someone's booking */
[data-fo-done="unknown"] > .agr-cond, [data-fo-status][data-fo-done="unknown"] {
  color: #9B9DA4; background: rgba(11, 15, 30, .04);
}
[data-fo-done="no"] > .agr-cond, [data-fo-status][data-fo-done="no"] {
  color: #8A4433; background: rgba(138, 68, 51, .08);
}
.agr-order li[data-fo-done="no"] { border-bottom-color: rgba(138, 68, 51, .22); }
.agr-docs { margin: 18px 0 26px; padding: 0; list-style: none; }
.agr-docs li { padding: 11px 0; border-bottom: 1px solid var(--hair); }
.agr-docs li:last-child { border-bottom: 0; }
@media print {
  .agr-cond, [data-fo-status] { background: none; border: 1px solid #999; color: #000; }
}

/* acceptance block */
.agr-accept { margin-top: 46px; padding: 26px 28px; border: 1px solid var(--hair); border-radius: 14px; background: #FFFFFF; }
.agr-accept h2 { margin-top: 0; }
.agr-accept label { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0;
                    font-size: .93rem; line-height: 1.65; cursor: pointer; }
.agr-accept input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: #806536; flex: none; }
.agr-accept .agr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.agr-accept .agr-sign label { display: block; }
.agr-accept .agr-sign span { display: block; margin-bottom: 5px; font: 700 .6rem/1.6 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(22, 24, 29, .5); }
.agr-accept input[type="text"], .agr-accept input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px;
  background: #FBFAF6; font: 500 .95rem var(--sans); color: #10151C; }
.agr-accept input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.agr-btn { margin-top: 16px; width: 100%; padding: 16px 22px; border: 0; border-radius: 999px;
  background: var(--navy); color: #F5F4F0; font: 700 .74rem/1 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer; transition: background .3s; }
.agr-btn:hover { background: #172433; }
.agr-btn:disabled { background: #C9C6BC; cursor: not-allowed; }
.agr-status { margin: 12px 0 0; min-height: 20px; font-size: .88rem; color: #806536; }
.agr-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair);
            font-size: .82rem; line-height: 1.7; color: rgba(22, 24, 29, .55); }
.agr-end { margin-top: 34px; text-align: center; font: 600 .8rem/1 var(--sans);
           letter-spacing: .12em; color: #806536; }

@media (max-width: 640px) {
  .agr-meta div { border-right: 0; padding-right: 0; margin-right: 0; flex: 1 1 100%; }
  .agr-accept .agr-sign { grid-template-columns: 1fr; }
}
@media print {
  .agr-head { background: #fff; color: #000; padding: 0 0 18px; }
  .agr-head em, .agr-meta dd.is-ref { color: #000; }
  .agr-meta dt, .agr-meta dd { color: #000; }
  /* A printed contract is the copy that gets filed, attached to an email to
     the operator and kept in the aircraft file. Two things were wrong with it,
     and they were opposites of each other. */

  /* It hid the signature. .agr-accept holds the signer's name, their address,
     the two declarations they ticked and the recorded time — and it was
     display:none, so a filed PDF of a signed Flight Order was indistinguishable
     from one nobody ever signed. The form controls go; the record stays. */
  .agr-accept { display: block; border-color: #999; padding: 18px 0 0; margin-top: 30px; }
  .agr-accept p:not(.agr-status) { display: none; }
  .agr-accept label, .agr-accept .agr-sign, .agr-btn { display: none; }
  .agr-accept[data-accepted="true"] label { display: block; color: #000; }
  .agr-accept[data-accepted="true"] label input { display: none; }
  .agr-accept[data-accepted="true"] label::before { content: "¹3  "; font-weight: 700; }
  .agr-accept .agr-status { color: #000; font-weight: 600; }
  .agr-accept:not([data-accepted="true"])::after {
    content: "Not accepted at the time this copy was printed.";
    display: block; font: 400 9.5pt/1.5 var(--sans); color: #555;
  }
  .agr-signed { display: block !important; }

  .agr-note { border-left-color: #999; background: none; }
  .agr p, .agr li { font-size: 10.5pt; line-height: 1.55; }

  /* And it printed the booking key. Every link between these documents carries
     ?ref=...&k=<the secret that opens the file>, and this rule wrote the whole
     href out as visible text — into a PDF that is filed on a shared drive and
     emailed to an operator. Only external addresses are worth spelling out on
     paper; the documents of this booking are named, not addressed. */
  .agr-body a[href]:not([href^="http"]):not([href^="mailto"])::after { content: ""; }
  a[href^="http"]::after, a[href^="mailto"]::after {
    content: " (" attr(href) ")"; font-size: 8pt; color: #555;
  }
}

/* Controls do not inherit the page's typeface.
   button, input, select and textarea take their family from the UA stylesheet,
   which on Windows is Arial — so a form field silently leaves the brand's face
   at the moment it matters most. font-family alone: the `font` shorthand would
   take size, weight and line-height with it. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* touch-type:start — generated by tools/touch-type.mjs, do not edit by hand */
/* iOS zooms the page when a focused control's text is under 16px and does not
   zoom back. max(16px, 1em) raises only what is below the floor: a control
   designed larger keeps its size, and nothing has to be listed by name — which
   matters, because the worst offenders inherit their size rather than being
   given one. Checkboxes and radios are left alone; they have no text. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}
/* touch-type:end */