/**
 * Reference colors from google material. 000 to 999 format.
 *
 * https: //material.io/archive/guidelines/style/color.html#color-color-palette
 */
:root {

	--clr-white: #fff;

	/* google material 'Grey' */
	--clr-mono-050: #FAFAFA;
	--clr-mono-100: #F5F5F5;
	--clr-mono-200: #EEEEEE;
	--clr-mono-300: #E0E0E0;
	--clr-mono-400: #BDBDBD;
	--clr-mono-500: #9E9E9E;
	--clr-mono-600: #757575;
	--clr-mono-700: #616161;
	--clr-mono-750: #565656;
	--clr-mono-800: #424242;
	--clr-mono-850: #303030;
	--clr-mono-900: #212121;
	--clr-mono-950: #171717;
	--clr-mono-990: #0D0D0D;

	/* google material 'Blue' */
	--clr-prime-050: #E3F2FD;
	--clr-prime-100: #BBDEFB;
	--clr-prime-200: #90CAF9;
	--clr-prime-300: #64B5F6;
	--clr-prime-400: #42A5F5;
	--clr-prime-500: #2196F3;
	--clr-prime-600: #1E88E5;
	--clr-prime-700: #1976D2;
	--clr-prime-800: #1565C0;
	--clr-prime-900: #0D47A1;

	--clr-prime-A100: hsl(217, 100%, 75%);
	--clr-prime-A200: #448AFF;
	--clr-prime-A400: #2979FF;
	--clr-prime-A700: #2962FF;

	--clr-red: rgb(255, 32, 32);
	--clr-green: rgb(0, 180, 0);
}
/**
 * Application colors
 * Based on 10..90 emphasis levels. 
 * 50 is the default, and not suffixed.
 */
