@charset "UTF-8";
/* ==========================================================================
   TWSS_styles_005.css - www.toptronicwebsites.com  (part 5: the FEATURES page,
   the layout half)
   Generated/Updated on: 2026-09-16T17:45:00+10:00
   Build Number: 005
   Version Number: (set manually by Jacques)

   © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this
   document may be reproduced, modified or stored in a retrieval system, or
   transmitted in any form or by any means, electronic, mechanical, photocopying,
   recording or otherwise, without the prior written permission of Toptronic
   Limited. For copyright inquiries: jacques@toptronic.com

   WHAT IS IT
     The look of the FEATURES page: the hero and its jump menu and progress
     line, then every demonstration block (the .ft-demo panel with its head,
     title, badge, sentence and stage), the moving pieces (carousel, scrolling
     window, reveal cards, counting numbers, meters), the media players (audio,
     video, speech) and the controls (buttons row and spinner, tabs, modal,
     toasts, tooltips, copy box, range slider, form fields, filter list).

   WHO READS THIS
     Jacques (hardware engineer, French), Ryan 14, Ava 9, students 15-20 and a
     Master's student. Every rule says WHAT IT IS / WHY / HOW in plain English.

   HOW IT STAYS HONEST
     This file loads AFTER files 001-004 on every page, so it must not restyle
     anything they own. Every rule starts with an ft- class from section 6 of
     the contract: no bare element selector, no borrowed class. Panels are DARK
     (--ink-2) with thin lines and generous space, the display font (Archivo)
     is used at weight 700 and only for headings, and every side is LOGICAL
     (inline-start / inline-end) so Arabic mirrors itself with no extra rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE DEMONSTRATION BLOCK (.ft-demo)
   Every demonstration is wrapped in one dark panel by P.demo(). The sections
   are light, so a dark panel reads as a device you look INTO, matching the
   dark hero and footer. The head holds the h3 title and the truth-telling
   badge; the text is one sentence; the stage holds the live thing.
   -------------------------------------------------------------------------- */
.ft-demo { background: var(--ink-2); border: 1px solid var(--line-dk); border-radius: var(--r-3); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sh-1); color: var(--text-dk); }
.ft-demo + .ft-demo { margin-block-start: clamp(28px, 4vw, 48px); }
.ft-demo__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ft-demo__title { font: 700 var(--fs-h3)/1.2 var(--font-display); color: var(--text-dk); letter-spacing: -.01em; }
.ft-demo__head .ft-badge { margin-inline-start: auto; }
.ft-demo__text { font: 400 var(--fs-small)/1.7 var(--font-text); color: var(--muted-dk); margin-block-start: var(--sp-2); max-inline-size: 62ch; }
.ft-demo__stage { margin-block-start: var(--sp-5); }
/* The badge: a small pill that tells the truth about one block ("Live on this
   page" or "Layout demo"). --soft is the quiet version used inside a row. */
.ft-badge { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--line-dk-2); border-radius: var(--r-pill); background: var(--ink-3); font: 700 var(--fs-micro)/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dk); }
.ft-badge--soft { background: transparent; color: var(--muted-dk); }
/* Ghost buttons (file 002) inside a dark panel need the dark-friendly edge;
   the global focus outline needs the light blue so it shows on the panel. */
.ft-demo .btn--ghost { border-color: rgba(244, 246, 250, .30); color: var(--text-dk); }
.ft-demo .btn--ghost:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.ft-demo :focus-visible { outline-color: var(--brand-hi); }

/* --------------------------------------------------------------------------
   2. THE HERO: THE JUMP MENU AND THE READING-PROGRESS LINE
   The hero is light. The jump menu is the row of round links to each section.
   The progress line (ft-pagebar) is a 3 px bar fixed to the very top that
   grows as you read; the inner <span> is the fill, sized by JavaScript.
   -------------------------------------------------------------------------- */
