/* The page's scale (D117, the owner, 27-Oct-2026): the app is drawn at 80% of what it was, as if the browser were at
   zoom 80% when it is at 100% (the owner first asked for 90%, then for 80%, the same day). ONE number does it, and it is the next line.

   To go back to the old size, change .8 to 1 (nothing else): every size below is written so that at 1 it is
   exactly what the page was before this file.

   How: the whole page is written in rem (type scale, spacing, header, rail, dialogs), so the root font size is the
   only thing that moves, the same way the A- / A / A+ buttons (D74) already move it. CSS `zoom` was not used on
   purpose: it makes getBoundingClientRect, clientX and the canvas sizes disagree with each other, which breaks the
   charts' hover, every drag and resize, and puts 100dvh off by the zoom. The browser's own zoom and the A- / A+
   buttons still work on top of this, and multiply with it.

   This file is frontend/ext/ui-scale.css and is linked by BOTH front ends (the legacy page and /app/). It is
   linked in the head, and every selector below is written html:root... (one step more specific than the page's own
   :root and body rules) so that it wins whichever order the stylesheets arrive in. */
:root{--ui-scale:.8}

html:root{font-size:calc(var(--ui-scale) * 100%)}
html:root[data-textsize="small"]{font-size:calc(var(--ui-scale) * 90%)}
html:root[data-textsize="large"]{font-size:calc(var(--ui-scale) * 120%)}

/* Reading size keeps a floor. At .8 the body (.875rem) would be 11.2px; text people read must not go below about
   13px, and the smaller labels get a floor of their own. At --ui-scale:1 each floor is under the rem value, so
   nothing changes. A floor is in px on purpose: the browser's zoom still moves it. */
html:root{
  --t-eyebrow:max(.625rem,10px); --t-micro:max(.6875rem,11px); --t-cap:max(.75rem,12px);
  --t-sm:max(.8125rem,13px); --t-body:max(.875rem,13px);
}
html body{font-size:max(.875rem,13px)}
/* The two side columns are the only layout widths written in px as custom properties; they follow the scale. */
html:root{--rail-w:calc(220px * var(--ui-scale)); --ws-w:calc(290px * var(--ui-scale))}
/* The page also has about thirty text sizes written straight in rem (.74 to .79rem: developer controls, table cells,
   banners, form labels) and the same sizes inline in the markup it builds. At .8 they would be 9.5 to 10px, so they
   get the 12px floor too: one rule per kind, and none of them changes at --ui-scale:1 (16 x .74 is already 11.8). */
html .banner,html .banner.err,html .toggle,html .fkv dd{font-size:max(.79rem,12px)}
html .fbanner-b ul,html ul.fbanner-b{font-size:max(.78rem,12px)}
html .field>label,html .field>.flabel,html .ask-f label{font-size:max(.75rem,12px)}
html .opt{font-size:max(.74rem,12px)}
html .fcode{font-size:max(.72rem,12px)}
html .log{font-size:max(.76rem,12px)}
html .dax{font-size:max(.69rem,12px)}
html pre.json{font-size:max(.7rem,12px)}
[style*="font-size:.78rem"]{font-size:max(.78rem,12px)!important}
[style*="font-size:.72rem"]{font-size:max(.72rem,12px)!important}
@media (max-width:560px){   /* the phone rules that set these two smaller (.74rem and .78rem) */
  html .seg button{font-size:max(.74rem,12px)}
  html table{font-size:max(.78rem,12px)}
}
/* A standalone link that is a button (Use example) is under the 24px a touch target may be (WCAG 2.2, 2.5.8). */
html button.instr-ex{min-height:24px}

/* Print and an embedded dashboard stay at 100%: a sheet of paper is not a screen, and the page that embeds a
   dashboard chose the frame's size. (The embed class is added by the page as it opens /embed/<id>.) */
@media print{
  html:root{font-size:100%}
  html:root[data-textsize="small"]{font-size:90%}
  html:root[data-textsize="large"]{font-size:120%}
}
html.embed:root{font-size:100%}
html.embed:root[data-textsize="small"]{font-size:90%}
html.embed:root[data-textsize="large"]{font-size:120%}

/* A phone keeps real 44px touch targets for the primary controls (the sign-in and code steps, the account form, the
   language and link buttons). Their 2.75rem would be 35px at .8, so on a phone they are max(2.75rem, 44px): the same
   2.75rem at --ui-scale:1 (44px), and in px, so it is the finger that decides, not the scale. */
@media (max-width:560px){
  html .dg-login-card :is(button,input,select,a.btn),html .adm-field input,html .adm-submit,html .dg-login-submit,
  html .dg-login-lang,html .login-lang,html .adm-link,html .login-toggle{min-height:max(2.75rem,44px)}
  html .dg-login-lang,html .login-lang,html .dg-login-eye{min-width:max(2.75rem,44px)}
}

/* The command bar on a phone: its rows keep 48px (3rem at scale 1; the panel opens with a small scale-up, so 44px would measure under 44 mid-animation) and its input 44px touch targets and its input 16px text (so a phone does
   not zoom into the field on focus), in px, as above. Same values as the page's own rem at --ui-scale:1. */
@media (max-width:600px){
  html .dgx-cb-i{min-height:max(3rem,48px)}
  html .dgx-cb .dgx-cb-q{font-size:max(1rem,16px);height:max(3.2rem,44px)}
}

/* Phone form fields are at least 16px, so a phone does not zoom into the page on focus (at .8, 1rem is 12.8px).
   !important because the page sets its field sizes in many rules of unequal weight. Checkboxes, radios, ranges and
   file inputs have no text to zoom. */
@media (max-width:560px){
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
  html select,html textarea{font-size:max(1rem,16px)!important}
}