:root {

	/* #region    Text Colors */
	--txt-20: var(--clr-mono-600);
	--txt-30: var(--clr-mono-700);
	--txt-40: var(--clr-mono-800);
	--txt-50: var(--clr-mono-850);
	--txt-60: var(--clr-mono-900);
	--txt-70: var(--clr-mono-950);

	--txt: var(--txt-50);

	--txt-red: rgb(255, 92, 92);

	--txt-title: var(--clr-mono-200);
	--txt-link: var(--clr-prime-A700);
	--txt-prime: var(--clr-prime-500);
	/* #endregion Text Colors */

	/* #region    Ico Colors */
	--ico-30: var(--clr-mono-900);
	--ico-40: var(--clr-mono-750);
	--ico: var(--clr-mono-700);
	--ico-60: var(--clr-mono-500);
	--ico-70: var(--clr-mono-500);

	--ico-prime: var(--clr-prime-400);
	/* #endregion Ico Colors */

	/* #region    Border Colors */
	--bdr-40: var(--clr-mono-900);
	--bdr: var(--clr-mono-850);
	--bdr-60: var(--clr-mono-800);
	--bdr-70: var(--clr-mono-700);

	--bdr-sel: var(--clr-prime-500);
	/* #endregion Border Colors */

	/* #region    Backbround Colors */
	--bkg-20: var(--clr-mono-990);
	--bkg-30: var(--clr-mono-950);
	--bkg-40: var(--clr-mono-900);
	--bkg: var(--clr-mono-850);
	--bkg-60: var(--clr-mono-800);
	--bkg-70: var(--clr-mono-700);

	--bkg-hover: var(--clr-mono-700);

	--bkg-sel: var(--bkg-60);
	--bkg-pressed: var(--clr-mono-600);

	--bkg-app: var(--bkg-20);
	/* #endregion Backbround Colors */
}
:root {
  font: 16px; 
}
* {
  box-sizing: border-box;
  /* good best practice for application */
  /* To allow flex/grid box to shrink smaller than content. 
		Need to be set to all because of nested issue
		see: https://stackoverflow.com/a/36247448/686724 */
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;

  /* font smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  color: var(--txt-70);
}
s-header {
  grid-column: 1 / 3;
}
h2, h3, h4 {
  padding: 2rem 0 1rem 0;
  color: var(--txt-40);
}
ul {
  padding: .5rem 0 1rem 3rem;
}
p {
  padding: .5rem 0;
    line-height: 1.5;
}
pre {
  margin: 1rem 0;
}
pre code {
    font-size: 1.125rem;
    line-height: 1.5em;
  }
s-header {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 2rem;
  padding: 0 1rem;
  align-items: center;
  border-bottom: solid 1px var(--clr-bdr-400);
}
s-header h1 {
    font-size: 1.5rem;
    font-weight: 400;
  }
s-header h2 {
    font-size: 1.2rem;
    font-weight: 300;
  }
s-nav{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-right: solid 1px var(--clr-bdr-400);
  height: 60rem;
}
s-nav a {
    display: block;
    padding: .5rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--clr-txt-400);
    letter-spacing: 0.01em;
    font-weight: 500;
  }
s-nav a.sel {
    background: var(--clr-bkg-sel);
    color: var(--clr-txt-sel);
    font-weight: 600;
  }
s-content {
  margin: 1rem 2rem;
  overflow: auto;
  justify-self: center;
}
sui-main {
  display: flex;
}
sui-main h1, sui-main h3{ 
    margin: 1rem 0;
  }
sui-main pre {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    background: #f0f0f0;
    padding: 1rem;
    margin: 1rem 0;
    overflow: auto;
  }
sui-main pre code {
      color: #777;
    }
sui-main pre code span.tag {
        color: #336699;
      }
sui-main pre code span.attr {
        color: #22863a;
      }
sui-main .spec-view {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
sui-main .spec-view h1 {
      font-size: 1.5rem;
    }
sui-main .spec-view > section {
      flex: 1;
      display: grid;
      grid-auto-flow: column;
      grid-gap: 2rem;
    }
sui-main .spec-view > section>div.panel {
        max-width: 50rem;
      }
sui-main .spec-view > section>div.panel.w-med {
          width: 30rem;
        }
sui-main .spec-view > section>div.panel .item {
          margin-bottom: 2rem;
        }
sui-main .spec-view > section>div.panel .item.tall .result {
              height: 10rem;
              display: grid;
              grid-template-rows: 1fr;
            }
/* TODO - move to base or make it part d-ico */
d-ico svg.symbol {
  width: 100%;
  height: 100%;

}
/**
 * Resources: 
 *  - Google Materials Color: https://material.io/design/color/#tools-for-picking-colors
 **/
:root{

	/* google gray palette */
	--d-clr-gray-000: #FFFFFF;
	--d-clr-gray-050: #FAFAFA;
	--d-clr-gray-100: #F5F5F5;
	--d-clr-gray-200: #EEEEEE;
	--d-clr-gray-300: #E0E0E0;
	--d-clr-gray-400: #BDBDBD;
	--d-clr-gray-500: #9E9E9E;
	--d-clr-gray-600: #757575;
	--d-clr-gray-700: #616161;
	--d-clr-gray-800: #424242;
	--d-clr-gray-900: #212121;

	/* google material light blue palette */
	--d-clr-050: #E1F5FE;
	--d-clr-100: #B3E5FC;
	--d-clr-200: #81D4FA;
	--d-clr-300: #4FC3F7;
	--d-clr-400: #29B6F6;
	--d-clr-500: #03A9F4;
	--d-clr-600: #039BE5;
	--d-clr-700: #0288D1;
	--d-clr-800: #0277BD;
	--d-clr-900: #01579B;
	--d-clr-A100: #80D8FF;
	--d-clr-A200: #40C4FF;
	--d-clr-A400: #00B0FF;
	--d-clr-A700: #0091EA;

	--d-clr-prime: var(--d-clr-700);

	--d-field-bkg: var(--d-clr-gray-000);
	--d-field-bdr: #aaa;
	--d-field-bdr-focused: var(--d-clr-prime);
	--d-field-input: var(--d-clr-gray-900);
	--d-field-label: var(--d-clr-gray-700);
	--d-field-label-no-value: var(--d-clr-gray-500);
	--d-field-label-focused: var(--d-clr-800);
	--d-field-trail-text: var(--d-clr-gray-600);


	--d-field-choice-off-fill: var(--d-clr-gray-500);
	--d-field-choice-off-focus-fill: var(--d-clr-gray-700);
	--d-field-choice-on-fill: var(--d-clr-prime);
	--d-field-choice-on-focus-fill: var(--d-clr-600);

	--d-field-placholder-clr: var(--d-clr-gray-700);

	--d-select-option-ov-bkg: var(--d-clr-gray-100);
	--d-select-option-noval-clr: var(--d-clr-gray-600);


	/*#region    Layout */
	--d-field-v-padding: 1rem;
	/*#endregion Layout */
}
:root {
  --d-elev-01-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
      0px 1px 3px 0px rgba(0, 0, 0, 0.12);

  --d-elev-02-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
      0px 1px 5px 0px rgba(0, 0, 0, 0.12);

  --d-elev-03-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
      0px 3px 4px 0px rgba(0, 0, 0, 0.14),
      0px 1px 8px 0px rgba(0, 0, 0, 0.12);

  --d-elev-4:-shadow 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
      0px 1px 10px 0px rgba(0, 0, 0, 0.12);

  --d-elev-06-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
      0px 6px 10px 0px rgba(0, 0, 0, 0.14),
      0px 1px 18px 0px rgba(0, 0, 0, 0.12);

  --d-elev-08-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
      0px 8px 10px 1px rgba(0, 0, 0, 0.14),
      0px 3px 14px 2px rgba(0, 0, 0, 0.12);

  --d-elev-09-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
      0px 9px 12px 1px rgba(0, 0, 0, 0.14),
      0px 3px 16px 2px rgba(0, 0, 0, 0.12);

  --d-elev-10-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),
      0px 10px 14px 1px rgba(0, 0, 0, 0.14),
      0px 4px 18px 3px rgba(0, 0, 0, 0.12);

  --d-elev-12-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),
      0px 12px 17px 2px rgba(0, 0, 0, 0.14),
      0px 5px 22px 4px rgba(0, 0, 0, 0.12);

  --d-elev-16-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2),
      0px 16px 24px 2px rgba(0, 0, 0, 0.14),
      0px 6px 30px 5px rgba(0, 0, 0, 0.12);

  --d-elev-24-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),
      0px 24px 38px 3px rgba(0, 0, 0, 0.14),
      0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
