/* @layer config { */
  :root {
    --color-text: #333;
    --color-text-invert: #f4f4f4;
    --color-bg:   #f4f4f4;
    --color-dim:   #ccc;
    --font: Arial,Helvetica,sans-serif;
    /* Use system UI font. */
    --font-italic: Verdana, serif;
    /* Remove this var completely if you don't care for pretty italics. */
    --font-mono: "lucida console", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --font-size: 100%;
    /* % ensures browser zoom is supported. */
    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --tracking: -0.006em;
    /* Reduce this to 0 if your font does not need adjustment. */
    --leading: 1.45;
    /* Standard leading for good legibility. Adjust this based on the font you are using if you decides to not use system UI font. */
    --gutter: clamp(1ch, 2.5vmax, 3ch);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --line-length: 75ch;
    --min-inline-size: 20ch;
    --page-padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2);

    --border-width: 1px;
    --border-style: solid;
    --border-color: #0008;
    --border-style-readonly: dashed;
    --border-radius: 2px;

    --ol-style-type: decimal;

    --bullet-hanging-offset: 1.1em;
    --quote-hanging-offset: -1ex;

  }

/* } */

/* @layer color { */
  :root {
    color:            var(--color-text);
    background-color: var(--color-bg);
    accent-color:     var(--color-text);
    color-scheme: light;
  }

  :where(a) {
    color: var(--color-primary, var(--color-text));
  }

  :where(button) {
    color: var(--color-bg);
    background-color: var(--color-primary, var(--color-text));
  }

  :where(input, textarea, select) {
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  :where(code) {
      color: #000;
      background-color: #eee;
  }

  @media (prefers-contrast: more) {
    :root {
      --color-text: black;
      --color-bg: white;
    }
  }
/*
  @media (prefers-color-scheme: dark) {
    :root,
    :root[data-theme="dark"] {
      --font-weight-regular: 300;
      / * Knockout text appears bolder, reduce weight to make body text more legible. * /
      --tracking: 0.006em;
      --color-text: #f4f4f4;
      --color-bg: #202020;
	  --color-dim:   #444;
      color-scheme: dark;
    }

    :where(input[type="checkbox"], input[type="radio"]) {
      accent-color: var(--color-bg);
    }

    :where( .custom-bg ) {
      background-color: #282828;
    }

    :where(code) {
      color: #fff;
      background-color: #111;
    }
  }
 */
  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root,
    :root[data-theme="dark"] {
      --color-text: white;
      --color-bg: black;
    }
  }
/* } */

