/* clean-view.css — Clean/Cleanest View overlay for index.html.
   ------------------------------------------------------------------------
   Three views, one mechanism:
     Settings View (advanced)  body class ""        — everything shown
     Clean View  (default)     body class "clean"   — [data-adv] hidden
     Cleanest View (embedded)  body class "clean cleanest" — +[data-cleanest]

   'cleanest' carries BOTH classes, so every body.clean rule (hides + sizing)
   applies there too; data-cleanest only adds the extra hides. Elements
   tagged data-clean appear whenever .clean is present (short plain-language
   labels that swap in for their technical counterparts).

   The original UI is never restyled — every rule is scoped to body.clean /
   body.cleanest. To change what a view shows, add or remove one attribute
   in index.html. No JS or CSS edits needed, and hidden controls keep
   their values/state (features keep working).                           */

body.clean [data-adv]         { display: none !important; }
body.cleanest [data-cleanest] { display: none !important; }
body:not(.clean) [data-clean] { display: none !important; }

/* larger, calmer defaults — fewer, bigger click targets
   (buttons keep the Settings-view size: bigger buttons overflow on narrow
   screens, and the fitBtn JS no longer has to fight this rule) */
body.clean              { font-size: 17px; }
body.clean .card        { padding: 22px; }
body.clean textarea     { font-size: 19px; height: 90px; }
body.clean select       { font-size: 16px; padding: 6px 10px; }
body.clean .io-label    { font-size: 17px; }
body.clean .seg-src     { font-size: 16px; }
body.clean .seg-bracket { font-size: 15px; }