:root {
  --fieldHeight: 24px;

  /* P3 wide gamut colors */
  --red:    color(display-p3 0.94 0.19 0.04);
  --yellow: color(display-p3 1 0.87 0.05);
  --blue:   rgb(3, 102, 214);
}
@supports not (color: color(display-p3 1 1 1)) {
  /* sRGB colors */
  :root {
    --red: #F03009;
    --yellow: #FFE310;
  }
}

* { margin:0; padding:0; font-synthesis: none; }
html { }
body {
  background-color: white;
  color:#111;
  font:11px serif;
  font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/
}
.robotoFont {
  font-family: "Roboto", serif;
}
.systemFont {
  font-family: system-ui,-system,-system-ui,-apple-system,sans-serif;
}
.de-emphasize {
  color:#555;
}
a {
  color:#2984AA;
  text-decoration:inherit;
  display:inline-block;
  padding:0 0.3em;
  margin:0 -0.3em;
  border-radius:5px;
}
a:hover { color:#30C2FF; }

p {
  padding: 24px;
  padding-top:12px;
}
h2 {
  font-weight:500;
  margin: 42px 18px 0 18px;
  padding: 6px;
}

i, cite, em, var, address, dfn {
  font-style: oblique;
}

label {
  display: block;
  margin: 2px 0;
}

input[type="number"] {
  width:50px;
  background: none;
  /*border: 1px solid rgba(0,0,0,0.2);*/
  border: none;
  padding: 4px;
  border-radius: 2px;
  background: white;
}

select {
  height: var(--fieldHeight);
  box-sizing: border-box;
  -webkit-appearance: none;
  border: none;
  padding: 4px 18px 4px 4px;
  border-radius: 2px;
  background: white;
  background-image: url(../res/icons/popup-black.svg);
  background-repeat: no-repeat;
  background-position: right center;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px black;
}

.options {
  width: 275px;
  box-sizing:border-box;
  position:fixed;
  top:0; right:0; bottom:0;
  background:#f4f4f4;
  padding: 24px;
  user-select:none; -moz-user-select: none; -webkit-user-select:none;
  font-family: sans-serif !important;
  overflow: auto;
  letter-spacing:0.012em;
}
.options > * {
  display: block;
  margin-bottom:10px;
  line-height: 18px;
}
  .options small {
    opacity: 0.6;
  }
  .options h3 {
    font-weight: 600;
    font-size: 12px;
    margin: 1rem 0 0.5rem 0;
  }
  .options input[type="radio"], .options input[type="checkbox"] {
    margin-right:4px;
  }
  .options .label-and-value {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    height: var(--fieldHeight);
  }
  .options .label-and-value span {
    /*flex: 1 1 auto;*/
    /*background:salmon;*/
    text-align: left;
    margin-right:6px;
    width:90px;
  }
  .options .label-and-value input {
    width: 50px;
    max-height: var(--fieldHeight);
    box-sizing: border-box;
  }
  .options select {
    min-width:50px;
    max-width:130px;
  }
  .options select[name="sample"] {
    width:225px;
  }
  .options label.rasterizePhrase {
    margin-left:20px;
    margin-bottom:20px;
  }
  .options label.rasterizePhrase input {
    width:100%;
  }
  .options label.style {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .options input[type="checkbox"] + * {
    user-select: none; -moz-user-select: none; -webkit-user-select:none;
  }
  .options .varfontControl {
    display: none;
  }
  body.varfont .options .varfontControl {
    display: block;
  }
  .options .varfontControl .label-and-value {
    display: flex;
  }
  .options .varfontControl .label-and-value > span {
    padding-left: 10px;
    width: 80px;
    flex: 0 0 auto;
  }
  .options .varfontControl input[type="range"] {
    flex: 1 1 auto;
  }
  .options .varfontControl input[type="number"] {
    flex: 0 1 auto;
    width: 35px;
    border: none;
    padding: 0;
    margin-left: 4px;
  }
  body.varfont .options select[name="weight"] {
    pointer-events: none;
    opacity: 0.4;
  }
  .options .label-and-value input + note,
  .options .label-and-value select + note {
    display: flex;
    align-items: center;
    height: var(--fieldHeight);
    line-height: var(--fieldHeight);
    margin-left: 0.5em;
    user-select: none; -webkit-user-select: none; -moz-user-select:none;
    color: rgba(0,0,0,0.4);
  }
  .options .label-and-value input + note .unit,
  .options .label-and-value select + note .unit {
    flex: 0 0 auto;
    display:flex;
    width: 18px;
  }


.img-button {
  display: inline-block;
  width: var(--fieldHeight);
  height:var(--fieldHeight);
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 3px;
  opacity: 0.8;
  outline: none;
}
.img-button:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.1);
}
.img-button:hover:active {
  opacity: 1;
  background-color: rgba(0,0,0,0.2);
}
.img-button:focus {
  box-shadow: 0 0 0 2px black;
}