/* @layer typography { */
  :root {
    font-size: clamp( var(--font-size), var(--font-size) * 0.8 + 0.25vi, var(--font-size) * 2 );
    font-family: var(--font);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading);
    letter-spacing: var(--tracking);

	  --section-spacing: clamp(var(--stack) * 4, 10vmax, var(--stack) * 6);
	  --pt-double-canon: 4.666rem;
	  --pt-canon: 3.999rem;
	  --pt-double-great-primer: 2.999rem;
	  --pt-double-english: 2.333rem;
	  --pt-double-pica: 2rem;
	  --pt-paragon: 1.666rem;
	  --pt-great-primer: 1.5rem;
	  --pt-english: 1.166rem;
	  --pt-pica: 1rem;
	  --pt-small-pica: 0.916rem;
	  --pt-long-primer: 0.833rem;
	  --pt-bourgeois: 0.75rem;
	  --pt-chu: 3.499rem;
	  --pt-xiaochu: 2.999rem;
	  --pt-yi: 2.166rem;
	  --pt-xiaoyi: 1.999rem;
	  --pt-er: 1.833rem;
	  --pt-xiaoer: 1.5rem;
	  --pt-san: 1.333rem;
	  --pt-xiaosan: 1.25rem;
	  --pt-si: 1.166rem;
	  --pt-xiaosi: 1rem;
	  --pt-wu: 0.875rem;
	  --pt-xiaowu: 0.75rem;

  }

  :where(button, select, input, textarea, a) {
    font: inherit;
    /* Reset font. */
  }

  :where(a) {
    text-decoration: underline;
	text-decoration-style: dotted;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2.5);
  }

  :where(a):hover {
	  text-decoration-style: solid;
  }

  :where(pre, code, kbd, dl, figcaption, abbr, table) {
    /*font-family: var(--font-mono);*/
    /* Differentiate preformatted, code, description, and table text from body text. */
  }

  :where(pre, code, kbd, dl, small, figcaption, table) {
    font-size: 0.8em;
    /* Make monospace and small text smaller than body text. */
  }

  :where(big) {
    font-size: 1.2em;
    /* <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. */
  }

  :where(pre code) {
    display: block;
    /* Define block code. */
    font-size: 1em;
    /* Prevent cascading. */
  }

  :where(blockquote, em, i, cite) {
    font-family: var(--font-italic, var(--font));
    /* Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. */
    font-weight: var(--font-weight-regular);
    /* Prevent italics to be bold. Bold italic is also ugly and unnecessary. */
  }

  :where(blockquote) {
    font-size: clamp(1.5rem, 1.25rem + 1vi, 3rem);
    letter-spacing: 0;
  }

  :where(blockquote p) {
    max-inline-size: 35ch;
  }

  :where(blockquote q)::before {
    position: absolute;
	margin-inline-start: var(--quote-hanging-offset);
  }

  :where(blockquote q q)::before {
    position: static;
	margin-inline-start: unset;
  }

  :where(strong, b, kbd, th, button) {
    font-weight: var(--font-weight-semibold);
    /* Make non-heading emphasized text less bold than heading text. */
  }

  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
    font-weight: var(--font-weight-bold);
    overflow-wrap: break-word;
	/*hyphens: auto;*/
  }

  :where(abbr) {
    text-decoration: underline;
	text-decoration-style: dotted;
    /* Differentiate abbreviaions from links. */
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(button, label, select, summary) {
    cursor: pointer;
  }

  :where(summary:hover > *) {
    text-decoration: underline;
    text-underline-offset: calc(var(--border-width) * 2);
  }

  :where(figcaption) {
    text-align: center;
  }

  :where(th) {
    text-align: start;
  }

  :where(th, td) {
    vertical-align: baseline;
  }

  :where(ol) {
    list-style-type: var(--ol-style-type);
  }

  :where(fieldset > ol) {
    list-style: none;
  }

  /* Chinese Typesetting */
  [lang^=zh-] {
    --font-italic: var(--font);
    --font-size: 90%;
    --font-weight-regular: 400;
    --tracking: 0;
    --leading: 1.6;
    --gutter: clamp(0.75rem, 2.5vmax, 1rem);
    --stack: clamp(0.75rem, 2.5vmax, 1rem);
    --line-length: 36rem;
    --min-inline-size: 10rem;
    --page-padding-inline: calc((100vi - min(var(--line-length), 90vi)) / 2);
    --ol-style-type: cjk-ideographic;
    --bullet-hanging-offset: 2em;
    --quote-hanging-offset: -2ex;
  }
/* } */

/* @layer spacing { */
  :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li) {
		margin-block-end: .5rem;
  }

  :where(h1, h2, h3, h4, h5, h6) {
	  font-family: Verdana,Geneva,sans-serif;
	margin-block-start: calc(var(--stack) * 1.75);
  }

  :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, [is-stack]) {
    margin-inline: 0;
	margin-block-start: 0;
  }

  :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, [is-stack]):first-child,
  :where(legend + *) {
	margin-block-start: 0;
  }

  :where(ul, ol) {
	padding-inline-start: var(--bullet-hanging-offset);
	margin-block-end: var(--stack);
  }

  :where(li > ul, li > ol) {
	margin-block-start: calc(var(--stack) / 5);
  }

  :where(details ul, details ol) {
	margin-inline-start: 4ch;
    /* Unify indent for all lists inside details. */
  }

  :where(table ul, table ol) {
	margin-inline-start: 2ch;
    /* Unify indent for all lists inside table. */
  }

  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
	margin-inline-start: 2.25ch;
    /* Unify indent for all nested lists. */
  }

  :where(li + li) {
	/*margin-block-start: calc(var(--stack) / 2);*/
  }

  :where(fieldset > ol li + li) {
	/*margin-block-start: calc(var(--stack) / 2);*/
  }

  :where(fieldset > ol) {
    margin-inline: 0;
  }

  :where(hr) {
	margin-block-start: calc(var(--stack) * 3);
	margin-block-end: calc(var(--stack) * 3);
  }

  :where(hr + *) {
	margin-block-start: 0;
  }

  :where(figure > img, table) {
    margin-inline: auto;
  }

  :where(blockquote > *) {
	margin-block-start: calc(var(--stack) / 4);
  }

  :where(blockquote:not(:last-child)) {
	padding-block-end: calc(var(--stack) / 2);
  }

  :where(button, dd, th, td, code, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea) {
    /* Unify inset spacing on bordered elements. */
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
  }

  :where(button) {
    padding-inline: var(--gutter);
    /* Give button more spacing. */
  }

  :where(kbd) {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 6);
  }

  :where(caption, figcaption) {
    padding-block: calc(var(--stack) / 2);
  }

  :where(pre) {
	padding-block-end: calc(var(--stack) / 2.5);
  }

  :where(pre code) {
    padding-block: var(--stack);
    padding-inline: var(--gutter);
  }

  details[open] summary + * {
	margin-block-start: calc(var(--stack) / 4);
  }
