/* THE BINGO PAGE. Every colour is a role of the layout's palette, so « Sombre »
 * needs nothing of its own here. */

.bingo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1rem}
.bingo-head p{margin:0;max-width:52rem}
.actions{display:flex;gap:.5rem}

/* The aircraft: its choices in a row that wraps. */
.aircraft{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.25rem}
.aircraft label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;color:var(--heading);font-size:.92rem}
.aircraft select,.aircraft input{min-width:9rem}
.with-unit{display:flex;align-items:center;gap:.4rem;font-weight:400;color:var(--muted)}
.with-unit input{width:8rem;min-width:0}
.sources{flex-basis:100%;color:var(--muted)}
.sources summary{cursor:pointer;font-size:.87rem}
.sources ul{margin:.35rem 0 0;padding-left:1.2rem}
.sources p{margin:.35rem 0 0}

select,input[type=number]{font:inherit;color:var(--text);background:var(--surface);
  border:1px solid var(--field-line);border-radius:6px;padding:.4rem .5rem}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* The answers, above the sheet: what a pilot writes on the kneeboard. */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin-bottom:1.25rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.1rem}
.tile span{font-family:Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--muted)}
.tile strong{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:500;font-size:1.9rem;line-height:1.15;color:var(--heading);font-variant-numeric:tabular-nums}
.tile small{color:var(--muted);font-size:.8rem}
.tile--key{border-top:4px solid var(--red)}
.tile.is-negative{background:var(--danger-bg);border-color:var(--danger-line)}
.tile.is-negative strong{color:var(--danger)}

/* The sheet. Wide by nature: on a phone it scrolls inside its card, never the
 * page. */
.sheet-card{padding:1rem}
.scroll{overflow-x:auto;margin:0 -.25rem}
.sheet{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{padding:.25rem .3rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.sheet thead th{font-size:.78rem;font-weight:600;color:var(--muted);vertical-align:bottom}
.sheet tbody th,.sheet tfoot th,.sheet thead th:first-child{text-align:left;color:var(--heading)}
.sheet tbody th small{display:block;font-weight:400;font-size:.75rem;color:var(--muted);white-space:normal;max-width:15rem}
.sheet input{width:5.2rem;text-align:right;padding:.3rem .4rem}
.sheet select{padding:.3rem .3rem}
.sheet .out{color:var(--muted)}
.sheet .fuel{color:var(--heading);font-weight:600}
.sheet tr.is-empty th,.sheet tr.is-empty input,.sheet tr.is-empty select{opacity:.55}
.sheet tfoot tr.subtotal th,.sheet tfoot tr.subtotal td{border-top:2px solid var(--line);font-weight:600}

@media(max-width:700px){
  .tile strong{font-size:1.5rem}
  .aircraft label{flex:1 1 9rem}
  .aircraft select{min-width:0;width:100%}
}

/* THE KNEEBOARD. One A4 page: no bar, no buttons, the inputs printed as plain
 * values, and the legs that are not flown left out. */
@page{size:A4 portrait;margin:10mm}
@media print{
  :root{--bg:#fff;--surface:#fff;--text:#000;--heading:#000;--muted:#444;--line:#999;--field-line:transparent}
  html,body{background:#fff!important;color:#000}
  body{padding-top:0!important;font-size:9pt}
  .irre-topbar,.brandbar,.no-print,footer{display:none!important}
  .wrap{padding:0!important;max-width:none}
  h1{font-size:14pt;margin:0}
  h2{font-size:10.5pt;margin:0 0 2mm}
  .bingo-head{margin-bottom:3mm}
  .card{border:0;padding:0;margin-bottom:4mm;break-inside:avoid}
  .aircraft{gap:2mm 6mm}
  .aircraft label{font-size:9pt}
  .results{grid-template-columns:repeat(5,1fr);gap:2mm;margin-bottom:4mm}
  .tile{padding:2mm;border:1px solid #000}
  .tile strong{font-size:14pt}
  .sheet{font-size:8pt}
  .sheet th,.sheet td{padding:.6mm 1mm}
  .sheet tr.is-empty{display:none}
  select,input[type=number]{border:0;padding:0;background:none;appearance:none;-webkit-appearance:none;width:auto;min-width:0;color:#000}
  .sheet input{width:11mm}
  .sheet select{max-width:17mm}
  .sheet{table-layout:auto;width:100%}
  .scroll{overflow:visible;margin:0}
}