/* GENERAL NOTES:

     1. This file has a fair amount of stuff commented out. Normally I
        complain about this, but it seemed here to be a reasonable way to
        record some of the rejected choices?

     2. CSS properties are ordered according to “Concentric CSS” [1]. Elements
        and classes are alphabetical.

     3. Take care with the “&” CSS nesting operator, whose omission can
        introduce CSS-relevant whitespace in surprising ways [2].

   [1]: https://rhodesmill.org/brandon/2011/concentric-css/
   [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector */


/** IMPORTS ****************************************************************/

/* This makes some neat fonts available. */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/** CONFIGURATION ***********************************************************/

:root {
   /* defined by MkDocs theme (terminal.css) */
   --font-stack: Merriweather, serif;
   --font-stack-sans: Montserrat, sans-serif;
   --mono-font-stack: "Roboto Mono", monospace;
   --global-font-size: 12pt;
   --global-line-height: 1.35; /* beware percentages! */
   --global-par-break: 9pt;
   --page-width: 45em;
   --background-color: #262626;
   --primary-color: #038bfc;   /* Charliecloud blue */
   --secondary-color: #999999;   /* Charliecloud gray */
   --code-bg-color: var(--background-color);
   /* defined by us */
   --color-barbie: #e0218a;
   --color-maybe: #cccc33;
   --color-no: #ff3333;
   --color-unspecified: #ff00ff;
   --color-yes: #00dd00;
   --font-stack-mono: var(--mono-font-stack);  /* alias with better name */
   --font-stack-serif: var(--font-stack);      /* alias with better name */
   --iid-table-width: 48pt;
}


/** GENERIC ELEMENTS ********************************************************/

body {
   text-align: justify;
   counter-reset: h2 h3 h4;
   hyphens: auto;
}

hr {
   margin: 0 0 4px;
   border-bottom: thin solid var(--secondary-color);
}

p, ul {
   margin: 0;
   margin-top: var(--global-par-break);
}

.flexrow { /* note that not every list item is flex */
   display: flex;
   align-items: flex-start;   /* vertical alignment within rows */
   column-gap: 1.0em;  /* minimum horizontal space between items */
}

.justify {
   justify-content: space-between;
}

.hgrid {
   display: grid;
   grid-auto-flow: row;
   grid-template-columns: auto auto;
   align-items: start;
   column-gap: 5em;
   row-gap: 2em;
   justify-items: center;
   width: fit-content;
   margin: 0 auto;
}

.vgrid {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-auto-flow: column;
   align-items: start;
   column-gap: 5em;
   margin: 0 auto;
   width: fit-content;
   /* justify-items: start; */
   row-gap: 2em;
}

.flexwide {
   justify-content: center;
   column-gap: 3.0em;
}

/** Headers *****************************************************************/

/* H1 is the document title. H2–4 are what we actually use; these have section
   numbers added by CSS. All this is inside .terminal for greater specificity;
   otherwise the terminal.css stuff wins. */

body.terminal {

   h1, h2, h3, h4, h5, h6 {
      margin-bottom: var(--global-par-break);
      padding: 0;
      overflow: visible;
      text-align: left;
      color: var(--secondary-color);
      font-family: var(--font-stack-sans);
      hyphens: none;
   }

   :is(h2, h3, h4)::before {
      position: absolute;
      left: -42pt;
      opacity: 0.50;
   }

   h1 {
      /* We use <h1> for page titles so it should be at the top and there
         should be only one per page. */
      /* FIXME: I wanted to add some fleurons (“book ornaments”???) but
         couldn’t figure out in what seemed a reasonable amount of time. */
      text-align: center;
      font-size: 200%;
      font-weight: 600;
      margin-bottom: calc(2.0 * var(--global-par-break));
   }

   h2 {
      /* This is the highest level section heading since we use <h1> for
         titles. */
      margin-top: calc(2.0 * var(--global-par-break));
      /*border-top: solid thin var(--secondary-color);*/
      font-size: 180%;
      font-weight: 500;
      counter-reset: h3 h4;
      counter-increment: h2;
      padding-top: 0;
   }
   h2::before {
      content: counter(h2);
   }

   h3 {
      margin-top: calc(1.8 * var(--global-par-break));
      font-size: 150%;
      font-weight: 400;
      counter-reset: h4;
      counter-increment: h3;
   }
   h3::before {
      content: counter(h2) "." counter(h3);
   }

   h4 {
      margin-top: calc(1.6 * var(--global-par-break));
      font-size: 120%;
      font-weight: 400;
      counter-increment: h4;
   }
   h4::before {
      content: counter(h2) "." counter(h3) "." counter(h4);
   }

}

