/* Artist Created (Update 248): the pricing calculators in the Studio frame, loaded last on /pricing/, /earning/year/,
   /earning/commission/, /earning/day-rate/ and /earning/licensing/ (after calc-look.css and artist.css).
   White field, off-white panels, hairlines, ink and grey; the result card stays ink with off-white words; the suggested
   price large in Cormorant; small labels in Jost capitals (Studio uses two families). Correction red only on the main
   action (Save into a work) and the +. Styles only: nothing here changes a sum. */
html,body,html.cl-on,html.cl-on body{background:#FFFFFF!important;color:var(--ink)}
.frame{border:0!important;max-width:none!important;margin:0!important}
#cf-art,#lc{--paper:#FFFFFF!important;--mist:#F4F4F2!important;--line:#E4E4E0!important;--ink:#1C1B18!important;--soft:#5C5C58!important;font-family:var(--sans)!important;color:var(--ink)}
#cf-art,#lc,#cf-art input,#lc input,#cf-art select,#lc select,#cf-art button,#lc button,#cf-art label,#lc label{font-family:var(--sans)!important}
#cf-art h1,#cf-art h2,#cf-art h3,#lc h1,#lc h2,#lc h3,.cl-h1{font-family:var(--serif)!important;font-weight:500!important;letter-spacing:0!important;color:var(--ink)}
#lc h2::after{display:none}
/* Small labels (once a monospace): Jost Medium, capitals, 0.12em, grey */
.cl-label,.cl-kicker,.cl-eyebrow,#cf-art .eyebrow,#cf-art .kicker,#lc .kicker,#cf-art .region legend,#cf-art .region > span,.cl-key b,.cl-unit{font-family:var(--sans)!important;font-weight:500!important;text-transform:uppercase;letter-spacing:.12em!important;color:var(--grey)}
/* Guides and notes: off-white panels, an ink rule, never gold, red or blue */
#cf-art .guide,#lc .nudge,.cl-guide,.cl-disc{background:var(--off-white)!important;border:0!important;border-left:2px solid var(--ink)!important;border-radius:0!important;color:var(--ink)}
/* Inputs, dropdowns, sliders, radios and ticks: square, hairlines, ink */
#cf-art input,#lc input,#cf-art select,#lc select{border:1px solid var(--line)!important;border-radius:0!important;background:#FFFFFF!important;color:var(--ink)!important}
#cf-art input[type=range],#lc input[type=range],#cf-art input[type=radio],#lc input[type=radio],#cf-art input[type=checkbox],#lc input[type=checkbox]{accent-color:var(--ink)!important}
#cf-art :focus-visible,#lc :focus-visible,.cl-cap:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px!important}
/* Choice capsules become square chips: selected ink, others a line */
.cl-cap,#cf-art .seg button,#lc .seg button,#lc .opt,#cf-art .opt{border-radius:0!important}
.cl-cap[aria-pressed=true],.cl-cap.on,#lc .opt.on,#cf-art .opt.on{background:var(--ink)!important;color:#FFFFFF!important;border-color:var(--ink)!important}
/* Buttons inside a calculator are secondary; the main action is Save, red */
#cf-art button:not(.cl-cap):not([aria-pressed=true]),#lc .btn,#lc button:not(.opt):not([aria-pressed=true]),.cl-aboutlink{background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--ink)!important;border-radius:0!important}
html.cl-on #studio-bar .sb-toggle,#studio-bar .sb-save,#studio-bar button[type=submit]{background:var(--red)!important;color:#FFFFFF!important;border-radius:0!important}
/* The result card: ink, off-white words, the price large in Cormorant; nothing red, gold or blue in it */
aside.results,.cl-result,#cf-art .result,#lc .result{border-radius:0!important}
aside.results *,.cl-result *{border-radius:0}
aside.results .big,.cl-result .big,#r-price,#cf-art .price,.cl-price{font-family:var(--serif)!important;font-weight:500!important}
aside.results [class*=warn],.cl-result [class*=warn],#r-verdict{color:var(--off-white)!important}
aside.results a,.cl-result a{color:var(--off-white)!important}
.cl-result .cl-aboutlink,aside.results .cl-aboutlink{background:transparent!important;color:var(--off-white)!important;border-color:var(--off-white)!important}
/* Phones: the calculators sit under the Studio chips and above the tab bar */
@media (max-width:1023px){html.ac-studio #cf-art,html.ac-studio #lc{padding-top:8px}}
/* Phones and tablets: the save bar sits above the tab bar, and the + floats above the save bar, so neither covers the other */
@media (max-width:1023px){
  html.cl-on #studio-bar{bottom:calc(61px + env(safe-area-inset-bottom,0px))!important}
  html.cl-on .ac-fab{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  html.ac-sidefixed .ac-side{margin-top:calc(64px + env(safe-area-inset-top,0px))}
}