:root               {
                    color-scheme:                               light dark;

                    --button-border-radius:                     0.3rem;
                    --editor-padding:                           0.3rem 0.2rem;

                    --wip-prefix:                               "WIP:";
                    --todo-prefix:                              "TODO:";
                    --hint-prefix:                              "Hints:";
                    --tip-prefix:                               "Tips:";
                    --notes-prefix:                             "Notes:";
                    --excersises-prefix:                        "Excercises:";

                    --text-color:                               light-dark( hsl(  32deg 100% 10% ), hsl(  32deg  20% 70% ) );
                    --background-color:                         light-dark( hsl(  32deg 100% 99% ), hsl(  32deg 100%  1% ) );
                    --banner-background-color:                  light-dark( hsl(  32deg 100% 95% ), hsl(  32deg 100%  5% ) );
                    --border-color:                             light-dark( hsl(  32deg 100% 30% ), hsl(  32deg 100% 70% ) );

                    --target-background-color:                  light-dark( hsl(  45deg 100% 30% ), hsl(  45deg 100% 70% ) );

                    --input-text-color:                         light-dark( hsl(  32deg  70% 30% ), hsl(  32deg  70% 70% ) );
                    --input-background-color:                   light-dark( hsl(  32deg  70% 90% ), hsl(  32deg  70% 10% ) );

                    --editor-text-color:                        light-dark( hsl(  32deg  70% 30% ), hsl(  32deg  70% 70% ) );
                    --editor-border-color:                      light-dark( hsl(  32deg  70% 30% ), hsl(  32deg  70% 70% ) );
                    --editor-background-color:                  light-dark( hsl(  32deg  70% 90% ), hsl(  32deg  70% 10% ) );

                    --button-text-color:                        light-dark( hsl(  32deg  60% 40% ), hsl(  32deg  80% 70% ) );
                    --button-border-color:                      light-dark( hsl(  32deg  30% 60% ), hsl(  32deg  80% 50% ) );
                    --button-background-color:                  light-dark( hsl(  32deg  90% 85% ), hsl(  32deg  80% 20% ) );
                    --button-hover-text-color:                  var(--button-text-color);
                    --button-hover-background-color:            light-dark( hsl(  32deg  90% 70% ), hsl(  32deg  60% 30% ) );
                    --button-selected-text-color:               light-dark( hsl(  32deg  30% 30% ), hsl(  32deg  90% 60% ) );
                    --button-selected-background-color:         light-dark( hsl(  32deg  80% 80% ), hsl(  32deg  90% 15% ) );
                    --button-selected-hover-text-color:         light-dark( hsl(  32deg  30% 30% ), hsl(  32deg  60% 90% ) );
                    --button-selected-hover-background-color:   light-dark( hsl(  32deg  30% 50% ), hsl(  32deg  60% 60% ) );
                    --button-active-text-color:                 var(--button-text-color);
                    --button-active-background-color:           light-dark( hsl(  32deg  30% 30% ), hsl(  32deg  30% 30% ) );
                    --button-disabled-text-color:               light-dark( hsl(  32deg   0% 50% ), hsl(  32deg   0% 40% ) );
                    --button-disabled-border-color:             light-dark( hsl(  32deg   0% 50% ), hsl(  32deg   0% 40% ) );
                    --button-disabled-background-color:         light-dark( hsl(  32deg   0% 90% ), hsl(  32deg   0% 10% ) ); /* grey */

                    --code-text-color:                          light-dark( hsl( 240deg  80% 20% ), hsl(  32deg  80% 80% ) );
                    --code-border-color:                        light-dark( hsl( 240deg   0% 50% ), hsl(  32deg  80% 50% ) );
                    --code-background-color:                    light-dark( hsl( 240deg   0% 93% ), hsl(  32deg  80% 10% ) );

                    --samp-text-color:                          var(--code-text-color);
                    --samp-background-color:                    var(--code-background-color);

                    --kbd-text-color:                           light-dark( hsl(  32deg  30% 30% ), hsl(  32deg  30% 10% ) );
                    --kbd-keyword-color:                        light-dark( hsl(   0deg  80% 45% ), hsl(   0deg  60% 30% ) );
                    --kbd-background-color:                     light-dark( hsl(  32deg  30% 80% ), hsl(  32deg  30% 50% ) );
                    --kbd-border-color:                         light-dark( hsl(  32deg  30% 30% ), hsl(  32deg  30% 20% ) );

                    --success-background-color:                 light-dark( hsl( 120deg 100% 95% ), hsl( 120deg  30% 55% ) );
                    --success-color:                            light-dark( hsl( 120deg 100% 10% ), hsl( 120deg  70% 10% ) );

                    --error-background-color:                   light-dark( hsl(   0deg 100% 90% ), hsl(   0deg 100% 70% ) );
                    --error-text-color:                         light-dark( hsl(   0deg 100% 20% ), hsl(   0deg 100% 20% ) );

                    --wip-text-color:                           light-dark( hsl(   0deg 100% 10% ), hsl(   0deg 100% 10% ) );
                    --wip-background-color:                     light-dark( hsl(  60deg  95% 55% ), hsl(  45deg 100% 50% ) );
                    --wip-border-color:                         light-dark( hsl(   0deg 100% 35% ), hsl(   0deg 100% 50% ) );

                    --todo-text-color:                          light-dark( hsl(  60deg   0%  0% ), hsl(  60deg 100%  0% ) );
                    --todo-border-color:                        light-dark( hsl(   0deg 100% 35% ), hsl(   0deg 100% 10% ) );
                    --todo-background-color:                    light-dark( hsl(  60deg  95% 55% ), hsl(  60deg 100% 35% ) );

                    --wip-missing-border:                       2px dashed red;
                    --wip-unindexed-border:                     2px dashed blue;

                    --table-header-background-color:            var(--banner-background-color);
                    --table-border-color:                       var(--border-color);

                    --visited-color:                            light-dark( hsl( 300deg  90% 35% ), hsl(  75deg  95% 65% ) );

                    --demo-controls-border-color:               light-dark( hsl( 100deg  50% 50% ), hsl( 150deg 50% 50% ) );
                    --demo-controls-background-color:           light-dark( hsl( 100deg 100% 90% ), hsl( 150deg 70% 20% ) );
                    --demo-active-border-color:                 light-dark( hsl( 100deg 100% 50% ), hsl( 150deg 70% 90% ) );
                    --demo-active-background-color:             light-dark( hsl( 100deg 100% 90% ), hsl( 150deg 70% 20% ) );
                    --demo-prepared-border-color:               light-dark( hsl( 100deg  70% 50% ), hsl( 150deg 70% 70% ) );
                    --demo-prepared-background-color:           light-dark( hsl( 100deg  70% 90% ), hsl( 150deg 70% 10% ) );

                    /* feature colors for explanation of numerical structure */
                    --num-sign-color:                           hsl(  90deg  90% 35% );
                    --num-prefix-color:                         hsl( 120deg  90% 35% );
                    --num-integer-color:                        hsl( 150deg  90% 35% );
                    --num-align-color:                          hsl(   0deg  90% 35% );
                    --num-point-color:                          hsl( 180deg  90% 35% );
                    --num-fraction-color:                       hsl( 210deg  90% 35% );
                    --num-exp-color:                            hsl(  10deg  90% 35% );
                    --num-exp-sign-color:                       hsl(  30deg  90% 35% );
                    --num-exp-integer-color:                    hsl(  50deg  90% 35% );
                    }