d-input,
d-textarea,
d-select {
  position: relative;
  min-height: 3.25rem;
  display: grid;
  grid-template-rows: .5rem 1fr;
  grid-template-columns: var(--d-field-v-padding) 1fr var(--d-field-v-padding);
  align-items: stretch;
  /* #endregion label */
  /* #endregion label-trail */
  /* #endregion ctrl */
  /* #endregion text-trail */
  /* #endregion box */
  /* #endregion disabled */
}
d-input.d-focus,d-textarea.d-focus,d-select.d-focus{
    outline: none;
  }
d-input.d-focus::part(box), d-textarea.d-focus::part(box), d-select.d-focus::part(box) {
      border: solid 1px var(--d-field-bdr-focused);
    }
/* #region    label */
d-input [slot="label"],
  d-input [slot="label-trail"],
  d-textarea [slot="label"],
  d-textarea [slot="label-trail"],
  d-select [slot="label"],
  d-select [slot="label-trail"]{
    background: white;
    position: absolute;
    left: .5rem;
    padding: 0 .5rem;
    z-index: 12;
    /* need to fix that */
    display: inline-flex;
    font-size: .75rem;
    letter-spacing: .00929em;
    font-weight: 400;
    color: var(--d-field-label);
  }
d-input.no-value:not(.d-focus):not([placeholder]) [slot="label"],
  d-input.no-value:not(.d-focus):not([placeholder]) [slot="label"],
  d-textarea.no-value:not(.d-focus):not([placeholder]) [slot="label"],
  d-textarea.no-value:not(.d-focus):not([placeholder]) [slot="label"],
  d-select.no-value:not(.d-focus):not([placeholder]) [slot="label"],
  d-select.no-value:not(.d-focus):not([placeholder]) [slot="label"] {
    color: var(--d-field-label-no-value);
    background: none;
    grid-row: 2;
    grid-column: 2;
    position: relative;
    left: 0;
    padding: 0;
    display: flex;
    align-items: center;

    /* typo-input */
    color: var(--d-txt-input);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: .03125em;

    /* override */
    color: var(--d-field-label-no-value);
  }
d-input.no-value:not(.d-focus):not([placeholder]) [slot="label"], d-textarea.no-value:not(.d-focus):not([placeholder]) [slot="label"], d-select.no-value:not(.d-focus):not([placeholder]) [slot="label"] {
    align-self: flex-start;
    margin-top: 0.75rem;
  }
/* #region    label-trail */
d-input [slot="label-trail"], d-textarea [slot="label-trail"], d-select [slot="label-trail"] {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    height: .75rem;
    justify-self: end;
  }
/* #region    ctrl */
d-input::part(ctrl), d-textarea::part(ctrl), d-select::part(ctrl) {
    grid-row: 2;
    grid-column: 2;
    color: var(--d-field-input);
    box-shadow: none;
    background: none;
    outline: none;
    border: none;
    z-index: 2;

    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .03125em;

    font-family: 'Roboto', sans-serif;
  }
/* #region    common icons */
d-input [slot="icon-lead"],
  d-input [slot="icon-trail"],
  d-textarea [slot="icon-lead"],
  d-textarea [slot="icon-trail"],
  d-select [slot="icon-lead"],
  d-select [slot="icon-trail"] {
    grid-row: 2;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--d-field-bdr);
    place-self: center;
  }
/* #region    icon-lead */
d-input.has-icon-lead, d-textarea.has-icon-lead, d-select.has-icon-lead {
    grid-template-columns: 2.5rem 1fr var(--d-field-v-padding);
  }
/* #endregion common icons */
d-input [slot="icon-lead"],d-textarea [slot="icon-lead"],d-select [slot="icon-lead"]{
    grid-column: 1;
  }
/* #region    icon-trail */
d-input.has-icon-trail,d-textarea.has-icon-trail,d-select.has-icon-trail{
    grid-template-columns: var(--d-field-v-padding) 1fr 2.5rem;
  }