/** Focused “corrections” to things terminal.css does ***********************/

#mkdocs-terminal-content > p > img {
   /* Wide logo image at top. Image itself has no surrounding whitespace. */
   margin-top: 8pt;
   margin-bottom: 18pt;
}
div.terminal-mkdocs-footer-grid {
   /* Stock footer uses a CSS grid. With next/prev links disabled, which we do
      because it’s just a home page, this leaves awkward space on the right.
      Also various style adjustments. */
   all: inherit;
   line-height: 1.35;
   font-size: small;
}
div#terminal-mkdocs-footer-copyright-info {
   all: inherit;
}
div#terminal-mkdocs-footer-copyright-info p {
   margin: 0 0 6pt;
}

/* This hack makes the terminal.css container use the full page width. */
body.terminal > div.container:has(.fullwidth) {
   max-width: calc(100% - 8em);
}
/* This class then shrinks things down again. */
.normalwidth {
   margin-right: auto;
   margin-left: auto;
   padding: 0 calc(var(--global-space) * 2);
   max-width: var(--page-width);
}

/** Admonitions *************************************************************/

/* Terminal theme doesn’t include styles for the “admonitions” package that
   comes with (Mk|Proper)Docs; this is based on styles it does have for a
   different admonitions package. */

div.admonition {
   margin: var(--global-par-break) auto;
   border: thin solid var(--color-unspecified);
   background: #383838;
   padding: 0.75em;
   width: var(--page-width);

   > p.admonition-title {
      margin: 0;
      color: var(--color-unspecified);
      font-family: var(--font-stack-sans);
      font-weight: 600;
      font-style: normal;

      &:before {
         padding-right: 0.60em;
         font-family: "Font Awesome 6 Free";
         font-style: normal;
         font-weight: 900;
         content: "?";
      }
   }

   &.note {
      border-color: var(--primary-color);

      > p.admonition-title {
         color: var(--primary-color);

         &:before {
            content: ""  /* circle-info */
         }
      }
   }
}




/** PROJECT REPORTS *********************************************************/

/* All this stuff is for the automatically generated project status reports
   (issues, merge requests, etc.) */

/** Generic/misc ************************************************************/

.empty {
      text-align: center;
      font-size: smaller;
      font-style: italic;
}
.empty::before {
   content: "⸻ ∼ none ∼ ⸻";
}

.gitlab {

   .iid {  /* internal IDs, e.g. #867 and/or !5309 */
      text-wrap: nowrap;
   }

   li {
      padding: 0;
   }
   li::after {
      content: unset;  /* override terminal.css hyphen bullets */
   }

   ul {
      margin: 0;
   }

   ul > li::before {  /* sub-list bullets */
      display: inline-block;
      transform: translateY(0.09em);  /* visually center on lower-case */
      padding-right: 0.35em;          /* gap between icon and name */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
   }


}

/** Table-based reports *****************************************************/

