/* FIELDFOLIO language picker and right to left support (1.0.2). Loaded by i18n.js as a stylesheet file (CSP style-src 'self'). */
.ffl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 44px; min-height: 44px; padding: 0 0.55rem; margin: 0; border: 1.5px solid var(--line, #c8c4bb); border-radius: 999px; background: var(--panel, #fff); color: var(--ink, #121417); font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; flex: none; -webkit-tap-highlight-color: rgba(196, 122, 44, 0.2); }
.ffl-btn:hover { border-color: var(--accent, #c47a2c); }
.ffl-btn:focus-visible, .ffl-opt:focus-visible, .ffl-close:focus-visible { outline: 3px solid var(--accent, #c47a2c); outline-offset: 2px; }
.ffl-ico { flex: none; }
.ffl-float { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 0.6rem); inset-inline-end: 0.6rem; z-index: 2147482000; box-shadow: 0 2px 10px rgba(18, 20, 23, 0.2); }
@media (max-width: 380px) { .ffl-code { display: none; } .ffl-btn { padding: 0 0.5rem; } }
.nav-inner .ffl-btn { margin-inline-start: auto; margin-inline-end: 0.4rem; }
.ffs-top-r .ffl-btn { margin-inline-end: 0.3rem; background: transparent; border-color: rgba(242, 239, 232, 0.28); color: var(--ffs-bar-ink, #f2efe8); }
.ffs-top-r .ffl-btn:active { background: rgba(242, 239, 232, 0.14); }
html.ffl-open { overflow: hidden; }
.ffl-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; }
.ffl-modal[hidden] { display: none; }
.ffl-back { position: absolute; inset: 0; background: rgba(10, 12, 14, 0.55); }
.ffl-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: min(86vh, 640px); margin: 0; padding: 0; border: 1.5px solid var(--line, #c8c4bb); border-radius: 18px 18px 0 0; background: var(--panel, #fff); color: var(--ink, #121417); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.3); }
@media (min-width: 560px) { .ffl-modal { align-items: center; } .ffl-panel { border-radius: 18px; } }
.ffl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.8rem 1rem; border-bottom: 1.5px solid var(--line, #c8c4bb); }
.ffl-h { margin: 0; font-size: 1.15rem; font-weight: 800; }
.ffl-close { min-height: 44px; min-width: 44px; padding: 0 0.9rem; border: 2px solid var(--ink, #121417); border-radius: 8px; background: var(--ink, #121417); color: var(--btn-on-ink, #fff); font: inherit; font-weight: 750; cursor: pointer; }
.ffl-list { list-style: none; margin: 0; padding: 0.3rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ffl-list li { margin: 0; padding: 0; }
.ffl-opt { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; width: 100%; min-height: 52px; padding: 0.5rem 1rem; border: 0; border-bottom: 1px solid var(--line, #c8c4bb); background: transparent; color: inherit; font: inherit; font-size: 1.05rem; text-align: start; cursor: pointer; }
.ffl-name { min-width: 0; overflow-wrap: break-word; }
.ffl-opt[aria-selected="true"] { font-weight: 800; background: color-mix(in srgb, var(--accent, #c47a2c) 12%, transparent); }
.ffl-tick { flex: none; width: 12px; height: 7px; margin-inline-end: 0.3rem; border-inline-start: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(-45deg); }
.ffl-opt[aria-selected="true"] .ffl-tick { border-color: var(--accent, #c47a2c); }
.ffl-legal-note { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border: 1.5px solid var(--line, #c8c4bb); border-radius: 10px; background: var(--panel, #fff); color: var(--muted, #5a6168); font-size: 0.9rem; }
/* Right to left (Arabic, Hebrew): the page mirrors through the dir attribute; these rules only fix what was written with a physical side. */
html[dir="rtl"] body { text-align: start; }
html[dir="rtl"] .acc-chev, html[dir="rtl"] .ffs-chev { transform: none; }
html[dir="rtl"] .acc-open > .acc-head .acc-chev { transform: rotate(180deg); }
html[dir="rtl"] .ffr-item, html[dir="rtl"] .ffr-meta, html[dir="rtl"] .ffr-name { text-align: start; }
html[dir="rtl"] .ffr-tag { margin-inline-start: 0.35rem; margin-left: 0; }
html[dir="rtl"] .back-link svg, html[dir="rtl"] .ffs-back svg { transform: scaleX(-1); }
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"] { direction: ltr; text-align: end; }
html[dir="rtl"] .ffl-list, html[dir="rtl"] .ffl-opt { text-align: start; }
/* Long words (German, Finnish and others) wrap instead of pushing the page sideways. */
html:not([lang="en"]) .acc-titles h2, html:not([lang="en"]) .acc-sum, html:not([lang="en"]) .ffr-name, html:not([lang="en"]) .ffr-meta, html:not([lang="en"]) .btn, html:not([lang="en"]) label, html:not([lang="en"]) .hint { overflow-wrap: break-word; }
html:not([lang="en"]) .acc-sum { white-space: normal; }

/* Long words (German, Finnish, Greek...) at big text sizes: let pills wrap and header rows break to a second line. */
html:not([lang="en"]) .phase-pill, html:not([lang="en"]) .job-badge { white-space: normal; overflow-wrap: break-word; max-width: 100%; }
html:not([lang="en"]) .profile-head, html:not([lang="en"]) .phase-title { flex-wrap: wrap; }
html:not([lang="en"]) .btn, html:not([lang="en"]) .chip { overflow-wrap: break-word; }
html:not([lang="en"]) body { overflow-wrap: break-word; }
html:not([lang="en"]) .footer-links a { max-width: 100%; }

/* long translated button labels wrap instead of overflowing (320px, 200% text) */
html:not([lang="en"]) .btn { white-space: normal; max-width: 100%; overflow-wrap: break-word; text-align: center; }

/* F40/F42 (2026-10-19): a word wider than its box shrinks the box to fit (set by i18n.js) instead of breaking mid-word. Never below 16px text. */
.ff-z99 { zoom: 0.99; } .ff-z98 { zoom: 0.98; } .ff-z97 { zoom: 0.97; } .ff-z96 { zoom: 0.96; } .ff-z95 { zoom: 0.95; } .ff-z94 { zoom: 0.94; } .ff-z93 { zoom: 0.93; } .ff-z92 { zoom: 0.92; } .ff-z91 { zoom: 0.91; } .ff-z90 { zoom: 0.9; } .ff-z89 { zoom: 0.89; } .ff-z88 { zoom: 0.88; } .ff-z87 { zoom: 0.87; } .ff-z86 { zoom: 0.86; } .ff-z85 { zoom: 0.85; } .ff-z84 { zoom: 0.84; } .ff-z83 { zoom: 0.83; } .ff-z82 { zoom: 0.82; } .ff-z81 { zoom: 0.81; } .ff-z80 { zoom: 0.8; } .ff-z79 { zoom: 0.79; } .ff-z78 { zoom: 0.78; } .ff-z77 { zoom: 0.77; } .ff-z76 { zoom: 0.76; } .ff-z75 { zoom: 0.75; } .ff-z74 { zoom: 0.74; } .ff-z73 { zoom: 0.73; } .ff-z72 { zoom: 0.72; } .ff-z71 { zoom: 0.71; } .ff-z70 { zoom: 0.7; } .ff-z69 { zoom: 0.69; } .ff-z68 { zoom: 0.68; } .ff-z67 { zoom: 0.67; } .ff-z66 { zoom: 0.66; } .ff-z65 { zoom: 0.65; } .ff-z64 { zoom: 0.64; } .ff-z63 { zoom: 0.63; } .ff-z62 { zoom: 0.62; } .ff-z61 { zoom: 0.61; } .ff-z60 { zoom: 0.6; } .ff-z59 { zoom: 0.59; } .ff-z58 { zoom: 0.58; } .ff-z57 { zoom: 0.57; } .ff-z56 { zoom: 0.56; } .ff-z55 { zoom: 0.55; } .ff-z54 { zoom: 0.54; } .ff-z53 { zoom: 0.53; } .ff-z52 { zoom: 0.52; } .ff-z51 { zoom: 0.51; } .ff-z50 { zoom: 0.5; } .ff-z49 { zoom: 0.49; } .ff-z48 { zoom: 0.48; } .ff-z47 { zoom: 0.47; } .ff-z46 { zoom: 0.46; } .ff-z45 { zoom: 0.45; }
.ff-rem-probe { position: absolute; top: 0; left: 0; width: 1rem; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* F42b (2026-10-19): button text pieces (label, price, estimate) move to a new line as whole words instead of squeezing side by side. */
.btn { flex-wrap: wrap; overflow-wrap: break-word; }
html:not([lang="en"]) .btn { overflow-wrap: break-word; }
/* F48 (2026-10-19): the legal note is 16px */
.ffl-legal-note { font-size: 1rem; }
/* F40 (2026-10-19): very big text on a phone (320px at 200%): cards and panels keep a slim side padding so words have room */
html.ff-tw-xs .panel, html.ff-tw-xs .card, html.ff-tw-xs .ffr.ffr-pcard, html.ff-tw-xs .ffr-jsum, html.ff-tw-xs .ffr-jbody, html.ff-tw-xs .acct-card, html.ff-tw-xs .crew-add, html.ff-tw-xs .price-card, html.ff-tw-xs .step { padding-left: 0.4rem; padding-right: 0.4rem; }
html.ff-tw-xs .wrap, html.ff-tw-xs .container { padding-left: 0.4rem; padding-right: 0.4rem; }
/* F42d (2026-10-19): on the narrowest phones lists give long compound words (Finnish, German) a little more room */
@media (max-width: 360px) { html:not([lang="en"]) main ul:not([class]), html:not([lang="en"]) main ol:not([class]) { padding-inline-start: 1.25rem; } }
/* F66 (2026-10-19): a tap target the word fit zooms down keeps 44px on screen (min-height is scaled by the zoom) */
.nav-toggle.ff-zf, .theme-toggle.ff-zf, .nav-inner .nav-toggle.ff-zf { height: auto !important; }
button.ff-z45, .btn.ff-z45, .nav-toggle.ff-z45, .chip.ff-z45, a[role=button].ff-z45, [role=tab].ff-z45, summary.ff-z45 { min-height: 97.79px !important; }
button.ff-z46, .btn.ff-z46, .nav-toggle.ff-z46, .chip.ff-z46, a[role=button].ff-z46, [role=tab].ff-z46, summary.ff-z46 { min-height: 95.66px !important; }
button.ff-z47, .btn.ff-z47, .nav-toggle.ff-z47, .chip.ff-z47, a[role=button].ff-z47, [role=tab].ff-z47, summary.ff-z47 { min-height: 93.63px !important; }
button.ff-z48, .btn.ff-z48, .nav-toggle.ff-z48, .chip.ff-z48, a[role=button].ff-z48, [role=tab].ff-z48, summary.ff-z48 { min-height: 91.68px !important; }
button.ff-z49, .btn.ff-z49, .nav-toggle.ff-z49, .chip.ff-z49, a[role=button].ff-z49, [role=tab].ff-z49, summary.ff-z49 { min-height: 89.81px !important; }
button.ff-z50, .btn.ff-z50, .nav-toggle.ff-z50, .chip.ff-z50, a[role=button].ff-z50, [role=tab].ff-z50, summary.ff-z50 { min-height: 88.01px !important; }
button.ff-z51, .btn.ff-z51, .nav-toggle.ff-z51, .chip.ff-z51, a[role=button].ff-z51, [role=tab].ff-z51, summary.ff-z51 { min-height: 86.28px !important; }
button.ff-z52, .btn.ff-z52, .nav-toggle.ff-z52, .chip.ff-z52, a[role=button].ff-z52, [role=tab].ff-z52, summary.ff-z52 { min-height: 84.63px !important; }
button.ff-z53, .btn.ff-z53, .nav-toggle.ff-z53, .chip.ff-z53, a[role=button].ff-z53, [role=tab].ff-z53, summary.ff-z53 { min-height: 83.03px !important; }
button.ff-z54, .btn.ff-z54, .nav-toggle.ff-z54, .chip.ff-z54, a[role=button].ff-z54, [role=tab].ff-z54, summary.ff-z54 { min-height: 81.49px !important; }
button.ff-z55, .btn.ff-z55, .nav-toggle.ff-z55, .chip.ff-z55, a[role=button].ff-z55, [role=tab].ff-z55, summary.ff-z55 { min-height: 80.01px !important; }
button.ff-z56, .btn.ff-z56, .nav-toggle.ff-z56, .chip.ff-z56, a[role=button].ff-z56, [role=tab].ff-z56, summary.ff-z56 { min-height: 78.58px !important; }
button.ff-z57, .btn.ff-z57, .nav-toggle.ff-z57, .chip.ff-z57, a[role=button].ff-z57, [role=tab].ff-z57, summary.ff-z57 { min-height: 77.20px !important; }
button.ff-z58, .btn.ff-z58, .nav-toggle.ff-z58, .chip.ff-z58, a[role=button].ff-z58, [role=tab].ff-z58, summary.ff-z58 { min-height: 75.87px !important; }
button.ff-z59, .btn.ff-z59, .nav-toggle.ff-z59, .chip.ff-z59, a[role=button].ff-z59, [role=tab].ff-z59, summary.ff-z59 { min-height: 74.59px !important; }
button.ff-z60, .btn.ff-z60, .nav-toggle.ff-z60, .chip.ff-z60, a[role=button].ff-z60, [role=tab].ff-z60, summary.ff-z60 { min-height: 73.34px !important; }
button.ff-z61, .btn.ff-z61, .nav-toggle.ff-z61, .chip.ff-z61, a[role=button].ff-z61, [role=tab].ff-z61, summary.ff-z61 { min-height: 72.14px !important; }
button.ff-z62, .btn.ff-z62, .nav-toggle.ff-z62, .chip.ff-z62, a[role=button].ff-z62, [role=tab].ff-z62, summary.ff-z62 { min-height: 70.98px !important; }
button.ff-z63, .btn.ff-z63, .nav-toggle.ff-z63, .chip.ff-z63, a[role=button].ff-z63, [role=tab].ff-z63, summary.ff-z63 { min-height: 69.85px !important; }
button.ff-z64, .btn.ff-z64, .nav-toggle.ff-z64, .chip.ff-z64, a[role=button].ff-z64, [role=tab].ff-z64, summary.ff-z64 { min-height: 68.76px !important; }
button.ff-z65, .btn.ff-z65, .nav-toggle.ff-z65, .chip.ff-z65, a[role=button].ff-z65, [role=tab].ff-z65, summary.ff-z65 { min-height: 67.70px !important; }
button.ff-z66, .btn.ff-z66, .nav-toggle.ff-z66, .chip.ff-z66, a[role=button].ff-z66, [role=tab].ff-z66, summary.ff-z66 { min-height: 66.68px !important; }
button.ff-z67, .btn.ff-z67, .nav-toggle.ff-z67, .chip.ff-z67, a[role=button].ff-z67, [role=tab].ff-z67, summary.ff-z67 { min-height: 65.68px !important; }
button.ff-z68, .btn.ff-z68, .nav-toggle.ff-z68, .chip.ff-z68, a[role=button].ff-z68, [role=tab].ff-z68, summary.ff-z68 { min-height: 64.72px !important; }
button.ff-z69, .btn.ff-z69, .nav-toggle.ff-z69, .chip.ff-z69, a[role=button].ff-z69, [role=tab].ff-z69, summary.ff-z69 { min-height: 63.78px !important; }
button.ff-z70, .btn.ff-z70, .nav-toggle.ff-z70, .chip.ff-z70, a[role=button].ff-z70, [role=tab].ff-z70, summary.ff-z70 { min-height: 62.87px !important; }
button.ff-z71, .btn.ff-z71, .nav-toggle.ff-z71, .chip.ff-z71, a[role=button].ff-z71, [role=tab].ff-z71, summary.ff-z71 { min-height: 61.98px !important; }
button.ff-z72, .btn.ff-z72, .nav-toggle.ff-z72, .chip.ff-z72, a[role=button].ff-z72, [role=tab].ff-z72, summary.ff-z72 { min-height: 61.12px !important; }
button.ff-z73, .btn.ff-z73, .nav-toggle.ff-z73, .chip.ff-z73, a[role=button].ff-z73, [role=tab].ff-z73, summary.ff-z73 { min-height: 60.28px !important; }
button.ff-z74, .btn.ff-z74, .nav-toggle.ff-z74, .chip.ff-z74, a[role=button].ff-z74, [role=tab].ff-z74, summary.ff-z74 { min-height: 59.47px !important; }
button.ff-z75, .btn.ff-z75, .nav-toggle.ff-z75, .chip.ff-z75, a[role=button].ff-z75, [role=tab].ff-z75, summary.ff-z75 { min-height: 58.68px !important; }
button.ff-z76, .btn.ff-z76, .nav-toggle.ff-z76, .chip.ff-z76, a[role=button].ff-z76, [role=tab].ff-z76, summary.ff-z76 { min-height: 57.90px !important; }
button.ff-z77, .btn.ff-z77, .nav-toggle.ff-z77, .chip.ff-z77, a[role=button].ff-z77, [role=tab].ff-z77, summary.ff-z77 { min-height: 57.15px !important; }
button.ff-z78, .btn.ff-z78, .nav-toggle.ff-z78, .chip.ff-z78, a[role=button].ff-z78, [role=tab].ff-z78, summary.ff-z78 { min-height: 56.42px !important; }
button.ff-z79, .btn.ff-z79, .nav-toggle.ff-z79, .chip.ff-z79, a[role=button].ff-z79, [role=tab].ff-z79, summary.ff-z79 { min-height: 55.71px !important; }
button.ff-z80, .btn.ff-z80, .nav-toggle.ff-z80, .chip.ff-z80, a[role=button].ff-z80, [role=tab].ff-z80, summary.ff-z80 { min-height: 55.01px !important; }
button.ff-z81, .btn.ff-z81, .nav-toggle.ff-z81, .chip.ff-z81, a[role=button].ff-z81, [role=tab].ff-z81, summary.ff-z81 { min-height: 54.33px !important; }
button.ff-z82, .btn.ff-z82, .nav-toggle.ff-z82, .chip.ff-z82, a[role=button].ff-z82, [role=tab].ff-z82, summary.ff-z82 { min-height: 53.67px !important; }
button.ff-z83, .btn.ff-z83, .nav-toggle.ff-z83, .chip.ff-z83, a[role=button].ff-z83, [role=tab].ff-z83, summary.ff-z83 { min-height: 53.02px !important; }
button.ff-z84, .btn.ff-z84, .nav-toggle.ff-z84, .chip.ff-z84, a[role=button].ff-z84, [role=tab].ff-z84, summary.ff-z84 { min-height: 52.39px !important; }
button.ff-z85, .btn.ff-z85, .nav-toggle.ff-z85, .chip.ff-z85, a[role=button].ff-z85, [role=tab].ff-z85, summary.ff-z85 { min-height: 51.77px !important; }
button.ff-z86, .btn.ff-z86, .nav-toggle.ff-z86, .chip.ff-z86, a[role=button].ff-z86, [role=tab].ff-z86, summary.ff-z86 { min-height: 51.17px !important; }
button.ff-z87, .btn.ff-z87, .nav-toggle.ff-z87, .chip.ff-z87, a[role=button].ff-z87, [role=tab].ff-z87, summary.ff-z87 { min-height: 50.58px !important; }
button.ff-z88, .btn.ff-z88, .nav-toggle.ff-z88, .chip.ff-z88, a[role=button].ff-z88, [role=tab].ff-z88, summary.ff-z88 { min-height: 50.01px !important; }
button.ff-z89, .btn.ff-z89, .nav-toggle.ff-z89, .chip.ff-z89, a[role=button].ff-z89, [role=tab].ff-z89, summary.ff-z89 { min-height: 49.45px !important; }
button.ff-z90, .btn.ff-z90, .nav-toggle.ff-z90, .chip.ff-z90, a[role=button].ff-z90, [role=tab].ff-z90, summary.ff-z90 { min-height: 48.90px !important; }
button.ff-z91, .btn.ff-z91, .nav-toggle.ff-z91, .chip.ff-z91, a[role=button].ff-z91, [role=tab].ff-z91, summary.ff-z91 { min-height: 48.36px !important; }
button.ff-z92, .btn.ff-z92, .nav-toggle.ff-z92, .chip.ff-z92, a[role=button].ff-z92, [role=tab].ff-z92, summary.ff-z92 { min-height: 47.84px !important; }
button.ff-z93, .btn.ff-z93, .nav-toggle.ff-z93, .chip.ff-z93, a[role=button].ff-z93, [role=tab].ff-z93, summary.ff-z93 { min-height: 47.32px !important; }
button.ff-z94, .btn.ff-z94, .nav-toggle.ff-z94, .chip.ff-z94, a[role=button].ff-z94, [role=tab].ff-z94, summary.ff-z94 { min-height: 46.82px !important; }
button.ff-z95, .btn.ff-z95, .nav-toggle.ff-z95, .chip.ff-z95, a[role=button].ff-z95, [role=tab].ff-z95, summary.ff-z95 { min-height: 46.33px !important; }
button.ff-z96, .btn.ff-z96, .nav-toggle.ff-z96, .chip.ff-z96, a[role=button].ff-z96, [role=tab].ff-z96, summary.ff-z96 { min-height: 45.84px !important; }
button.ff-z97, .btn.ff-z97, .nav-toggle.ff-z97, .chip.ff-z97, a[role=button].ff-z97, [role=tab].ff-z97, summary.ff-z97 { min-height: 45.37px !important; }
button.ff-z98, .btn.ff-z98, .nav-toggle.ff-z98, .chip.ff-z98, a[role=button].ff-z98, [role=tab].ff-z98, summary.ff-z98 { min-height: 44.91px !important; }
button.ff-z99, .btn.ff-z99, .nav-toggle.ff-z99, .chip.ff-z99, a[role=button].ff-z99, [role=tab].ff-z99, summary.ff-z99 { min-height: 44.45px !important; }
/* Idea 81 (2026-10-19): button labels stay on one line. Buttons cap at their row's width; i18n.js wordFit zooms a label that is still too
   wide (never under 16px text). Only labelled buttons (.btn, .chip, tabs): card buttons with several lines of content (checklist rows, Say-It cards, photo slots, step checks) keep their layout. */
#safety-list .check-toggle, #safety-list .check-text, .btn:not(.step-check-btn), .job-steps a, a[role=button], [role=tab], .chip, .tracker-tab, input[type=submit], input[type=button] { white-space: nowrap !important; max-width: 100%; }
html.ff-tw-xs .btn, html.ff-tw-xs .chip, html.ff-tw-xs [role=tab] { padding-inline: 0.55rem; }
html.ff-tw-xs .chip { padding-inline: 0.35rem; }
html.ff-tw-xs .btn { padding-inline: 0.45rem; }
html.ff-tw-xs .tracker-tab { padding-inline: 0.45rem; }
:root .ff-bw.ff-bw.ff-bw { white-space: normal !important; overflow-wrap: normal; }
/* Idea 81: a button too wide for its row takes the whole row, with tight padding and gap (class set by i18n.js wordFit) */
:root .ff-bfull.ff-bfull { display: flex; align-items: center; justify-content: center; flex: 1 1 100%; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: 0.25rem; gap: 0.2rem; margin-inline: 0; text-align: center; letter-spacing: normal; word-spacing: normal; contain: inline-size; }
:root .ff-bpar.ff-bpar, html.ff-has-session .save-row.ff-bpar, body.ff-signed-in .save-row.ff-bpar { flex-wrap: wrap !important; min-width: 0; overflow: visible; }
/* Idea 81: at 320px and 200% text the cards give their buttons the room (card side padding tightens) */
html.ff-tw-xs .acct-panel, html.ff-tw-xs .panel, html.ff-tw-xs .docs-block { padding-inline: 0.3rem; }

/* F106: safety rows keep 6px or more inside the border (0.375rem never drops below 6px because zoom never takes text below 16px) */
:root #safety-list .check-toggle.ff-bfull.ff-bfull, #safety-list .check-toggle { padding-inline: max(0.375rem, 6px); }
#safety-list .check-toggle .check-text, .ffs-list li > .ffs-card .ffs-card-t { flex: 0 0 auto; min-width: auto; max-width: none; }
/* 2026-10-20 header (Ty): language, light/dark and Menu sit together at the right edge in that order on every page, never centered.
   Sample (login page only) sits to the left of language, so the other three never move. */
.nav-inner { flex-wrap: wrap; position: relative; gap: 0 !important; row-gap: 0.4rem !important; }
.nav > .container.nav-inner { width: min(1080px, 92%) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
.nav-inner > .ffl-btn { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
.nav-inner > .theme-toggle, .nav-inner > .nav-toggle { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; flex-shrink: 0; }
.nav-inner > .ffl-btn ~ .theme-toggle { margin-inline-start: 0.4rem !important; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; }
.nav-inner > #btn-sample { margin-inline-start: auto !important; }
.nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; }
@media (max-width: 380px) {
  .nav-inner > .logo { gap: 0.35rem; font-size: 0.95rem; letter-spacing: 0; }
  .nav-inner > .logo .logo-mark { width: 26px; height: 26px; }
  .nav-inner > .theme-toggle, .nav-inner > .nav-toggle, .nav-inner > .ffl-btn ~ .theme-toggle, .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; }
  .nav-inner > .nav-toggle { padding-left: 0.4rem !important; padding-right: 0.4rem !important; min-width: 44px !important; }
}
@media (max-width: 340px) { .nav-inner > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
@media (max-width: 440px) { .nav-inner:has(> #btn-sample:not([hidden])) > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner:has(> #btn-sample:not([hidden])) > .logo .logo-mark { width: 32px; height: 32px; } }
/* same spacing between the right side controls on every page (beats older page rules) */
header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; }
@media (max-width: 380px) { header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; } }
/* very narrow phones in long languages: only the logo mark shows so the controls stay on one row */
@media (max-width: 380px) { header.nav > .nav-inner > .logo { font-size: 0 !important; gap: 0 !important; min-width: 44px; min-height: 44px; } header.nav > .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
/* login page on 320px phones in long languages: the logo steps aside so Sample, language, light/dark and Menu stay on one row */
@media (max-width: 340px) { header.nav > .nav-inner:has(> #btn-sample:not([hidden])) > .logo { display: none !important; } }
/* F125 (2026-10-21): header one row at 100% and 200% text, every page. i18n.js steps up ff-nav-t1..t4 until it fits:
   t1 hides the logo word, t2 compacts the language pill to its code (no globe), t3 hides the logo mark, t4 tightens gaps. Tap targets stay 44px. */
.nav-inner { flex-wrap: nowrap !important; }
.nav-inner > * { flex-shrink: 0; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav-inner.ff-nav-t1 > .logo { font-size: 0 !important; gap: 0 !important; }
.nav-inner.ff-nav-t2 .ffl-btn svg { display: none !important; }
.nav-inner.ff-nav-t2 .ffl-code { display: inline !important; }
.nav-inner.ff-nav-t3 > .logo { display: none !important; }
.nav-inner.ff-nav-t3 > :nth-child(2) { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t4 { gap: 0.2rem !important; padding-inline: 0.4rem !important; }
.nav-inner.ff-nav-t4 > button { padding-inline: 0.45rem !important; margin-inline: 0 !important; }
/* t5, t6: last steps before wrapping at 200% text. Labels shrink but never below 16px. */
.nav-inner.ff-nav-t5 > button, .nav-inner.ff-nav-t5 .ffl-code { font-size: max(16px, 0.75rem) !important; }
.nav-inner.ff-nav-t6 > button, .nav-inner.ff-nav-t6 .ffl-code { font-size: 16px !important; padding-inline: 0.35rem !important; }
.nav-inner.ff-nav-t6 { gap: 4px !important; padding-inline: 6px !important; }
.nav-inner.ff-nav-t6 > * { margin-inline: 0 !important; }
.nav-inner.ff-nav-t6 > :first-child:not(.logo), .nav-inner.ff-nav-t6 > .logo + * { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t6 > button { padding-inline: 6px !important; min-width: 44px !important; gap: 0 !important; }
/* audit fix 13 (t442): until the language button is inserted, the theme button keeps its place, so Sample and the logo do not jump */
.nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: calc(0.8rem + 64px) !important; }
@media (max-width: 380px) { .nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: 46px !important; } }
/* F180: the site theme button is added by script. Hold its 44px slot so language and Menu do not jump when it arrives. */
header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.4rem) !important; }
@media (max-width: 380px) { header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.15rem) !important; } }

/* t444 F156/F175/F181: one-line titles, headings, labels and FAQ questions (i18n.js sets ff-1l; zoom to fit, 16px floor) */
.ff-1l { white-space: nowrap !important; text-wrap: nowrap !important; max-width: none !important; }