.ft-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line); }
.ft-jump__link { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font: 600 var(--fs-small) var(--font-text); color: var(--muted); text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
.ft-jump__link:hover { border-color: var(--brand); color: var(--brand); }
.ft-pagebar { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: var(--z-overlay); pointer-events: none; }
.ft-pagebar span { display: block; block-size: 100%; inline-size: 0; background: var(--grad-brand); }

/* --------------------------------------------------------------------------
   3. THE CAROUSEL
   One slide at a time. The track is a row of full-width slides that JavaScript
   slides sideways with translateX; overflow:hidden on the track is the window
   that shows only one slide.
   -------------------------------------------------------------------------- */
.ft-carousel__track { list-style: none; margin: 0; padding: 0; display: flex; overflow: hidden; border: 1px solid var(--line-dk); border-radius: var(--r-3); background: var(--ink); transition: transform var(--t-slow) var(--ease); }
.ft-slide { flex: 0 0 100%; min-inline-size: 0; }
.ft-slide__fig { margin: 0; position: relative; }
.ft-slide__fig .ft-art { inline-size: 100%; block-size: auto; display: block; }
.ft-slide__cap { padding: var(--sp-4) var(--sp-5); border-block-start: 1px solid var(--line-dk); font: 500 var(--fs-small)/1.5 var(--font-text); color: var(--muted-dk); text-align: start; }
.ft-carousel__ui { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.ft-cbtn { inline-size: 44px; block-size: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-dk-2); border-radius: 50%; background: var(--ink); color: var(--text-dk); cursor: pointer; position: relative; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.ft-cbtn:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
/* The chevron is drawn with two borders (our fonts hold no arrow). The two
   carousel arrows carry only ids, so we tell them apart by position: the 1st
   button is Previous, the 2nd is Next. */
.ft-carousel__ui .ft-cbtn::before { content: ""; inline-size: 9px; block-size: 9px; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; }
.ft-carousel__ui .ft-cbtn:nth-of-type(1)::before { transform: rotate(-45deg); }
.ft-carousel__ui .ft-cbtn:nth-of-type(2)::before { transform: rotate(135deg); }
.ft-cbtn--text { inline-size: auto; block-size: auto; padding: 8px 14px; border-radius: var(--r-pill); background: none; font: 600 var(--fs-small) var(--font-text); }
.ft-cbtn--text::before { content: none; }
/* The dots: one small button per slide, filled by JavaScript. The active one
   (is-active or aria-current) is brighter and a touch bigger. */
.ft-dots { display: flex; gap: 8px; }
.ft-dots button { inline-size: 10px; block-size: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line-dk-2); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.ft-dots button.is-active, .ft-dots button[aria-current="true"] { background: var(--signal); transform: scale(1.35); }

/* --------------------------------------------------------------------------
   4. THE SCROLLING WINDOW (up-and-down)
   A fixed-height box that scrolls INSIDE itself, so the page stays still while
   the tall text is read. The up/down buttons move it 140 px; "Back to top" (a
   file-002 .btn) scrolls the whole page.
   -------------------------------------------------------------------------- */
/* The window is deliberately SHORTER than the three paragraphs inside it, or the
   "up and down scrolling" demonstration would have nothing to scroll: measured
   at 258 px of content, so the window is 170 px (leader's fix, session 0098). */
.ft-scroller__view { block-size: 170px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-dk); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); background: var(--ink); color: var(--text-dk); scrollbar-width: thin; scrollbar-color: var(--line-dk-2) transparent; }
.ft-scroller__view p { max-inline-size: 60ch; }
.ft-scroller__view p + p { margin-block-start: var(--sp-3); }
.ft-scroller__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-3); }
/* Up is the 1st button, down the 2nd (told apart by position). Vertical arrows
   point up and down, so they need no Arabic flip. */
