/* Style of the AirFrame web pages. One file, no external resources. */
:root {
    --ink: #10233f;
    --ink-soft: #46597a;
    --line: #d9e0ea;
    --paper: #ffffff;
    --wash: #f4f6fa;
    --accent: #1f6feb;
    --accent-dark: #1857b8;
    --good: #1c7c45;
    --bad: #b3261e;
    --warn: #8a5a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* header */
.top { background: var(--ink); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 58px; flex-wrap: wrap; }
.brand { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; color: #fff; text-decoration: none; }
.brand span { color: #7fb2ff; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.top nav.right { flex: 0 0 auto; }
.top nav a, .top nav button {
    color: #d5deec; text-decoration: none; padding: 8px 12px; border-radius: 6px;
    background: none; border: 0; font: inherit; cursor: pointer;
}
.top nav a:hover, .top nav button:hover, .top nav a.here { color: #fff; background: rgba(255, 255, 255, 0.12); }
.top nav form { margin: 0; }

/* hero of the home page: heading, then the wing with a label for each of its three analyses */
.hero { background: var(--paper); color: var(--ink); padding: 40px 0 30px; border-bottom: 1px solid var(--line); }
.hero-head { text-align: center; max-width: 46em; margin: 0 auto; }
.hero h1 { font-size: 38px; line-height: 1.15; margin: 0 0 12px; }
.hero p { font-size: 18px; color: var(--ink-soft); margin: 0 auto; max-width: 40em; }
.hero-actions { justify-content: center; margin-top: 8px; }

/* the stage: the picture of the wing with three marks on it. Without scripts the three texts stand under the
   picture; with them (class "live") a text is shown in the free corner of the picture only while its mark is
   pointed at. The pictures have the white background AirFrame drew them on, the same as the page. */
.stage { position: relative; max-width: 1000px; margin: 4px auto 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pictures { grid-column: 1 / -1; position: relative; aspect-ratio: 1600 / 794; background: #fff; }
.pictures img, .pictures video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.18s; }
.stage[data-shown="plain"] [data-picture="plain"],
.stage[data-shown="aero"] [data-picture="aero"],
.stage[data-shown="structure"] [data-picture="structure"],
.stage[data-shown="aeroelastic"] [data-picture="aeroelastic"] { opacity: 1; }

.callout { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; }
.callout b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.hero .callout p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.callout .rest { visibility: hidden; }

/* a mark: a dot with a ring that spreads out from it every few seconds */
.mark { display: none; position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px;
    padding: 0; border: 0; background: none; cursor: pointer; }
.mark::before, .mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.mark::before { background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(16, 35, 63, 0.35); }
.mark::after { border: 2px solid var(--accent); animation: ping 2.6s ease-out infinite; animation-delay: var(--wait, 0s); opacity: 0; }
.mark:hover::before, .mark[aria-expanded="true"]::before { background: var(--ink); }
.mark[aria-expanded="true"]::after { animation: none; }
.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; border-radius: 50%; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.9; } 60%, 100% { transform: scale(3.6); opacity: 0; } }

.stage.live { display: block; }
.stage.live .mark { display: block; }
/* while an analysis is shown the marks step back (they still answer the pointer), so that nothing covers the picture */
.stage.live .mark { transition: opacity 0.15s; }
.stage.live:not([data-shown="plain"]) .mark { opacity: 0; }
.stage.live .mark:focus-visible { opacity: 1; }
.stage.live .callout { position: absolute; left: 3%; bottom: 5%; width: 30%;
    opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; }
.stage.live[data-shown="aero"] .callout-aero,
.stage.live[data-shown="structure"] .callout-structure,
.stage.live[data-shown="aeroelastic"] .callout-aeroelastic { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .pictures img, .pictures video, .stage.live .callout { transition: none; }
    .mark::after { animation: none; opacity: 0.6; transform: scale(2); }
}

/* the large note at the end of the home page: how far the program is */
.status { border: 2px solid #d49a00; border-radius: 12px; background: #fff8e6; padding: 22px 26px; margin: 38px 0 14px; }
.status h2 { margin: 0 0 10px; font-size: 24px; }
.status p { font-size: 17px; margin: 0 0 10px; max-width: 52em; }
.status p:last-child { margin-bottom: 0; }
a.badge { text-decoration: none; }
a.badge:hover { background: rgba(31, 111, 235, 0.18); }

/* rows of the home page: a picture beside a few sentences, on alternating sides */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; margin: 38px 0; }
.feature.flip > .shot { order: 2; }
a.shot.filled:hover { border-color: var(--accent); }
.feature h2 { margin-top: 0; }
.feature ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.feature li { margin: 3px 0; }
.shot { aspect-ratio: 16 / 10; border: 1px dashed #b9c4d4; border-radius: 10px; background: var(--wash); color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-size: 14px; }
/* a script shown in place of a picture */
.code { margin: 0; padding: 16px 18px; border-radius: 10px; background: var(--ink); color: #e3ebf7; overflow-x: auto;
    font-family: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; line-height: 1.55; min-width: 0; }
.feature > * { min-width: 0; }
/* a box that holds its screenshot takes the shape of the picture */
.shot.filled { aspect-ratio: auto; display: block; padding: 0; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.shot.filled img { display: block; width: 100%; height: auto; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-bottom: 14px; }
.badges .badge { margin-bottom: 0; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; background: rgba(31, 111, 235, 0.10); color: var(--accent-dark); margin-bottom: 14px; }

/* buttons */
.button, button.button {
    display: inline-block; padding: 10px 18px; border-radius: 7px; border: 1px solid var(--accent);
    background: var(--accent); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.button.quiet { background: transparent; color: var(--accent); }
.button.quiet:hover { background: var(--wash); color: var(--accent-dark); }
.button.danger { background: var(--bad); border-color: var(--bad); }
.button.small { padding: 4px 10px; font-size: 14px; font-weight: 500; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* content */
main { padding: 34px 0 56px; }
h1 { font-size: 30px; margin: 0 0 18px; }
h2 { font-size: 21px; margin: 34px 0 12px; }
h3 { font-size: 17px; margin: 0 0 6px; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 44em; }
.muted { color: var(--ink-soft); }
.narrow { max-width: 460px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: var(--paper); }
.card ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.card li { margin: 3px 0; }
.band { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; margin: 34px 0; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 8px; }
.fact { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--paper); }
.fact b { display: block; font-size: 26px; line-height: 1.2; }
.fact span { color: var(--ink-soft); font-size: 14px; }

/* tables */
table { border-collapse: collapse; width: 100%; margin: 8px 0 4px; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-soft); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; }
td form { margin: 0; }
.scroll { overflow-x: auto; }

/* forms */
form.stack p { margin: 0 0 14px; }
form.stack label { display: block; font-weight: 600; margin-bottom: 4px; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=password], form.stack select, form.stack textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #b9c4d4; border-radius: 7px; font: inherit; background: #fff; color: var(--ink);
}
form.stack input:focus, form.stack select:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--accent); }
/* a password field with its eye button inside, at the right end (pages/_form.html, pages/forms.js) */
form.stack .password { position: relative; display: block; }
form.stack .password input { padding-right: 42px; }
form.stack .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px;
    border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
form.stack .reveal:hover { color: var(--ink); }
form.stack .reveal[aria-pressed="false"] .slash { display: none; }
form.stack p.check label { display: inline; font-weight: 400; margin-left: 6px; }
form.stack textarea { display: block; resize: vertical; }
form.stack input[type=file] { display: block; max-width: 100%; }
form.stack .help { display: block; color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
form.stack ul.errorlist, ul.errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--bad); font-size: 14px; }

/* the owner's board of tickets (tickets/board.html) */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
.board-column h2 { margin-top: 8px; }
.ticket-card { position: relative; padding: 10px 96px 10px 14px; margin-bottom: 10px; border: 1px solid var(--line);
    border-radius: 8px; background: #fff; }
.ticket-card:hover { border-color: var(--accent); }
.ticket-card a { color: var(--ink); text-decoration: none; }
.ticket-card .muted { display: block; font-size: 14px; margin-top: 4px; }
.ticket-card .move { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.ticket-card .move form { margin: 0; }
.ticket-card .move button { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 5px;
    width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; }
.ticket-card .move button:hover { color: var(--accent); border-color: var(--accent); }

/* the gallery of example models (gallery/gallery.html, pages/gallery.js) */
.gallery-item { display: flex; gap: 28px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--line); }
.gallery-picture { position: relative; flex: 0 0 280px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; cursor: zoom-in; overflow: hidden; }
.gallery-picture img { display: block; width: 100%; height: auto; }
.gallery-picture:hover { border-color: var(--accent); }
.gallery-count { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; font-size: 12px;
    background: rgba(15, 23, 42, 0.7); color: #fff; }
.gallery-text { flex: 1; min-width: 0; }
.gallery-text h2 { margin-top: 0; }
.gallery-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gallery-badges .badge { margin-bottom: 0; }
@media (max-width: 700px) {
    .gallery-item { flex-direction: column; }
    .gallery-picture { flex-basis: auto; width: 100%; }
}
.gallery-dialog { max-width: min(1100px, 94vw); max-height: 94vh; padding: 14px; border: 0; border-radius: 12px; }
.gallery-dialog::backdrop { background: rgba(15, 23, 42, 0.75); }
.gallery-dialog img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
.gallery-caption { margin: 10px 0 6px; text-align: center; color: var(--ink-soft); }
.gallery-controls { display: flex; justify-content: center; gap: 10px; }

/* notes and messages */
.note { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 12px 16px; background: var(--wash); margin: 16px 0; }
.note.good { border-left-color: var(--good); }
.note.warn { border-left-color: #d49a00; background: #fff8e6; }
.note.bad { border-left-color: var(--bad); background: #fdf0ef; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; background: var(--wash); border: 1px solid var(--line); }
.pill.good { color: var(--good); border-color: #b9dcc7; background: #eef8f1; }
.pill.warn { color: var(--warn); border-color: #ecd9a6; background: #fff8e6; }

/* footer */
footer { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; padding: 18px 0 30px; }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
footer .trademarks { flex-basis: 100%; font-size: 12px; }

@media (max-width: 800px) {
    .hero h1 { font-size: 30px; }
    .stage { grid-template-columns: minmax(0, 1fr); }
    /* too narrow for a text inside the picture: it goes under it */
    .stage.live { padding-bottom: 178px; }
    .stage.live .callout { left: 0; right: 0; bottom: 0; width: auto; height: 166px; }
    .feature { grid-template-columns: 1fr; gap: 14px; margin: 28px 0; }
    .feature.flip > .shot { order: 0; }
    .cards { grid-template-columns: 1fr; }
    .facts { grid-template-columns: repeat(2, 1fr); }
}