table.gitlab {
   margin-right: 0;
   margin-left: 0;
   /* border: 0.1pt solid var(--color-barbie); /* handy for debugging */
   width: auto;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;

   a {
      /* theme.css from mkdocs-terminal uses ID CSS selectors for some
         containers (e.g. #terminal-mkdocs-main-content [1]), making those
         styles impossible to override with class selectors.
         [1]: https://github.com/ntno/mkdocs-terminal/blob/2c94f9b/terminal/css/theme.css#L14 */
      text-decoration: none !important;
   }

   > caption {
      text-align: left;
      font-size: 150%;
      font-weight: 500;
      margin-bottom: 3pt;
      font-family: var(--font-stack-sans);
      hyphens: none;

   }

   td, th {
      border: none;
      /* border: 0.1pt solid var(--color-barbie);  /* debugging */
      padding: 1pt 6pt;
      vertical-align: middle;
   }

   /* Remove padding on the outside of the outer cells. */
   tr:first-child > :is(td, th) {
      border-top: 1.5pt solid;
      border-color: var(--font-color);
      padding-top: 2pt;
   }
   tr:last-child > :is(td, th) {
      border-bottom: 1.5pt solid;
      padding-bottom: 2pt;
   }
   tr > :is(td, th):first-child {
      padding-left: 0;
   }
   tr > :is(td, th).notfirst {  /* erroneously first-child b/c rowspan */
      padding-left: 6pt;
   }
   tr > :is(td, th):last-child {
      padding-right: 0;
   }

   tr:has(+ tr.subhead) > :is(td, th) {
      padding-bottom: 2pt;
   }
   tr.subhead {
      border-top: 0.5pt solid;
   }

   td.sum {
      border-top: 0.5pt solid var(--secondary-color);
   }

   td.total {
      font-style: italic;
   }

   th {
      font-style: italic;
      font-weight: normal;
      text-align: center;
   }

   tr.subhead > th {
      text-align: left;
   }

   td.number {
      text-align: right;
   }
}

/** List-based reports ******************************************************/

/* The basic organization here is that each item in the report is itself a
   list of full-width containers. Everything appears in the same location, but
   we do not align “columns” between “rows” (list items), which is why it’s
   not a table and doesn’t use CSS grid.

   Selectors here are roughly in the order they are displayed. */

ul.gitlab {
   list-style: none;
   text-align: left;
   font-family: var(--font-stack-sans);
   font-variant-numeric: tabular-nums;

   > li {
      border-top: solid 0.1px var(--secondary-color);
      padding-top: 1pt;
      padding-bottom: 6pt;
   }
   > li:hover {
      background-color: #000000; 
   }
   > li:last-child {
      border-bottom: solid 0.1px var(--secondary-color);
      padding-bottom: 6pt;
   }

   /** Only item in an empty list **/

   /* This lets us just run the populating loop zero times. */

   > li.empty {
      border: none;
      padding-top: 0pt;
      padding-bottom: 0pt;
   }

   /** Item titles **/

   div.title {
      display: flex;
      font-size: var(--global-font-size);
      font-weight: 500;
   }

   div.title .iid {
      flex: none;
      margin-bottom: 1pt;
      width: var(--iid-table-width);
      font-weight: 400;
   }

   /** Dates & other stuff about when a thing happened **/

   div.when {
      flex: none;
      text-align: right;
   }

   /** Related items **/

   ul.related {
      margin: 0;
      list-style: none;

      > li {
         font-size: smaller;
         padding: 0;
         padding-left: var(--iid-table-width);
      }
   }


   /** Errors **/

   ul.errors {
      padding-left: var(--iid-table-width);
      font-size: smaller;

      > li::before {
         color: var(--color-no);
         content: "";  /* triangle-exclamation */
      }
   }

   ul.warnings {
      padding-left: var(--iid-table-width);
      font-size: smaller;

      > li::before {
         color: var(--color-maybe);
         content: "";  /* triangle-exclamation */
      }

   }

}


/** NUGGET FORMATTING *******************************************************/

/* Small, standardized things, e.g. labels or people, possibly in a horizontal
   list. */