/* #endregion icon-lead */
d-input [slot="icon-trail"], d-textarea [slot="icon-trail"], d-select [slot="icon-trail"] {
    grid-column: 3;
  }
/* #region    text-trail */
d-input.has-text-trail, d-textarea.has-text-trail, d-select.has-text-trail {
    grid-template-columns: var(--d-field-v-padding) 1fr auto;
  }
/* #endregion icon-trail */
d-input [slot="text-trail"], d-textarea [slot="text-trail"], d-select [slot="text-trail"] {
    grid-row: 2;
    grid-column: 3;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    color: var(--d-field-trail-text);
  }
/* #region    box */
d-input::part(box),d-textarea::part(box),d-select::part(box){
    background: var(--d-field-bkg);
    grid-row: 2;
    grid-column: 1 / span 4;
    border: solid 1px var(--d-field-bdr);
    border-radius: 3px;
    z-index: 0;
  }
/* #region    disabled */
d-input[disabled], d-textarea[disabled], d-select[disabled] {
    opacity: .6;
    filter: grayscale(100%);
  }
/* #region    d-textarea specific */
d-textarea [slot="icon-lead"],
d-textarea [slot="icon-trail"] {
  margin-top: .75rem;
  align-self: flex-start;
}
d-textarea::part(ctrl) {
  grid-column: 2 / 4;
  padding-top: .75rem;
}
/* #endregion d-textarea specific */
/* #region    d-select specific */
d-select {
  position: relative;
  cursor: pointer;
}
d-select > * {
  cursor: pointer;
}
d-select[disabled], d-select[readonly] {
  cursor: default;
}
d-select[disabled] > *, d-select[readonly] > * {
    cursor: default;
  }
d-select::part(ctrl) {
  display: flex;
  align-items: center;
}
d-select::part(placeholder) {
  opacity: .5;
}
d-select-popup {
  position: absolute;
  width: 30rem;
  height: 18rem;
  z-index: 100;

  background: #fff;
  box-shadow: var(--d-elev-03-shadow);
  border-radius: 5px;
}
/* #endregion d-select specific */
d-check, d-radio {
  display: grid;
  grid-template-columns: 1.5rem 0.5rem 1fr;
  grid-template-rows: 1.5rem;
  min-height: 1.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  line-height: 1;

}
d-check[disabled], d-radio[disabled] {
    opacity: .5;
    filter: grayscale(100%);
  }
d-check.no-label, d-radio.no-label {
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
d-check > [slot="visual"], d-radio > [slot="visual"] {
    grid-row: 1;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    align-self: center;
    fill: var(--d-field-choice-off-fill);
  }
d-check[checked] > [slot="visual"], d-radio[checked] > [slot="visual"] {
    fill: var(--d-field-choice-on-fill);
  }
d-check > [slot="label"], d-radio > [slot="label"] {
    background: none;
    padding-left: 0;
    left: 0;
    position: relative;
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    /* vertical center */
  }
d-check:focus, d-radio:focus {
      outline: none;
    }
d-check.d-focus > [slot="label"], d-radio.d-focus > [slot="label"] {
        font-weight: 600;
      }
d-check.d-focus > [slot="visual"], d-radio.d-focus > [slot="visual"] {
        fill: var(--d-field-choice-off-focus-fill);
      }
d-check.d-focus[checked] > [slot="visual"], d-radio.d-focus[checked] > [slot="visual"] {
        fill: var(--d-field-choice-on-focus-fill);
      }
* {
  -webkit-font-smoothing: antialiased;
  text-decoration: inherit;
  text-transform: inherit;
}
/* to move to s-components.pcss */
t-tag {
  color: var(--txt-prime);
  font-weight: 500;
  font-size: 1.125rem;
}
t-tag a {
    color: var(--txt-prime);
  }
body.home-page {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(20rem, 60rem) minmax(2rem, 1fr);

}
home-page { 
  grid-column: 2;
  display: grid;
  gap: 2;
}
home-page > header {
    padding: 5rem 0 5rem 0;
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 1rem;

  }
home-page > header h1 {
      padding: 0;
      margin: 0;
      font-size: 5rem;
      font-weight: 200;
      color: var(--txt-40);
    }
home-page > header h2 {
      padding: 0;
      margin: 0;
      color: var(--txt-30);
      text-transform: uppercase;
      font-weight: 400;
      font-size: 2rem;
    }
home-page > header h2 strong {
        font-weight: 600;
        font-size: 2.25rem;
      }
home-page section header {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--txt-50);
    font-weight: 500;
  }
home-page section header a {
      font-weight: 700;
    }
home-page section header strong{
      color: var(--txt-60);
      font-weight: 700;
    }
home-page section header small {
      color: var(--txt-40);
    }
body.ui-page {
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-rows: 4rem 1fr;
}

/*# sourceMappingURL=site-bundle.css.map */