/* details-text.css - "Flight details text size" (owner 2026-11-05; iOS has it in DetailsTextSize.swift). details-text.js sets
   data-dts on <html> (-1, 1 or 2; absent = Usual). The flight info card (#fpSummary), the details panel (#flightPanel) and the
   Settings sample (.dts-sample on the profile page) are scaled by the --dts step with CSS zoom, so the text, the spacing and the
   wrapping move together and the page itself (zoom, map, widths of the page) is untouched. Where zoom is not supported
   nothing changes. The scales match DETAILS_TEXT_CHOICES in details-text.js (a test pins them). ASCII only. */
html[data-dts="-1"] { --dts: 0.9; }
html[data-dts="1"] { --dts: 1.15; }
html[data-dts="2"] { --dts: 1.3; }
#fpSummary, #flightPanel, .dts-sample { zoom: var(--dts, 1); }

/* The quick menu in the details panel: a small "Aa" button that opens the four choices. */
.fp-dts { display: flex; justify-content: flex-end; padding: 2px 6px 0; position: relative; }
.dts-menu { position: relative; }
.dts-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; box-sizing: border-box; cursor: pointer; border-radius: 22px; font: bold 14px/1 Arial, sans-serif; color: #1078b3; }
.dts-menu > summary::-webkit-details-marker { display: none; }
.dts-menu > summary:hover { background: #eef6fc; }
.dts-menu > summary:focus-visible { outline: 2px solid #169fe6; outline-offset: -2px; }
.dts-menu-list { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 150px; margin: 0; padding: 4px; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.dts-menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; background: transparent; font: 14px/1.2 Arial, sans-serif; color: #333; text-align: left; cursor: pointer; border-radius: 6px; }
.dts-menu-list button:hover { background: #f1f6fa; }
.dts-menu-list button:focus-visible { outline: 2px solid #169fe6; outline-offset: -2px; }
.dts-menu-list button[aria-checked="true"] { font-weight: bold; color: #0a5c8a; }
.dts-menu-list .dts-tick { width: 14px; flex: none; }
body.dark-mode .dts-menu > summary { color: #4da6ff; }
body.dark-mode .dts-menu > summary:hover { background: #333; }
body.dark-mode .dts-menu-list { background: #2a2a2a; border-color: #555; }
body.dark-mode .dts-menu-list button { color: #e0e0e0; }
body.dark-mode .dts-menu-list button:hover { background: #3a3a3a; }
body.dark-mode .dts-menu-list button[aria-checked="true"] { color: #4da6ff; }

/* The Settings sample: a card-like box around the real tile classes. */
.dts-sample { max-width: min(260px, calc(100% / var(--dts, 1))); margin: 8px 0 4px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; overflow: hidden; }
.dts-sample .fp-tile { border: 0; }
body.dark-mode .dts-sample { background: #2a2a2a; border-color: #3a3a3a; }
body.dark-mode .dts-sample .fp-tile-h, body.dark-mode .dts-sample .fp-tlabel { color: #999; }
body.dark-mode .dts-sample .fp-tile-name { color: #bbb; }
body.dark-mode .dts-sample .fp-tile-gate, body.dark-mode .dts-sample .fp-tval { color: #e0e0e0; }
body.dark-mode .dts-sample .fp-tile-code a { color: #4da6ff; }