/* clean-view.css — Clean/Cleanest View overlay for index-live.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-live.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: 24px; }
body.clean select             { font-size: 16px; padding: 6px 10px; }
body.clean .transcription-box { font-size: 20px; }
body.clean .audio-level-bar   { height: 12px; }