/*

These classes highlight important information.
They should generally be used with the following elements:
    <span>    for inline notes (wip, todo, hint, notes)
    <aside>   for e.g. wip, todo, hint or notes
    <section> for e.g. notes or excercises

*/
.wip::before        { content: var(--wip-prefix);        }
.todo::before       { content: var(--todo-prefix);       }
.hint::before       { content: var(--hint-prefix);       }
.notes::before      { content: var(--notes-prefix);      }
.excercises::before { content: var(--excercises-prefix); }

.wip                {
                    color:                  var(--wip-text-color);
                    background:             var(--wip-background-color);
                    border:                 1px solid var(--wip-border-color);
                    }

.todo               {
                    color:                  var(--todo-text-color);
                    background:             var(--todo-background-color);
                    border:                 0px solid var(--todo-border-color);
                    }

.hint               {
                    color:                  var(--hint-text-color);
                    background:             var(--hint-background-color);
                    border:                 1px solid var(--hint-border-color);
                    font-style:             italic;
                    font-weight:            bold;
                    }

.hidden             {
                    display:                none !important;
                    }

*                   {
                    box-sizing:             border-box;
                    }

                    /* atteampt to avoid target scrolling issues */
html                {
                    scroll-behavior:        smooth;
                    }

body                {
                    display:                grid;
                    grid-template-rows:     max-content 1fr; /* header, main */
                    width:                  100vw;
                    height:                 100vh;
                    overflow:               hidden;
                    padding:                0;
                    margin:                 0;
                    color:                  var(--text-color);
                    background-color:       var(--background-color);
                    border-color:           var(--border-color);
                    }

main                {
                    display:                grid;
                    overflow:               hidden;
                    grid-template-areas:    "index tutorial";
                    grid-template-columns:  max-content 1fr;
                    gap:                    1rem;
                    padding:                1rem;
                    }

.index              {
                    padding:                0;
                    }

.index .chapter     {
                    color:                  var(--button-text-color);
                    font-weight:            bold;
                    /* font-size:              larger; */
                    }

.index a,
.index a:visited    {
                    color:                  var(--button-text-color);
                    cursor:                 pointer;
                    user-select:            none;
                    -webkit-user-select:    none;
                    }
.index a:hover      {
                    color:                  inherit;
                    background-color:       inherit;
                    }

.index .checked     {
                    color:                  var(--button-selected-text-color);
                    background-color:       var(--button-selected-background-color);
                    }

.index .list        {
                    max-height:             100vh;
                    overflow:               hidden;
                    transition:             max-height 200ms ease-in-out;
                    }

.index .list .item  {
                    padding-left:           1rem;
                    display:                flex;
                    flex-direction:         column;
                    align-items:            stretch;
                    }

/* only highlight actual links to pages */
.index .page.item:hover  {
                    color:                  var(--button-active-text-color);
                    background-color:       var(--button-active-background-color);
                    }

.index.collapsed .item .list {
                    max-height:             0;
                    }

.index.collapsed .item.hover         > .list,
.index.collapsed .item:has(.checked) > .list {
                    max-height:             100vh;
                    }

.index.collapsed .chapter::after {
                    display:                inline-block;
                    margin-left:            0.2rem;
                    width:                  2rem;
                    content:                "\2026"; /* ellipsis: "..." */
                    }

.index.collapsed .item.hover         > .chapter::after,
.index.collapsed .item:has(.checked) > .chapter::after {
                    content: "";
                    }

/* highlight missing / un-indexed pages - make errors obvious */
.index .missing     { border: var(--wip-missing-border);   }
.index .unindexed   { border: var(--wip-unindexed-border); }

[id] > a,
a.button,
.banner a,
nav a               {
                    text-decoration:        none;
                    cursor:                 pointer;
                    outline:                0;
                    color:                  var(--text-color);
                    background:             transparent;
                    }

[id],
[id]:after          {
                    transition:             all 200ms ease;
                    }

[id]:hover          {
                    background-color:       var(--target-background-color);
                    }

[id]:hover::after   {
                    margin-left:            1rem;
                    content:                "#";
                    }

/* don't hightlight self-linked targets */
[id] > a:visited,
.banner a:visited,
nav a:visited       {
                    color:                  inherit;
                    }

[id]:target         {
                    scroll-margin-top:      4rem;
                    color:                  red;
                    animation-duration:     2s;
                    animation-name:         target-flash;
                    }

@keyframes target-flash {
                    from { background-color: var(--target-background-color); }
                    to   { background-color: transparent;                    }
                    }

a:visited           {
                    color:                  var(--visited-color);
                    }

header              {
                    font-weight:            bold;
                    }

header h1           { font-size:            xx-large; }
header h2           { font-size:            x-large;  }
header h3           { font-size:            larger;   }

h1[id],
h2[id],
h3[id]              {
                    margin-top:             2rem;
                    padding-top:            2rem;
                    border-top:             1px solid var(--border-color);
                    }

.side-bar           { grid-area: index;     }
.tutorial           { grid-area: tutorial;  }

.banner             {
                    display:                flex;
                    flex-direction:         row;
                    flex-wrap:              nowrap;
                    justify-content:        space-between;
                    background:             var(--banner-background-color);
                    border-bottom:          2px solid var(--border-color);
                    padding:                0 1rem; /* top/bottom, right/left */
                    }

.logo               {
                    font-size:              xx-large;
                    }

.version            {
                    font-size:              small;
                    }


.banner nav         {
                    flex-direction:         row;
                    justify-content:        space-between;
                    align-items:            end;
                    gap:                    1rem;
                    }

a.button:hover,
.banner a:hover,
nav a:hover         {
                    color:                  var(--button-hover-text-color);
                    background:             var(--button-hover-background-color);
                    transition:             all 200ms ease-in-out;
                    }

.messages           {
                    padding:                0.2rem 0rem;  /* top/bottom, right/left */
                    }

.messages .success  {
                    color:                  var(--success-color);
                    background:             var(--success-background);
                    border:                 1px solid var(--success-color);
                    }