.checkbox-group label {
  margin: 0;
}

.preview {
  display:flex;
  margin-right:275px; /*width of options sidebar*/
  overflow: auto;
}

samples, boxes {
  display:flex;
}

/*samples { background: rgba(255,0,255,0.4); } sample { background: rgba(100,100,255,0.4); }*/
samples {
  display: flex;
  width: 100%;
}
body.italic samples {
  font-style: italic;
}
  sample {
    margin: 0;
    /*white-space: pre;*/
    padding: 2rem;
    min-width:100px;
    /*max-width:450px;*/
    white-space: pre-wrap;
    outline: none;
    overflow-wrap: break-word;
    color:black;
  }
    sample p {
      white-space: pre-wrap;
    }
    sample :focus {
      outline: 2px solid #30C2FF;
    }
    sample .glyphlist {
      display: flex;
      flex-wrap: wrap;
      letter-spacing:0;
      line-height: normal;
    }
      sample .glyphlist g {
        margin:1px;
        background:#f9f9f9;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow:hidden;
        width:2em;
        height:2em;
        page-break-inside: avoid; break-inside: avoid;
        border-radius: 2px;
      }
      sample .glyphlist g span.glyph {
        flex: 1 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        /*margin-top:16px;*/
        /*background:salmon;*/
        font-feature-settings: normal !important;
      }
      sample .glyphlist g span.name {
        /*background:lightblue;*/
        text-align: center;
        flex: 0 0 auto;
        font-size:9px;
        color: rgba(0,0,0,0.3);
        font-weight: 400;
        padding-bottom:2px;
        /*height: 16px;*/
      }
      sample .glyphlist.hideNames g span.name {
        display:none;
      }

body.inverted-colors {
  background: #020202;
}
body.inverted-colors sample {
  color: white;
}

body.secondarySampleDisabled .showOnlyWithSecondarySample {
  display: none;
}

body.font-weight-400 b {
  font-weight: 500;
}
body.font-weight-500 b {
  font-weight: 700;
}
body.font-weight-700 b {
  font-weight: 500;
}

boxes {
  margin:12px;
  margin-bottom:0;
}
  sep, box {
    display:inline-block;
    height:24px;
  }
  sep {
    width:1px;
    background:rgba(0,0,0,0.1);
    margin:12px 0 12px 12px;
  }
  box {
    display:inline-block;
    background:#222;
    color:white;
    line-height:24px;
    padding:0 12px;
    margin:12px 0 0 12px;
    min-width:100px;
    border-top: 8px solid rgba(255,30,0,0.1);
    border-bottom: 8px solid rgba(255,30,0,0.1);
    box-sizing: border-box;
    outline: none;
  }
  box span {
    display: block;
    margin: -8px 0;
  }
  box.positive {
    background:#eee;
    color:black;
  }
  box.centered {
    text-align:center;
  }
  box.tight {
    display: flex;
    align-items: center;
    line-height: normal;
    border-color:rgba(0,30,255,0.1);
  }
  box.tight span {
    margin:0;
    display:inline-block;
    background:rgba(30,255,30,0.1);;
  }


canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+ */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: crisp-edges;               /* Possible future browsers. */
  -ms-interpolation-mode: nearest-neighbor;   /* IE (non standard naming) */
}

#renderCanvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
}

#displayCanvas {
  display: inline-block;
  vertical-align: top;
}

#measure {
  position:absolute;
  left:0; top:0;
  background:salmon;
  visibility:hidden;
  pointer-events:none;
}

@media print {
  .options { display:none; }
  .preview { margin:0; }
  boxes { display:none; }
  samples { padding:0; }
}