/* Plan Offshore CSS. Generated by build-upload.mjs.
   Source files stay separate for editing; upload only the files in upload/. */

/* ==========================================================================
   01. styles.css
   ========================================================================== */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/roboto-mono-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --background: #031122;
  --tile: var(--background);
  --panel: var(--background);
  --black: #000000;
  --shadow: #081839;
  --tile-border: #081839;
  --input-border: #969696;
  --input-background: #555555;
  --input-text: #ffffff;
  --input-active-background: #969696;
  --input-active-text: #000000;
  --text: #C3C3C3;
  --secondary: #969696;
  --label: #969696;
  --focus: #00FFFF;
  --warning-yellow: #DFDF00;
  --warning-amber: #EA9100;
  --warning-red: #BF0002;
  font-family: 'Roboto Mono', Consolas, 'Courier New', monospace;
  letter-spacing: normal;
  line-height: 2;
}

* { box-sizing: border-box; }

:root body button {
  border: 3px solid;
  border-color: var(--black) var(--shadow) var(--shadow) var(--black);
  box-shadow: inset 3px 3px var(--shadow), inset -3px -3px var(--black);
  -webkit-tap-highlight-color: transparent;
}
:root body button:active,
:root body button[aria-pressed="true"],
:root body button[aria-selected="true"] {
  border-color: var(--black) var(--shadow) var(--shadow) var(--black);
  box-shadow: inset 3px 3px var(--black), inset -3px -3px var(--shadow);
}

/* Shared input appearance, including selects and custom checkbox controls. */
:root body input[type],
:root body select,
:root body textarea {
  background: var(--input-background);
  color: var(--input-text);
}
:root body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
:root body select { text-align-last: center; }
:root body input[type]:focus,
:root body select:focus,
:root body textarea:focus {
  background: var(--input-active-background);
  color: var(--input-active-text);
  outline: none;
}
:root body input::placeholder,
:root body textarea::placeholder { color: var(--input-text); opacity: 1; }
:root body input:focus::placeholder,
:root body textarea:focus::placeholder { color: var(--input-active-text); }

html { height: 100%; background: var(--background); }