.messages .error    {
                    color:                  var(--error-text-color);
                    background:             var(--error-background);
                    border:                 1px solid var(--error-text-color);
                    }

.demo.group         {
                    padding-left:           1rem;
                    padding-right:          1rem;
                    border-radius:          0.3rem;
                    border:                 1px solid var(--demo-controls-border-color);
                    background:             var(--demo-controls-background-color);
                    }

/*

    .button class is used to coordinate the look and feel of buttons

        <button>{label}</button>
    and <a class="button">{label}</a>

*/

/* visible part of the button */
.button                             {
                                    display:                inline-block;
                                    appearance:             none;
                                    padding:                0rem 0.2rem;  /* top/bottom, right/left */
                                    font:                   inherit;
                                    user-select:            none;
                                    -webkit-user-select:    none;
                                    transition:             all 100ms ease-in-out;
                                    color:                  var(--button-text-color);
                                    background:             var(--button-background-color);
                                    border:                 1px solid var(--button-border-color);
                                    border-radius:          var(--button-border-radius);
                                    }

.button.disabled,
.button.disabled:visited,
.button.disabled:hover,
.button.disabled:hover:visited      {
                                    color:              var(--button-disabled-text-color);
                                    border-color:       var(--button-disabled-border-color);
                                    background-color:   var(--button-disabled-background-color);
                                    }

a.button,
a.button:visited                    {
                                    color:                  var(--button-text-color);
                                    text-decoration:        none;
                                    }

/* LVHA order: :link, :visited, :hover, :active */
.button:hover                       {
                                    color:              var(--button-hover-text-color);
                                    background-color:   var(--button-hover-background-color);
                                    }

/* order is important - more specific / interactive must come last */
.button.checked                     {
                                    color:              var(--button-selected-text-color);
                                    background-color:   var(--button-selected-background-color);
                                    }
.button.checked:hover               {
                                    color:              var(--button-selected-hover-text-color);
                                    background-color:   var(--button-selected-hover-background-color);
                                    }
.button:hover                       {
                                    color:              var(--button-hover-text-color);
                                    background-color:   var(--button-hover-background-color);
                                    }

.button-group                       {
                                    display:                flex;
                                    flex-direction:         row;
                                    align-items:            center;
                                    width:                  max-content;                    /* default: stretch to fit grid/flexbox container */
                                    padding:                0;
                                    border:                 1px solid var(--button-border-color);
                                    border-radius:          var(--button-border-radius);
                                    overflow:               clip;   /* hide sharp edges of buttons below the group's rounded border */
                                    min-height:             1.5rem; /* without this, overflow: clip reduces height to 0 - but only sometimes?! */
                                    }

.button-group > .button             {
                                    border:                 none;
                                    border-radius:          0;
                                    }

.button-group > .button:not( :first-child ) {
                                    border-left:            1px solid var(--button-border-color);
                                    }

.side-bar                           {
                                    display:                flex;
                                    flex-direction:         column;
                                    overflow-y:             auto;
                                    overflow-x:             hidden;
                                    scrollbar-gutter:       stable;
                                    align-items:            center;
                                    }

.side-bar header                    {
                                    display:                flex;
                                    flex-direction:         column;
                                    align-items:            center;
                                    gap:                    1rem;
                                    padding-bottom:         1rem;
                                    }

article                             {
                                    display:                flex;
                                    flex-direction:         column;
                                    gap:                    1rem;
                                    overflow:               auto;
                                    padding:                0rem 2rem;
                                    }

/*
set tabindex=0 and call focus() on the main article so that the user can use keyboard interactions to scroll,
however, we then get a blue ring aroudn the whole article - yuk!
*/
article:focus                       { outline: none; }

textarea,
input                               {
                                    padding:                0.2rem;
                                    font-family:            monospace;
                                    text-wrap:              nowrap;
                                    white-space:            pre;
                                    color:                  var(--input-text-color);
                                    background:             var(--input-background-color);
                                    border:                 1px solid var(--border-color);
                                    }

textarea                            {
                                    scrollbar-gutter:       stable;
                                    }

input                               {
                                    display:                inline-block;
                                    border:                 none;
                                    border-bottom:          1px solid var(--border-color);
                                    }

code.block                          {
                                    display:                block;
                                    overflow:               auto;
                                    }

code                                {
                                    padding:                0.1rem 0.3rem;  /* top/bottom, right/left */
                                    color:                  var(--code-text-color);
                                    background:             var(--code-background-color);
                                    border:                 1px solid var(--code-border-color);
                                    border-radius:          0.2rem;
                                    white-space:            pre;
                                    }