/* } */

/* @layer elements { */

  *,
  *::before,
  *::after {
    font-feature-settings: "kern";
	font-kerning: normal;
	    -moz-osx-font-smoothing: grayscale !important;
	    -webkit-font-smoothing: antialiased !important;
    box-sizing: border-box;
  }

  *:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text));
    outline-offset: calc(var(--border-width) * 2);
  }

  *:disabled {
    cursor: not-allowed;
  }

  *[readonly] {
    border-style: var(--border-style-readonly);
  }

  :where(button) {
    border: 0;
  }

  :where(kbd) {
    border: var(--border-width) solid;
  }

  :where(input, textarea, select, fieldset, dd) {
    border: var(--border-width) var(--border-style) var(--border-color);
    /* Unify border styles. */
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, fieldset, button, img, code, dd, table) {
    border-radius: var(--border-radius);
    /* Unify interactive elements border radius. */
  }

  :where(kbd) {
    border-radius: 0.3em;
  }

  :where(pre) {
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
  }

  :where(pre code) {
    max-block-size: 60vh;
    overflow: auto;
  }

  :where(dl) {
    display: grid;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
    align-items: baseline;
  }

  :where(dt) {
            border-block-end: var(--border-width) dotted;
  }

  :where(dd) {
    block-size: 100%;
            margin-inline-start: 0;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    display: block;
    inline-size: 100%;
  }

  :where(input[type="radio"], input[type="checkbox"]) {
    inline-size: 1.5ex;
    block-size: 1.5ex;
    vertical-align: baseline;
  }

  :where(input[type="file"]) {
    padding-inline: 0;
    border: 0;
  }

  ::-webkit-file-upload-button {
	appearance: button;
    cursor: pointer;
    font: inherit;
  }

  :where(select) {
            appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }

  :where(hr) {
    block-size: 0;
    border: 0;
	border-block-start: var(--border-width) var(--border-style) var(--color-dim);
  }

  :where(img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(figure) {
    overflow-x: auto;
  }

  :where(figure > img) {
    display: block;
  }

  :where(table) {
    caption-side: bottom;
  }

  :where(tr > *:first-child) {
    white-space: nowrap;
  }

  :where(summary > *) {
    display: inline;
    vertical-align: middle;
  }
/* } */

/* @layer complex-elements { */
  /* Advanced responsive table */


/* MT: where is the usefulness of that one? */
  /*
  :where(figure:has(table)) {
    position: relative;
    inset-inline-start: 50%;
    inset-inline-end: 50%;
    inline-size: 100%;
    inline-size: 100vi;
    -webkit-margin-start: -50vi;
            margin-inline-start: -50vi;
    -webkit-margin-end: -50vi;
            margin-inline-end: -50vi;
    padding-inline: var(--page-padding-inline);
  }
  +/

  /* Validation text */
  :where(input, textarea, select) ~ * {
	margin-block-start: 0;
    font-size: 0.8em;
  }

  :where(input:required + mark) {
    display: none;
    color: var(--color-text);
    background-color: transparent;
  }

  :where(input:required:invalid + mark) {
    display: block;
  }

  /* Skip link */
  body > a:first-child {
    position: fixed;
    top: var(--stack);
    left: var(--gutter);
    inline-size: auto;
    padding: 2px;
    text-align: center;
    background-color: var(--color-bg);
  }

  body > a:first-child:not(:focus) {
    opacity: 0;
    pointer-events: none;
  }
/* } */