.ft-scroller__nav .ft-cbtn::before { content: ""; inline-size: 9px; block-size: 9px; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; }
.ft-scroller__nav .ft-cbtn:nth-of-type(1)::before { transform: rotate(225deg); }
.ft-scroller__nav .ft-cbtn:nth-of-type(2)::before { transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   5. THE REVEAL CARDS
   Four cards that fade and rise into view on scroll. The hidden start state is
   guarded by the page's ".js" class (the same fail-soft trick file 003 uses):
   with JavaScript off, the cards are simply always visible.
   -------------------------------------------------------------------------- */
.ft-reveal-grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 600px) { .ft-reveal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ft-reveal-grid { grid-template-columns: repeat(4, 1fr); } }
.ft-reveal-card { position: relative; border: 1px solid var(--line-dk); border-radius: var(--r-3); background: var(--ink-3); padding: clamp(18px, 2.4vw, 24px); overflow: hidden; }
.ft-reveal-card .ft-art { inline-size: 100%; block-size: auto; display: block; }
.ft-reveal__num { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 1px solid var(--line-dk-2); font: 700 var(--fs-small) var(--font-display); color: var(--brand-hi); }
.js .ft-reveal-card { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .ft-reveal-card.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   6. THE COUNTING NUMBERS
   Three facts (9 languages, 14 live sites, 0 frameworks) that count up in
   view. The big number and signal dash copy the site's stat look.
   -------------------------------------------------------------------------- */
.ft-counts { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); }
.ft-count { min-inline-size: 120px; }
.ft-count__num { display: block; font: 700 var(--fs-stat)/1 var(--font-display); color: var(--text-dk); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ft-count__num::before { content: ""; display: block; inline-size: 24px; block-size: 2px; margin-block-end: 14px; background: var(--signal); }
.ft-count__label { display: block; margin-block-start: 6px; font: 500 .8125rem/1.5 var(--font-text); color: var(--muted-dk); }

/* --------------------------------------------------------------------------
   7. THE METERS (progress bars)
   Each meter is a label, a bar and the percentage. The fill grows to its
   data-val per cent in view; the script sets the width, this file paints it.
   -------------------------------------------------------------------------- */
.ft-meters { display: grid; gap: var(--sp-5); max-inline-size: 560px; }
.ft-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2) var(--sp-4); }
.ft-meter__label { grid-column: 1 / -1; font: 500 var(--fs-small) var(--font-text); color: var(--text-dk); }
.ft-meter__track { grid-column: 1; block-size: 8px; border-radius: var(--r-pill); background: var(--ink); border: 1px solid var(--line-dk); overflow: hidden; }
.ft-meter__fill { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--grad-brand); transition: width var(--t-slow) var(--ease), inline-size var(--t-slow) var(--ease); }
.ft-meter__pct { grid-column: 2; font: 700 var(--fs-small) var(--font-display); color: var(--teal); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. THE MEDIA PLAYERS (audio, video, speech)
   The audio player is one row: play button, seek bar, clock, volume. The video
   player stacks the video above a control bar. The speech block shows a
   sentence and a "Read aloud" button.
   -------------------------------------------------------------------------- */
.ft-player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--ink); border: 1px solid var(--line-dk); border-radius: var(--r-3); }
.ft-player audio { display: none; }
.ft-player--video { flex-direction: column; align-items: stretch; padding: 0; }
.ft-player--video video { inline-size: 100%; block-size: auto; display: block; border-radius: var(--r-3) var(--r-3) 0 0; background: #000; }
.ft-player__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.ft-player__btn { min-block-size: 44px; padding: 10px 18px; border: 1px solid var(--line-dk-2); border-radius: var(--r-pill); background: var(--ink); color: var(--text-dk); font: 600 var(--fs-small) var(--font-text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.ft-player__btn:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.ft-player__time { font: 500 var(--fs-small) var(--font-text); color: var(--muted-dk); font-variant-numeric: tabular-nums; min-inline-size: 3ch; }
/* The full-screen button has no word we can translate, so it is drawn as a
   small square "window" frame. It is the 2nd button in the video control bar. */
.ft-player__bar .ft-player__btn:nth-of-type(2) { inline-size: 44px; block-size: 44px; flex: 0 0 auto; padding: 0; border-radius: var(--r-2); }
.ft-player__bar .ft-player__btn:nth-of-type(2)::before { content: ""; position: absolute; inset: 13px; border: 2px solid currentColor; border-radius: 2px; }
.ft-player .ft-player__seek { flex: 1 1 auto; min-inline-size: 120px; }
.ft-player .ft-player__vol { flex: 0 1 140px; min-inline-size: 80px; }
/* The sentence read aloud, set off as a quotation with a coloured rail on the
   inline-start edge (it swaps sides by itself in Arabic). */
.ft-speak__src { font: 400 var(--fs-lead)/1.6 var(--font-text); color: var(--text-dk); max-inline-size: var(--measure); padding: var(--sp-4) var(--sp-5); background: var(--ink); border-inline-start: 3px solid var(--brand-hi); border-radius: 0 var(--r-2) var(--r-2) 0; }
.ft-speak__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-4); }
/* The small honest note ("no speech", "nothing is sent"...). Hidden in the
   markup with the hidden attribute; shown by JavaScript when it has something
   real to say. */
.ft-note { font: 400 var(--fs-small)/1.6 var(--font-text); color: var(--muted-dk); margin-block-start: var(--sp-3); }

/* --------------------------------------------------------------------------
   9. THE BUTTON ROW AND THE SPINNER
   The buttons are file 002's .btn classes; we add nothing to them. The only
   new thing is the spinner that sits inside the busy button, a ring that turns.
   -------------------------------------------------------------------------- */
.ft-spinner { inline-size: 16px; block-size: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(244, 246, 250, .30); border-block-start-color: currentColor; animation: twss-spin 700ms linear infinite; }
@keyframes twss-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   10. THE TABS
   A row of tab buttons with the chosen one lit; the panels switch with
   JavaScript. The active tab is marked aria-selected="true".
   -------------------------------------------------------------------------- */
.ft-tabs__list { display: flex; flex-wrap: wrap; gap: 6px; border-block-end: 1px solid var(--line-dk); }
.ft-tab { position: relative; padding: 10px 18px; border: 0; background: none; color: var(--muted-dk); font: 600 var(--fs-small) var(--font-text); cursor: pointer; border-radius: var(--r-pill) var(--r-pill) 0 0; transition: color var(--t-fast), background var(--t-fast); }
.ft-tab:hover { color: var(--text-dk); }
.ft-tab[aria-selected="true"] { color: var(--text-dk); background: var(--ink); }
.ft-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--signal); }
.ft-panel { padding-block: var(--sp-5); }
.ft-panel .p { color: var(--muted-dk); }