.gitlab {

   ul.nuggets {
      display: inline-flex;
      font-family: var(--font-stack-sans);
      gap: 0.5em;

      /* Right-justify */
      &.right {
         justify-content: end;
      }

      /* Kludge to avoid being tallest item in row, e.g. to avoid extra space
         under title if it’s not wrapped. */
      &.vkludge {
         display: flex;
         height: 0;  /* kludge: avoid extra space under title if not wrapped */
         overflow: visible;
      }

      > li::before {
         font-style: normal;
      }

      > li.column::before {
         width: 1.00em;  /* eyeballed */
      }

      /** Milestone *********************************************************/

      > li.milestone {
         color: var(--color-barbie);
         font-weight: 500;

         &::before {
            transform: translateY(0);  /* milestones are upper-case */
            content: "";
         }
      }

      /** Status (open, changes requested, etc.) ****************************/

      > li.status {

         &::before {
            /* defaults if we forget a style */
            color: var(--color-unspecified);
            content: "?";
         }

         &.canceled::before {
            color: var(--color-no);
            content: "";           /* ban (circle with slash) */
         }

         &.done::before {
            content: "";              /* check */
            color: var(--color-yes);
         }

         &.in_progress::before {
            content: "";               /* play */
            color: rgb(66, 143, 220);  /* matches GitLab dark mode */
         }

         &.mergeable::before {
            content: "";  /* check */
            color: var(--color-yes);
         }

         &.merged::before {
            content: "";                /* code-merge */
            color: var(--color-yes);
         }

         &.merge-rejected::before {
            content: "";                /* ban (circle with slash) */
            color: var(--color-no);
         }

         &.milestone::before {
            content: "";                /* cloud-bolt */
            color: var(--primary-color);
         }

         &.to_do::before {
            content: "";                /* clock */
            /* The GitLab dark mode is extremely close to our secondary color,
               so use something different. */
            color: #B47EB3;
            /* color: rgb(137, 136, 141);  /* matches GitLab dark mode */
         }

         &.triage::before {
            content: "";               /* circle-pause */
            color: rgb(217, 149, 48);  /* matches GitLab dark mode */
         }

         &.unmergeable::before {
            content: "";               /* circle-pause */
            color: var(--color-no);
         }
      }

      /** Labels ************************************************************/

      > li.label {
         border-radius: 0.75em;
         border-style: solid;
         border-width: 1pt;
         display: flex;
         font-size: smaller;

         > .scope {
            border-bottom-left-radius: 0.75em;
            border-top-left-radius: 0.75em;
            padding-left: 3pt;
            padding-right: 2pt;
         }

         > .name {
            padding-left: 3pt;
            padding-right: 3pt;
         }
      }

      /** Principals (e.g. assignee/author) *********************************/

      > li.principal {
         &::before {
            content: "";  /* pencil */
         }
         &.inhead {
            color: #e0218a;
            font-weight: 700;
         }
         &.j-ogas::before {
            content: "";  /* chess-bishop */
         }
         &.loshak::before {
            content: "";  /* cat */
         }
         &.mphinney::before {
            content: "";  /* paw */
         }
      }

      /** Code reviewers ****************************************************/

      li.reviewer {

         &.approved::before {
            content: "";  /* check */
            color: var(--color-yes);
         }

         &.rejected::before {
            content: "❌";
            color: var(--color-no);
         }

         &.commented::before {
            content: "";  /* comment */
            color: var(--color-unspecified);
         }

         &.delinquent {
            color: var(--color-unspecified);
            font-weight: 700;
         }
         &.delinquent::before {
            content: "";  /* clock */
         }

      }

      /** Component *********************************************************/

      li.type {

         &.bug::before {
            content: "";  /* bug */
            color: rgb(231, 138, 195);  /* matches GitLab */
         }

         &.enhancement::before {
            content: "";  /* rocket */
            color: rgb(127, 201, 127);  /* matches GitLab */
         }

         &.refactor::before {
            content: "";  /* code-compare */
            color: rgb(166, 118, 29);  /* matches Gitlab */
         }
      }

      /** Overrides *********************************************************/

      > li {

         &.icon-none::before,
         &.total::before {
            padding-right: 0;
            width: 0;
            content: "";
         }

         &.icon-only::before {
            padding-right: 0;
            text-align: center;
         }

         &.other {
            font-style: italic;
         }
         &.other::before {
            content: "";
         }

      }

   }
}