.keyword                            { color:                var(--keyword-color);  }
.variable                           { color:                var(--variable-color); }
.literal                            { color:                var(--literal-color);  }
.placeholder                        { font-style:           italic; }

code,
samp,
kbd                                 {
                                    text-wrap:              nowrap;
                                    }

a:has( kbd )                        {
                                    font-style:             inherit;
                                    text-decoration:        none;
                                    color:                  inherit;
                                    background-color:       inherit;
                                    }

samp                                {
                                    padding:                0.1rem 0.3rem;  /* top/bottom, right/left */
                                    color:                  var(--samp-text-color);
                                    background:             var(--samp-background-color);
                                    }

kbd                                 {
                                    color:                  var(--kbd-text-color);
                                    background:             var(--kbd-background-color);
                                    border:                 1px solid var(--kbd-border-color);
                                    padding:                0.1rem 0.2rem;  /* top/bottom, right/left */
                                    border-radius:          0.2rem;
                                    }

kbd strong                          {
                                    color:                  var(--kbd-keyword-color);
                                    }

cite                                {
                                    display:                inline-block;   /* default: inline - breaks when a citation contains a <p> */
                                    padding:                0 0.5rem;
                                    border-left:            2px solid var(--border-color);
                                    background:             var(--banner-background-color);
                                    }

cite.block                          {
                                    display:                block;
                                    }

aside                               {
                                    display:                inline-block;   /* default: inline - breaks when a citation contains a <p> */
                                    padding:                0 0.5rem;
                                    border-left:            2px solid var(--border-color);
                                    background:             var(--banner-background-color);
                                    font-style:             italic;
                                    margin-block-start:     1em;    /* same as <p> */
                                    margin-block-end:       1em;    /* same as <p> */
                                    }

ul                                  {
                                    padding-left:           2rem;
                                    }


table, th, td                       {
                                    padding:                0.2rem 0.5rem;  /* top/bottom, right/left */
                                    border-collapse:        collapse;
                                    border:                 1px solid var(--table-border-color);
                                    vertical-align:         top;
                                    }

table th                            {
                                    background:             var(--table-header-background-color);
                                    }

td > div                            {
                                    display:                flex;
                                    flex-direction:         column;
                                    align-items:            start;
                                    gap:                    1rem;
                                    }

td > div > *                        {
                                    margin:                 0;
                                    }

table td :first-child               {
                                    margin-top:             0;
                                    padding-top:            0;
                                    }
table td :last-child                {
                                    margin-bottom:          0;
                                    padding-bottom:         0;
                                    }

/* see tutorial/sorting_numbers.txtar */
div.num.examples                    {
                                    display:                grid;
                                    grid-template-columns:  max-content max-content max-content;
                                    }
var.num.sign                        { color: var(--num-sign-color);        }
var.num.prefix                      { color: var(--num-prefix-color);      }
var.num.integer                     { color: var(--num-integer-color);     }
var.num.align                       { color: var(--num-align-color);       }
var.num.align::after                { content: "|";                        }
var.num.point                       { color: var(--num-point-color);       }
var.num.fraction                    { color: var(--num-fraction-color);    }
var.num.exp                         { color: var(--num-exp-color);         }
var.num.exp-sign                    { color: var(--num-exp-sign-color);    }
var.num.exp-integer                 { color: var(--num-exp-integer-color); }

/*

holy shit - what is this madness?!
- the tutorials in tutorial/*.txtar can provide tables
- each table has it's own, individual alignment requirements
- but:
  - <style> within a <table> does not work as expected (global scope, not local)
  - <col> can only be used for backgrounds, borders and widths - not alignment
  - so we need to rely on a common set of CSS rules (here)
  - and thus have an implicit dependency between the tables and their styling rules

Note:
  - don't align <th>'s - they should be centered anyway
*/
table.col1-center td:nth-child(1),
table.col2-center td:nth-child(2),
table.col3-center td:nth-child(3),
table.col4-center td:nth-child(4),
table.col5-center td:nth-child(5),
table.col6-center td:nth-child(6),
table.col7-center td:nth-child(7),
table.col8-center td:nth-child(8),
table.col9-center td:nth-child(9) { text-align: center; }

table.col1-right td:nth-child(1),
table.col2-right td:nth-child(2),
table.col3-right td:nth-child(3),
table.col4-right td:nth-child(4),
table.col5-right td:nth-child(5),
table.col6-right td:nth-child(6),
table.col7-right td:nth-child(7),
table.col8-right td:nth-child(8),
table.col9-right td:nth-child(9) { text-align: end; }