/* --------------------------------------------------------------------------
   11. THE MODAL (a <dialog>)
   A small window over the page. <dialog> brings its own top-layer, centring and
   Escape-key handling; we only paint it and its dimmed backdrop. Without
   <dialog> support the button does nothing and the panel stays in the page.
   -------------------------------------------------------------------------- */
.ft-modal { border: 1px solid var(--line-dk-2); border-radius: var(--r-3); background: var(--ink-2); color: var(--text-dk); padding: clamp(24px, 3vw, 36px); max-inline-size: 480px; inline-size: calc(100vw - 40px); box-shadow: var(--sh-3); }
.ft-modal::backdrop { background: rgba(0, 0, 0, .60); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ft-modal .h3 { color: var(--text-dk); margin-block-end: var(--sp-3); }
.ft-modal .p { color: var(--muted-dk); margin-block-end: var(--sp-5); }

/* --------------------------------------------------------------------------
   12. THE TOASTS
   Small messages that appear at a screen corner and fade away. The container is
   fixed; each message is a dark pill. The script shows at most three.
   -------------------------------------------------------------------------- */
.ft-toasts { position: fixed; inset-block-end: var(--sp-6); inset-inline-end: var(--sp-5); z-index: var(--z-overlay); display: flex; flex-direction: column; gap: var(--sp-2); max-inline-size: min(360px, calc(100vw - 32px)); pointer-events: none; }
.ft-toast { padding: 12px 18px; border-radius: var(--r-2); background: var(--ink-3); border: 1px solid var(--line-dk-2); color: var(--text-dk); font: 500 var(--fs-small)/1.5 var(--font-text); box-shadow: var(--sh-2); animation: twss-toast-in var(--t-med) var(--ease) both; }
@keyframes twss-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   13. THE TOOLTIPS
   A word to hover (or Tab to) for an explanation. The words live in the data-tip
   attribute (filled by JavaScript, never typed into the markup); the bubble is
   drawn with ::after and content: attr(data-tip).
   -------------------------------------------------------------------------- */
.ft-tips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ft-tip { position: relative; cursor: help; font: 500 var(--fs-small) var(--font-text); color: var(--text-dk); padding-block-end: 2px; border-block-end: 1px dashed var(--line-dk-2); }
.ft-tip::after { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 0; inline-size: max-content; max-inline-size: 260px; padding: 8px 12px; border-radius: var(--r-2); background: var(--ink); border: 1px solid var(--line-dk-2); color: var(--text-dk); font: 400 var(--fs-micro)/1.5 var(--font-text); box-shadow: var(--sh-2); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ft-tip:hover::after, .ft-tip:focus-visible::after { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   14. THE COPY BOX
   A code value with a Copy button; the script shows the little "Copied" note
   for two seconds after the copy.
   -------------------------------------------------------------------------- */
.ft-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ft-copy__val { font: 600 var(--fs-small)/1.4 var(--font-text); letter-spacing: .04em; color: var(--text-dk); background: var(--ink); border: 1px solid var(--line-dk); border-radius: var(--r-2); padding: 12px 16px; }
.ft-copy__done { font: 500 var(--fs-micro) var(--font-text); letter-spacing: .06em; color: var(--teal); }

/* --------------------------------------------------------------------------
   15. THE RANGE SLIDER (with a live value)
   Label, slider and the big output figure that follows the handle. The three
   sliders on the page (this one and the two player sliders) share one track
   and handle look.
   -------------------------------------------------------------------------- */
.ft-range { display: grid; gap: var(--sp-2); max-inline-size: 460px; }
.ft-range__label { font: 500 .875rem var(--font-text); color: var(--text-dk); }
.ft-range__out { font: 700 var(--fs-h4)/1 var(--font-display); color: var(--teal); font-variant-numeric: tabular-nums; margin-block-start: var(--sp-2); }
/* appearance:none removes the browser's own picture so we can draw a consistent
   track and handle in Chrome, Firefox and Safari. */
.ft-range__input, .ft-player__seek, .ft-player__vol { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 24px; background: transparent; cursor: pointer; }
.ft-range__input::-webkit-slider-runnable-track, .ft-player__seek::-webkit-slider-runnable-track, .ft-player__vol::-webkit-slider-runnable-track { block-size: 6px; border-radius: var(--r-pill); background: var(--line-dk-2); }
.ft-range__input::-webkit-slider-thumb, .ft-player__seek::-webkit-slider-thumb, .ft-player__vol::-webkit-slider-thumb { -webkit-appearance: none; block-size: 20px; inline-size: 20px; border-radius: 50%; margin-block-start: -7px; background: var(--text-dk); border: 2px solid var(--brand-hi); }
.ft-range__input::-moz-range-track, .ft-player__seek::-moz-range-track, .ft-player__vol::-moz-range-track { block-size: 6px; border-radius: var(--r-pill); background: var(--line-dk-2); }
.ft-range__input::-moz-range-thumb, .ft-player__seek::-moz-range-thumb, .ft-player__vol::-moz-range-thumb { block-size: 16px; inline-size: 16px; border-radius: 50%; background: var(--text-dk); border: 2px solid var(--brand-hi); }

/* --------------------------------------------------------------------------
   16. THE FORM FIELDS AND THE SWITCH
   One of every field the browser can draw, reusing the contact form's look
   (file 002): white fields, a measured grey-blue edge, brand-blue when focused,
   never under 48 px tall (an iOS phone zooms a page with a smaller field).
   -------------------------------------------------------------------------- */
.ft-form { display: grid; gap: var(--sp-5); max-inline-size: 620px; }
.ft-field { display: grid; gap: 8px; }
.ft-field__label { font: 500 .875rem var(--font-text); color: var(--text-dk); }
.ft-field__input, .ft-field select, .ft-field textarea { inline-size: 100%; min-block-size: 48px; padding: 13px 15px; border: 1px solid var(--line-field); border-radius: var(--r-2); background: var(--paper-2); color: var(--text); font: 400 1rem/1.5 var(--font-text); }
.ft-field textarea { min-block-size: 130px; resize: vertical; }
.ft-field__input:focus, .ft-field select:focus, .ft-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.ft-field input[type="color"] { inline-size: 60px; padding: 4px; }
.ft-field input[type="file"] { padding: 10px 12px; }
/* The switch: a checkbox drawn as a sliding pill. The knob uses inset-inline-start
   so it slides to the far end in both left-to-right and Arabic. */
.ft-switch { -webkit-appearance: none; appearance: none; inline-size: 46px; block-size: 26px; border-radius: var(--r-pill); background: var(--line-dk-2); position: relative; cursor: pointer; transition: background var(--t-fast); }
.ft-switch::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--text-dk); transition: inset-inline-start var(--t-fast) var(--ease); }
.ft-switch:checked { background: var(--brand-hi); }
.ft-switch:checked::before { inset-inline-start: calc(100% - 23px); }
.ft-switch:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   17. THE INSTANT FILTER LIST
   A search box that filters a scrolling list of 250 real countries as the
   visitor types. Each row is a tiny flag and the country's name.
   -------------------------------------------------------------------------- */
.ft-filter { display: grid; gap: var(--sp-3); max-inline-size: 520px; }
.ft-filter__input { inline-size: 100%; min-block-size: 48px; padding: 13px 15px; border: 1px solid var(--line-field); border-radius: var(--r-2); background: var(--paper-2); color: var(--text); font: 400 1rem/1.5 var(--font-text); }
.ft-filter__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.ft-filter__input::placeholder { color: var(--muted); opacity: 1; }
.ft-filter__count { font: 500 var(--fs-micro) var(--font-text); color: var(--muted-dk); }
.ft-filter__list { list-style: none; margin: 0; padding: 0; max-block-size: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-dk); border-radius: var(--r-2); background: var(--ink); scrollbar-width: thin; scrollbar-color: var(--line-dk-2) transparent; }
.ft-filter__row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; border-block-end: 1px solid var(--line-dk); color: var(--text-dk); font: 400 var(--fs-small)/1.4 var(--font-text); }
.ft-filter__row:last-child { border-block-end: 0; }
.ft-filter__row:hover { background: rgba(244, 246, 250, .06); }
.ft-filter__flag { inline-size: 21px; block-size: 14px; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(244, 246, 250, .40); border-radius: 2px; }
.ft-filter__none { font: 400 var(--fs-small)/1.6 var(--font-text); color: var(--muted-dk); }

/* --------------------------------------------------------------------------
   18. LESS MOVEMENT
   For a visitor who asked for less motion, the reveal cards, carousel and
   spinner give up their movement and simply appear. (File 003 already shortens
   every transition site-wide; this says the same for the new moving pieces.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .ft-reveal-card { opacity: 1; transform: none; }
  .ft-carousel__track { transition: none; }
  .ft-spinner { animation: none; }
}

/* End of TWSS_styles_005.css - the layout half of the Features page. */