body {
  margin: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

.dashboard {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: var(--available-height, 100%);
  display: flex;
  flex-direction: column;
  width: var(--available-width, 100%);
  max-width: 760px;
  margin-inline: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.heading { flex: 0 0 auto; text-align: center; margin-bottom: clamp(10px, calc(var(--available-height, 100vh) * 0.025), 24px); }

h1 {
  margin: 0;
  font-size: clamp(22px, min(calc(var(--available-width, 100vw) * 0.065), calc(var(--available-height, 100vh) * 0.05)), 38px);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: normal;
}

.heading p {
  margin: 4px 0 0;
  color: var(--secondary);
  font-size: clamp(11px, calc(var(--available-height, 100vh) * 0.02), 16px);
  line-height: 1.5;
  letter-spacing: normal;
}

.tool-grid {
  display: grid;
  flex: 1 1 0;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
  gap: clamp(5px, calc(var(--available-height, 100vh) * 0.013), 14px);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, calc(var(--available-height, 100vh) * 0.01), 12px);
  min-width: 0;
  min-height: 0;
  padding: 5px 3px;
  border: 3px solid;
  border-color: var(--black) var(--shadow) var(--shadow) var(--black);
  box-shadow: inset 3px 3px var(--shadow), inset -3px -3px var(--black);
  border-radius: 0;
  background: var(--tile);
  color: var(--text);
  font: inherit;
  text-align: center;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tile svg {
  color: var(--focus);
  width: clamp(16px, calc(var(--available-height, 100vh) * 0.038), 38px);
  height: clamp(16px, calc(var(--available-height, 100vh) * 0.038), 38px);
  width: clamp(16px, calc(var(--available-height, 100vh) * 0.038), 38px);
  height: clamp(16px, calc(var(--available-height, 100vh) * 0.038), 38px);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#open-refuel svg, #open-risk svg, #open-brief svg, #open-radio svg, #open-preflight svg, #open-postflight svg, #open-planning svg, #open-scanflow svg { color: var(--text); }

.tile span {
  display: block;
  color: var(--label);
  min-height: 4em;
  font-size: clamp(11px, calc(var(--available-width, 100vw) * 0.03), 14px);
  font-size: clamp(10px, min(calc(var(--available-width, 100vw) * 0.03), calc(var(--available-height, 100vh) * 0.018)), 15px);
  font-size: clamp(10px, min(calc(var(--available-width, 100vw) * 0.03), calc(var(--available-height, 100vh) * 0.018)), 15px);
  font-weight: 550;
  line-height: 2;
}

.tile:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }


:root.roomy .dashboard { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }

:root.wide .dashboard { max-width: 1120px; }
:root.wide .tool-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }

:root.compact .dashboard { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
:root.compact .heading { margin-bottom: 6px; }
:root.compact h1 { font-size: 22px; }
:root.compact .heading p { margin-top: 2px; font-size: 11px; }
:root.compact .tool-grid { gap: 4px; }
:root.compact .tile { padding-block: 2px; gap: 2px; }
:root.compact .tile svg { width: 16px; height: 16px; }
:root.compact .tile span { font-size: 10px; line-height: 1.15; min-height: 2.3em; }

#open-links svg { color: var(--text); }

#open-sar svg { color: var(--text); }

#open-weather svg { color: var(--text); }
#open-pnr svg { color: var(--text); }
.tile:disabled,
.tile:disabled svg,
.tile:disabled span { color: var(--background); }

/* ==========================================================================
   02. refuel.css
   ========================================================================== */
[hidden] { display: none !important; }
.refuel-screen { position: fixed; inset: 0; overflow: auto; background: var(--background); overscroll-behavior: contain; font-size: 14px; font-weight: 400; line-height: 1.4; }
.refuel-content { max-width: 840px; margin: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.refuel-header { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(0, auto) minmax(60px, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; }
.refuel-header > .back-button:first-child { justify-self: start; }
.refuel-header > .page-reset { justify-self: end; }
.refuel-header > .back-button { padding-inline: 8px; }
.back-button { min-height: 44px; padding: 9px 14px; border: 3px solid; border-color: var(--black) var(--shadow) var(--shadow) var(--black); box-shadow: inset 3px 3px var(--shadow), inset -3px -3px var(--black); border-radius: 0; background: var(--tile); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.refuel-heading { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; text-align: center; }
.refuel-heading svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.refuel-heading h2 { font-size: 20px; line-height: 1.2; margin: 0; font-weight: 600; }
.fuel-panel { padding: 10px; margin-bottom: 10px; background: var(--panel); border: 3px solid; border-color: var(--black) var(--shadow) var(--shadow) var(--black); border-radius: 0; }
.fuel-panel-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.fuel-panel h3 { margin: 0; font-size: 14px; font-weight: 600; }
.gravity-select { width: 100%; min-width: 0; text-align: right; min-height: 44px; border: 3px solid var(--input-border); border-radius: 0; padding: 4px 6px; background: var(--background); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; }
.fuel-quantity-table { width: 100%; table-layout: fixed; border-collapse: collapse;  }
.fuel-label-column { width: 38%; }
.fuel-entry { display: flex; align-items: center; gap: 5px; }
.fuel-entry input, .fuel-entry output { flex: 1; min-width: 0; }
.fuel-quantity-table .fuel-entry output { padding-right: 9px; }
.fuel-unit { flex: 0 0 20px; text-align: right; padding-right: 3px; color: var(--label); font-size: 14px; font-weight: 400; }
.fuel-quantity-table th { color: var(--label); font-weight: 400; font-size: 14px; text-align: left; }
.fuel-quantity-table thead th { padding: 0 3px 6px; color: var(--secondary); font-size: 14px; border-bottom: 3px solid var(--tile-border); }
.fuel-quantity-table thead th:not(:first-child) { text-align: right; padding-right: 11px; }
.fuel-quantity-table tbody th, .fuel-quantity-table td { padding: 4px 3px; }
.fuel-quantity-table td { text-align: right; }
.fuel-quantity-table input { width: 100%; min-width: 0; min-height: 44px; padding: 4px 6px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; text-align: right; }
.fuel-quantity-table input:focus { outline: 3px solid var(--text); outline-offset: 2px; }
.fuel-quantity-table output { display: block; font-size: 16px; font-weight: 400; text-align: right; padding-right: 8px; overflow-wrap: anywhere; }
.fuel-subtotal th, .fuel-subtotal td { padding-block: 4px; }
.fuel-subtotal .fuel-entry { min-height: 44px; }
.fuel-subtotal th { font-weight: 600; }
.fuel-delivery-panel { margin-top: 0; }
.fuel-message { color: var(--secondary); font-size: 14px; line-height: 1.4; margin: 6px 2px 10px; }
.fuel-differences { display: grid; grid-template-columns: 38% repeat(2, minmax(0, 1fr)); align-items: center; }
.difference-label { color: var(--label); font-size: 14px; font-weight: 400; padding-left: 3px; }
.fuel-check > span { display: block; color: var(--secondary); font-size: 14px; }
.fuel-check small { color: var(--secondary); font-size: 11px; }
.fuel-check { border: 3px solid; border-color: var(--black) var(--shadow) var(--shadow) var(--black); border-radius: 0; padding: 8px; }
.fuel-check strong { display: block; margin: 4px 0; font-size: 16px; font-weight: 700; text-align: right; padding-right: 3px; }
.fuel-check.exceeded { background: var(--warning-amber); color: #000000; }
.fuel-check.exceeded > span, .fuel-check.exceeded small { color: #000000; }
.fuel-check.both-exceeded { background: var(--warning-red); color: #ffffff; }
.fuel-check.both-exceeded > span, .fuel-check.both-exceeded small { color: #ffffff; }
.fuel-check.exceeded small { font-weight: 600; }
.record-heading { text-align: center; margin-top: 0 !important; margin-bottom: 6px !important; }
.record-checks { white-space: nowrap; }
.record-checks span { display: inline-block; margin-left: 3px; font-size: 18px; font-weight: 700; }
.check-tick { color: var(--text); }
.check-cross { color: var(--warning-red); }
.fuel-record { width: 100%; border-collapse: collapse; table-layout: fixed;  }
.fuel-record th { color: var(--secondary); font-size: 12px; font-weight: 400; padding: 6px 3px; text-align: right; border-bottom: 3px solid var(--tile-border); }
.fuel-record th small { display: block; font-size: 11px; margin-top: 2px; }
.fuel-record td { padding: 6px 3px; text-align: right; font-size: 16px; font-weight: 400; overflow-wrap: anywhere; }
.refuel-screen button:focus-visible, .refuel-screen select:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (max-width: 560px) {
  .refuel-content { padding-inline: 12px; }
  .fuel-panel-title { gap: 8px; }
  .fuel-record td { font-size: 14px; }
  .fuel-record th { font-size: 11px; }
}

/* ==========================================================================
   03. risk.css
   ========================================================================== */
.risk-panel h3 { color: var(--label); margin: 0 0 6px; }
.risk-flight-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.risk-flight-details label { min-width: 0; color: var(--label); font-size: 14px; }
.risk-flight-details input { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 4px; padding: 4px 6px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; }
.risk-flight-details input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.risk-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.risk-checkbox-column { width: 88px; }
.risk-rating-column { width: 60px; }
.risk-table th { color: var(--label); font-weight: 400; text-align: left; }
.risk-table thead th { padding: 3px; font-size: 12px; }
.risk-table thead th:nth-child(2), .risk-table td:nth-child(2) { text-align: center; }
.risk-table thead th:last-child, .risk-rating { text-align: right; }
.risk-table tbody th, .risk-table td { padding: 4px 3px; vertical-align: middle; }
.risk-table label { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.risk-table input[type="checkbox"] { appearance: none; width: 26px; height: 26px; margin: 9px; vertical-align: middle; border: 3px solid var(--input-border); background: var(--background); color: var(--text); cursor: pointer; }
.risk-table input[type="checkbox"]:checked::after { content: '✓'; display: block; font-size: 20px; font-weight: 700; line-height: 20px; text-align: center; }
.risk-table input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.risk-rating { font-size: 16px; }
.risk-table select { width: 82px; min-height: 44px; padding: 4px 3px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; }
.risk-table select:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.risk-pending { margin: 0; color: var(--label); font-size: 12px; }
.risk-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risk-result label { color: var(--label); font-size: 14px; }
.risk-result output { font-size: 20px; font-weight: 700; padding-right: 3px; }
.risk-total-group { display: flex; flex-direction: column; align-items: flex-end; }
.risk-total-group label { padding-right: 3px; }
.risk-result > strong { font-size: 16px; font-weight: 700; }
.risk-incomplete { color: var(--label); font-size: 12px; margin: 6px 3px 0; }

.risk-custom-description > div { display: flex; align-items: center; gap: 3px; }
.risk-custom-description textarea, .risk-custom-score { min-width: 0; min-height: 44px; width: 100%; padding: 6px 3px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; }
.risk-custom-description textarea { flex: 1; resize: vertical; }
.risk-custom-score { text-align: right; }
.risk-custom-description textarea:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.risk-remove { flex: 0 0 28px; min-height: 44px; border: none; padding: 0; color: var(--label); background: var(--background); font: inherit; font-size: 20px; cursor: pointer; }
.risk-remove:focus-visible { outline: 3px solid var(--text); }
.risk-add { margin-top: 8px; }
.risk-category { margin: 6px 3px 0; font-size: 14px; line-height: 1.4; }
.risk-category strong { font-weight: 700; }
.risk-category p { margin: 4px 0 0; white-space: pre-line; }
#risk-result-panel[data-level="caution"] { background: var(--warning-yellow); color: var(--black); }
#risk-result-panel[data-level="high-caution"] { background: var(--warning-amber); color: var(--black); }
#risk-result-panel[data-level="critical"] { background: var(--warning-red); color: #ffffff; }
#risk-result-panel[data-level="caution"] .risk-result label,
#risk-result-panel[data-level="high-caution"] .risk-result label { color: var(--black); }
#risk-result-panel[data-level="critical"] .risk-result label { color: #ffffff; }

/* ==========================================================================
   04. brief.css
   ========================================================================== */
.brief-sections { display: grid; grid-template-columns: 1fr; gap: 10px; }
.preflight-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brief-panel { margin-bottom: 0; }
.brief-panel > h3 { margin: 0 3px 6px; color: var(--text); font-size: 16px; font-weight: 600; text-align: center; }
.brief-group { margin-left: 0; }
.brief-group + .brief-group { margin-top: 8px; }
.brief-group h4 { margin: 0 3px; color: var(--label); font-size: 14px; font-weight: 600; }
.brief-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 3px; color: var(--label); font-size: 14px; line-height: 1.4; cursor: pointer; }
.brief-subtitle input { appearance: none; flex: 0 0 26px; width: 26px; height: 26px; margin: 6px; border: 3px solid var(--input-border); background: var(--background); color: var(--text); cursor: pointer; }
.brief-subtitle input:checked::after { content: '✓'; display: block; font-size: 20px; font-weight: 700; line-height: 20px; text-align: center; }
.brief-subtitle input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.brief-subtitle:has(input:checked) > span { color: var(--text); }
@media (min-width: 700px) { .brief-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.brief-reference-items { margin: 2px 0 0; padding-left: 3px; padding-right: 44px; list-style: disc inside; }
.brief-reference-items li { margin: 2px 0; color: var(--label); font-size: 14px; line-height: 1.4; }
#brief-screen .brief-group:has(input[data-brief-item]:checked) .brief-subtitle > span,
#brief-screen .brief-group:has(input[data-brief-item]:checked) .brief-reference-items li { color: #555555; }
#preflight-screen .brief-panel:has(> h3 input[data-preflight-item]:checked) .checklist-section-header > span,
#preflight-screen .brief-panel:has(> h3 input[data-preflight-item]:checked) .brief-reference-items li,
#preflight-screen .brief-group:has(input[data-preflight-item]:checked) .brief-subtitle > span,
#preflight-screen .brief-group:has(input[data-preflight-item]:checked) .brief-reference-items li { color: #555555; }

.checklist-section-header > span { flex: 1; text-align: center; color: var(--text); font-size: 16px; }
.checklist-subitems { margin: 2px 0 2px 16px; padding-left: 16px; list-style: circle outside; }
#postflight-screen .brief-panel:has(input[data-postflight-item]:checked) .checklist-section-header > span,
#postflight-screen .brief-panel:has(input[data-postflight-item]:checked) .brief-reference-items li { color: #555555; }

/* ==========================================================================
   05. radio.css
   ========================================================================== */
.radio-direction { margin: 14px 3px 10px; color: var(--text); font-size: 16px; font-weight: 600; text-align: center; }
.radio-directions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.radio-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.radio-card { margin-bottom: 0; }
.radio-card h4 { margin: 0; }
.radio-card .brief-subtitle { padding: 0 3px; }
.radio-card .brief-subtitle > span { flex: 1; text-align: center; }
.radio-lines { padding: 0 3px 3px; }
.radio-lines p { margin: 2px 0; color: var(--text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.radio-prompt-highlight { background: #000000; color: #969696; padding: 0 2px; }
.radio-lines hr { border: 0; border-top: 3px solid var(--shadow); margin: 8px 0; }
.radio-card:has(input[data-radio-call]:checked) .brief-subtitle > span,
.radio-card:has(input[data-radio-call]:checked) .radio-lines p { color: #555555; }
@media (min-width: 700px) { .radio-directions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ==========================================================================
   06. planning.css
   ========================================================================== */
.planning-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.planning-ballast { grid-column: 1 / -1; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; }
.planning-ballast-label, .planning-ballast label { color: var(--label); font-size: 14px; }
.planning-ballast label { justify-content: center; cursor: pointer; }
.planning-acft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.planning-payload-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.planning-payload-grid .planning-entry { gap: 3px; }
.planning-payload-grid .planning-entry input, .planning-payload-grid .planning-entry select { padding-inline: 3px; font-size: 14px; }
.planning-payload-grid .planning-entry span { font-size: 12px; }
.planning-payload-total { display: flex; align-items: center; justify-content: space-between; padding: 8px 3px 0; font-size: 14px; }
.planning-payload-total label { color: var(--label); }
.planning-payload-total output { font-weight: 700; }
.planning-stacked-field { min-width: 0; }
.planning-stacked-field > label { display: block; color: var(--label); font-size: 14px; padding-left: 3px; margin-bottom: 4px; }
.planning-stacked-field .planning-entry { gap: 3px; }
.planning-stacked-field .planning-entry input { padding-inline: 3px; }
.planning-stacked-field .planning-entry span { font-size: 12px; }
.planning-approach-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 38px; align-items: center; gap: 6px; }
.planning-approach-row > label { color: var(--label); font-size: 14px; padding-left: 3px; }
.planning-approach-row .planning-entry select { font-size: 14px; padding-inline: 3px; }
.planning-approach-holding { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.planning-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.planning-fuel-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.planning-cofg-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.planning-cofg-table th { color: var(--label); font-weight: 400; }
.planning-cofg-table th, .planning-cofg-table td { padding: 6px 3px; text-align: right; }
.planning-cofg-table th:first-child { text-align: left; width: 34%; }
.planning-cofg-table thead { border-bottom: 3px solid var(--shadow); }
.planning-cofg-table tbody tr:last-child { border-top: 3px solid var(--shadow); }
.planning-fuel-type { width: 28%; }
.planning-fuel-table th { color: var(--label); font-weight: 400; text-align: left; }
.planning-fuel-table th, .planning-fuel-table td { padding: 4px 3px; vertical-align: middle; overflow-wrap: anywhere; }
.planning-fuel-table thead th:not(:first-child), .planning-fuel-table td { text-align: right; }
.planning-fuel-table tbody td:nth-child(3), .planning-fuel-table tbody td:nth-child(5) { font-weight: 700; }
.planning-fuel-table thead { border-bottom: 3px solid var(--shadow); }
.planning-fuel-table tbody tr:last-child { border-top: 3px solid var(--shadow); }
.planning-fuel-spacer td { height: 12px; padding: 0; }
.planning-fuel-table .planning-entry { gap: 3px; }
.planning-fuel-table .planning-entry input { padding-inline: 3px; font-size: 14px; }
.planning-fuel-table .planning-entry span { font-size: 12px; }
@media (max-width: 400px) { .planning-fuel-table { font-size: 12px; } }
.planning-tab { min-width: 0; padding: 6px 3px; font-size: 13px; }
.planning-tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 700;
  border-color: var(--black) var(--shadow) var(--shadow) var(--black);
  box-shadow: inset 3px 3px var(--black), inset -3px -3px var(--shadow);
}
.planning-row { display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: center; gap: 6px; }
.planning-row > label { color: var(--label); font-size: 14px; padding-left: 3px; }
.planning-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.planning-entry { display: flex; align-items: center; gap: 5px; min-width: 0; }
.planning-entry input { width: 100%; min-width: 0; min-height: 44px; padding: 4px 6px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; text-align: right; }
.planning-entry span { color: var(--label); font-size: 14px; white-space: nowrap; }
.planning-entry input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.planning-entry select { width: 100%; min-width: 0; min-height: 44px; padding: 4px 6px; border: 3px solid var(--input-border); border-radius: 0; background: var(--background); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; }
.planning-entry select:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.planning-fuel { display: flex; align-items: center; min-height: 44px; }
.planning-fuel input { appearance: none; width: 26px; height: 26px; margin: 6px; border: 3px solid var(--input-border); background: var(--background); color: var(--text); cursor: pointer; }
.planning-fuel input:checked::after { content: '✓'; display: block; font-size: 20px; font-weight: 700; line-height: 20px; text-align: center; }
.planning-fuel input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.planning-graph-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.planning-graph-heading span { color: var(--label); font-size: 12px; }
.planning-graph { width: 100%; }
.planning-graph svg { display: block; width: 100%; height: 300px; overflow: visible; }
.planning-graph .cofg-chart { height: 340px; }
.cofg-envelope { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linejoin: round; }
.cofg-fuel-curve { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linejoin: round; }
.cofg-flight-point { fill: var(--focus); stroke: var(--background); stroke-width: 1; }
.wind-chart .cofg-flight-label { fill: var(--focus); font-weight: 700; paint-order: stroke; stroke: var(--background); stroke-width: 3px; stroke-linejoin: round; }
.wind-chart .cofg-marker-orange { fill: var(--warning-amber); }
.wind-chart .cofg-marker-red { fill: var(--warning-red); }
.cofg-fuel-limits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin-bottom: 8px; text-align: center; font-size: 14px; }
.cofg-fuel-limits span { color: var(--label); }
.cofg-fuel-limits strong { font-size: 16px; font-weight: 700; }
.wind-chart text { fill: var(--text); font-family: inherit; font-size: 12px; }
.wind-chart .chart-grid { stroke: var(--shadow); stroke-width: 1; }
.wind-chart .chart-axis { stroke: var(--input-border); stroke-width: 1; }
.wind-chart .wind-curve { fill: none; stroke-width: 1.5; opacity: .5; }
.wind-chart .wind-10 { stroke: var(--input-border); }
.wind-chart .wind-zero { stroke: var(--input-border); stroke-dasharray: 3 4; opacity: .3; }
.wind-chart .wind-20 { stroke: var(--text); stroke-dasharray: 5 3; }
.wind-chart .wind-30 { stroke: var(--text); stroke-dasharray: 1 4; }
.wind-chart .wind-guide { fill: none; stroke: var(--focus); stroke-width: 3; }
.wind-chart .wind-point { fill: var(--focus); }
.wind-chart .wind-value { fill: var(--focus); font-weight: 700; }
.planning-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; color: var(--label); font-size: 12px; }
.planning-legend span { display: inline-flex; align-items: center; gap: 5px; }
.planning-legend svg { width: 24px; height: 8px; }
.planning-readout { text-align: center; font-size: 14px; margin: 8px 0 0; }
.planning-readout strong { color: var(--focus); font-weight: 700; }
.planning-note, .planning-error { color: var(--label); font-size: 12px; line-height: 1.4; margin: 6px 3px 0; }

/* ==========================================================================
   07. links.css
   ========================================================================== */
.useful-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.useful-link { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 72px; padding: 8px 3px; border: 3px solid; border-color: var(--black) var(--shadow) var(--shadow) var(--black); box-shadow: inset 3px 3px var(--shadow), inset -3px -3px var(--black); background: var(--background); color: var(--text); font-size: 14px; line-height: 1.4; text-align: center; text-decoration: none; overflow-wrap: anywhere; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.useful-link:active { box-shadow: inset 3px 3px var(--black), inset -3px -3px var(--shadow); }
.useful-link { flex-direction: column; gap: 3px; }
.useful-link-description { display: block; color: var(--label); font-size: 12px; }
.useful-link:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* ==========================================================================
   08. weather.css
   ========================================================================== */
.weather-app { color: var(--text); font-family: inherit; line-height: 1.4; }
.weather-header-actions { display: flex; align-items: center; justify-self: end; gap: 8px; }
.weather-header .refresh-status { color: var(--label); font-size: 12px; white-space: pre-line; text-align: right; line-height: 1.3; }
.weather-header .refresh-status[data-state="error"] { color: var(--warning-amber); }
.weather-header-actions .back-button { padding-inline: 8px; }
@media (max-width: 560px) {
  .weather-header { grid-template-columns: 1fr 1fr; }
  .weather-header .refuel-heading { grid-column: 1 / -1; grid-row: 1; }
  .weather-header > .back-button { grid-column: 1; grid-row: 2; }
  .weather-header-actions { grid-column: 2; grid-row: 2; }
}
.weather-app .ypdn-hidden-controls { display: none !important; }
.weather-app .taf-input, .weather-app .metar-output { padding: 3px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; line-height: 1.5; }
.weather-app .field-label { display: block; color: var(--label); font-size: 14px; margin: 8px 3px 4px; }
.weather-app .taf-line, .weather-app .taf-gap, .weather-app .taf-block { display: block; }
.weather-app .taf-gap { min-height: .7em; }
.weather-app .taf-token-breach { background: var(--warning-red); color: #ffffff; padding: 0 3px; }
.weather-app .taf-header-meta, .weather-app .taf-block.future-muted { color: var(--label); }
.weather-app .taf-header-valid, .weather-app .taf-remark { color: var(--text); }
.weather-app .taf-block.inter-soon { color: var(--warning-amber); }
.weather-app .taf-block.tempo-soon { color: var(--warning-red); }
.weather-app .timeline-graph { display: grid; gap: 10px; padding: 0 10px; }
.weather-app .timeline-axis-labels { position: relative; height: 36px; z-index: 2; }
.weather-app .timeline-axis-label { position: absolute; top: 18px; transform: translateX(-50%); color: var(--label); font-size: 11px; white-space: nowrap; }
.weather-app .timeline-taf3-marker { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; z-index: 3; pointer-events: none; }
.weather-app .timeline-taf3-label { color: var(--focus); font-size: 10px; line-height: 1; padding: 1px 3px; background: var(--background); }
.weather-app .timeline-taf3-chevron { width: 0; height: 0; margin-top: 19px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--focus); }
.weather-app .timeline-bar { position: relative; height: 44px; border: 3px solid; border-color: var(--black) var(--shadow) var(--shadow) var(--black); background: var(--background); overflow: hidden; }
.weather-app .timeline-underlay { position: relative; height: 48px; }
.weather-app .timeline-underlay-column { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; }
.weather-app .timeline-underlay-temp, .weather-app .timeline-underlay-pressure { display: block; min-height: 1em; font-size: 10px; line-height: 1; white-space: nowrap; }
.weather-app .timeline-underlay-temp { color: var(--focus); }
.weather-app .timeline-underlay-pressure { color: var(--text); }
.weather-app .timeline-underlay-pressure.is-stepped { transform: translateY(8px); }
.weather-app .timeline-tick { position: absolute; bottom: 0; width: 1px; background: var(--text); transform: translateX(-.5px); z-index: 3; }
.weather-app .timeline-tick.major { top: 0; }
.weather-app .timeline-tick.minor { top: 50%; }
.weather-app .timeline-segment { position: absolute; display: block; top: 0; bottom: 0; z-index: 1; }
.weather-app .timeline-segment.inter { background: var(--warning-amber); }
.weather-app .timeline-segment.tempo { background: var(--warning-red); }
.weather-app .timeline-segment.buffer { opacity: .35; }
.weather-app .empty-state { color: var(--label); font-size: 14px; padding: 3px; }

/* ==========================================================================
   09. pnr.css
   ========================================================================== */
.pnr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pnr-reserve-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.pnr-reserve-table th { color: var(--label); font-weight: 400; }
.pnr-reserve-table th, .pnr-reserve-table td { padding: 4px 3px; text-align: right; vertical-align: middle; overflow-wrap: anywhere; }
.pnr-reserve-table th:first-child { text-align: left; }
.pnr-reserve-table thead { border-bottom: 3px solid var(--shadow); }
.pnr-reserve-table .planning-entry input { padding-inline: 3px; font-size: 14px; }
.pnr-reserve-table tbody td:last-child { font-weight: 700; }
.pnr-reserve-total { border-top: 3px solid var(--shadow); }
.pnr-route-diagram { position: relative; width: 100%; height: 144px; margin: auto; }
.pnr-total-distance { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.pnr-total-distance > label { color: var(--label); font-size: 14px; }
.pnr-total-distance .planning-entry { width: 120px; }
.pnr-margins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.pnr-margin-box { margin-bottom: 0; text-align: center; }
.pnr-margin-box label { display: block; color: var(--label); font-size: 14px; margin-bottom: 4px; }
.pnr-margin-box output { font-size: 14px; font-weight: 700; }
.pnr-margin-box[data-negative="true"] { background: var(--warning-red); color: #ffffff; }
.pnr-margin-box[data-negative="true"] label { color: #ffffff; }
#pnr-return-box[data-negative="true"] { background: var(--warning-amber); color: var(--black); }
#pnr-return-box[data-negative="true"] label { color: var(--black); }
.pnr-route-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pnr-route-line { fill: none; stroke: var(--input-border); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pnr-leader { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pnr-leader-acft { stroke: var(--focus); }
.pnr-leader-cp { stroke: var(--warning-yellow); }
.pnr-leader-pnr { stroke: var(--warning-red); }
.pnr-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.pnr-route-tab { min-width: 0; min-height: 44px; padding: 6px 3px; text-align: center; font-size: 14px; }
.pnr-diagram-label { position: absolute; top: calc(40% - 20px); transform: translate(-50%, -50%); padding: 3px 6px; color: var(--text); font-size: 14px; }
.pnr-diagram-label.pnr-route-dest { left: 90%; }
.pnr-decision-marker { position: absolute; top: 40%; width: 0; height: 0; }
.pnr-cp-marker { color: var(--warning-yellow); }
.pnr-pnr-marker { color: var(--warning-red); }
.pnr-decision-tick { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); fill: none; stroke: currentColor; stroke-width: 2; }
.pnr-diagram-label.pnr-route-origin { left: 10%; }
.pnr-diagram-fuel { position: absolute; top: calc(40% + 16px); transform: translateX(-50%); color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.pnr-diagram-fuel-origin { left: 10%; }
.pnr-diagram-fuel-dest { left: 90%; }
.pnr-route-tab[aria-pressed="true"] { font-weight: 700; }
.pnr-common-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pnr-leg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
.pnr-aircraft-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pnr-group-title { text-align: center; color: var(--label); margin-bottom: 8px !important; }
.pnr-field { min-width: 0; }
.pnr-field > label { display: block; color: var(--label); font-size: 14px; line-height: 1.4; margin-bottom: 4px; padding-left: 3px; }
.pnr-field .planning-entry { gap: 3px; }
.pnr-field .planning-entry span { font-size: 12px; }
.pnr-field .planning-entry input { padding-inline: 3px; font-size: 14px; }
.pnr-field > label { overflow-wrap: anywhere; text-align: center; padding-left: 0; }
@media (max-width: 400px) {
  .pnr-field > label, .pnr-field .planning-entry span { font-size: 11px; }
}

.pnr-acft-marker { color: var(--focus); }

.pnr-diagram-readouts { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pnr-readout { text-align: center; font-size: 14px; line-height: 1.4; }
.pnr-readout span, .pnr-readout output { display: block; white-space: nowrap; }
.pnr-readout span { font-weight: 400; }
.pnr-readout output { font-weight: 700; }

/* ==========================================================================
   10. scanflow.css
   ========================================================================== */
.scanflow-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.scanflow-tab { min-width: 0; padding: 6px 3px; font-size: 13px; line-height: 1.3; }
.scanflow-tab[aria-selected="true"] { font-weight: 700; }
.scanflow-checklist { padding: 3px; margin-bottom: 24px; }
.scanflow-checklist-heading { text-align: center; padding: 6px 3px; background: #C3C3C3; color: #000000; font-weight: 700; }
.scanflow-table tbody + tbody { border-top: 3px solid var(--shadow); }
.scanflow-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.scanflow-title-column { width: 26px; }
.scanflow-title { vertical-align: middle; padding: 3px; color: var(--label); font-weight: 700; text-align: center; }
.scanflow-title span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.scanflow-title.scanflow-number span { writing-mode: horizontal-tb; transform: none; }
.scanflow-numbered-row { background: #21314A; }
.scanflow-table td { height: 26px; padding: 3px 6px; vertical-align: middle; overflow-wrap: anywhere; }
.scanflow-table td { text-align: right; }
.scanflow-table td:last-child { text-align: left; padding-left: 10px; }
.scanflow-table td.scanflow-shadow { background: var(--shadow); }
.scanflow-table td.scanflow-muted { color: #969696; font-style: italic; }
.scanflow-ofps-highlight { background: #294A6B; color: var(--text); padding: 0 2px; }
.scanflow-traffic-light td { text-align: left; padding-left: 6px; }
.scanflow-traffic-light td:first-child { width: 18%; font-weight: 700; }
.scanflow-traffic-light td:nth-child(2) { width: 22%; }
.scanflow-traffic-light-header td { color: #ffffff; background: #21314A; }
.scanflow-traffic-light-green td { color: #00FF00; }
.scanflow-traffic-light-amber td { color: var(--warning-amber); }
.scanflow-traffic-light-red td { color: var(--warning-red); }
.scanflow-test-highlight { color: #00FF00; background: #000000; padding: 0 2px; }
.scanflow-pending { color: var(--label); font-size: 14px; }
.scanflow-note { color: var(--label); font-size: 12px; margin: 0 3px 10px; }
@media (max-width: 600px) { .scanflow-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }