/**
 *  file 20250929°0921 lmpstyles.css
 *  license     : GNU AGPL v3 | © 2025 – 2026 Norbert C. Maier
 *  summary     : Provide styles for the Markdown rendering
 */

/*
 *  Classes overview
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (1) Boxes, means Div elements
 *
 *   • FooterBox               — With four paragraphs (Last update, Legal, Copyright, Page-ID)
 *                                Import from file 20260227°0731 styles_box_footer.css ###
 *
 *   • lmp-box-nav-menuitems   — Top navigation bar
 *   • lmp-box-nav-submenuitems — Next navigation bar
 *   • lmp-box-page-sections   — Navigation bar inside the page
 *
 *   • lmp-box-attention       — Yellow centered box (for <div>)
 *   • lmp-box-references      — Div box for references
 *   • lmp-box-tldr            — Div box for a TLDR prologue
 *
 *   • lmp-breadcrumbs         — <div> Breadcrumb line
 *
 *   • Hy_Table_Row_Highlight  — Around the Markdown table
 *
 *   • lmp-box-orange-dotted   — For casual paragraph or list accentuation
 *
 *   • lmp-img-box-right       — <div> Right floating box with JavaScript calculated max-width
 *
 *   • lmp-box-thumbnails      — <div> Box for a series of small inline images (in styles_thumbnailsbox.css)
 *                                Needs a definition like follows in the <div> element:
 *                                style="--paragraph-width:160px;"
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (2) Image elements
 *
 *   • lmp-img-framed          — <img> Put frame around image
 *   • lmp-img-logo-top-right  — <img> Put logo on top-right
 *   • lmp-reference-icon      — For the image tag befor a link to show the pages favicon
 *         img.height-48px     — Set minimum height for the paragraph containing the favicon image
 *         img.height-64px
 *         img.height-96px
 *         img.height-128px
 *
 *   • lmp-img-as-emoticon     — Use image inside a text line
 *
 *   • lmp-img-centered        — Centered image
 *
 *   • lmp-include-webshot     — <iframe> Include one web page into another and possibly scale it
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (3) Pre elements
 *
 *   • lmp-pre-break-lines     — Break long lines
 *
 *   • Fineprint               — <pre> Marking of dedicated Pre
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (4) Links = A elements
 *
 *   • lmp-link-lightgray      — Links in such container are painted in LightGray
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (5) General, e.g. Spans
 *
 *   • FontBig, FontHuge, FontGiant —
 *   • FontSmall, FontTiny, FontMicro —
 *   • FontItalic              —
 *   • FontSerif               —
 *   • HyFontTty               —
 *
 *   • lmp-title-type          — Typically used in H1
 *   • lmp-time-prefix         — Time indication at the beginning of a paragraph, mostly in a Span
 *
 *   • HyNoWrap                — Typically used in Span, makes the content no more breaking
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  (6) Tables
 *
 *   • lmp-render-list-as-table — Render list as table <div markdown="1" class="lmp-render-list-as-table"> around an <ul>
 *                                 see prototye page 20251213°0731 lampa-ssg/docs/bees.md#id20260319o1117
 *
 *  - - - - - - - - - - - - - - - - - - - - - - - - - -
 */

 /* [seq 20260227°0751] */
@import url("./styles_box_footer.css");
@import url("./styles_box_thumbnails.css");

/* rule 20251001°0721 */
:root {
    --body-background-color : #ececec;                                  /* Gainsboro = dcdcdc | 220, 220, 220 */ /* MintCream = #f5fffa | 245, 255, 250 */ /* var 20251001°0727 */
    --box-articles-color    : #ffd4ea;                                  /* MistyRose = ffe4e1 | 255, 228, 225 */ /* var 20251001°0725 */
    --go-below-item-color   : Lavender;                                 /* PowderBlue:#e6e6fa; PaleGreen; #d8eaf8; [var 20251001°0735] */
    --member-div-color      : #d8eaf8;                                  /* LightBlue = add8e6 */ /* var 20251001°0723 */
    --nav-menu-items-color  : #d8eaf8;                                  /* [var 20251001°0731] */
    --nav-menu-item-current : LightSkyBlue;                             /* #87CEFA, GreenYellow; [var 20251003°0911] */
    --nav-menu-item-current-chapter : LightBlue; /* #D0F0FF */
    --nav-submenu-items-color : #d8dae8;                                /* [var 20251001°0733] */

    --hikedrive-bg-lightgreen : #c0ffc0;                                /* [var 20260114°1111] */
}

/* rule 20250929°0731 */
body {
    background-color : var(--body-background-color);
    font-family      : Verdana, Geneva, sans-serif;
    font-size        : 1.1em !important;  /* !important */              /* Why does it not work without '!important'?! And why do characters otherwise appear a bit smaller than normal */
    line-height      : 1.59rem;                                         /* Just a bit reduced(?) */
}

/* rule 20251006°0711 */
code {
    background-color : #e8e0ff;                                       /* Lavender; */
    color            : DarkSlateGray !important;                      /* Try overwrite Bootstrap --bs-code-color Red */
    font-size        : 1.0em !important;                                /* Without '!inportant the Bootstrap(?) CSS will print smaller font */
    padding          : 0.05em 0.2em 0.05em 0.2em;
}

/** ruleset 20251003°0751
*  summary : Have linebreaks in headerline having smaller line-height than in
*             ordinary text. But keep top and bottom distance as it were otherwise.
*  note : Just shrinking the line-height is not such good idea, because this also
*          shrinks the distance to the following paragraph. (⇗ ref 20260105°0836)
*          The exact solution seems complicated, but I prefere some simple thing.
*/
h1, h2, h3, h4, h5, h6 {                                                /* [rule 20251003°0753] */
    line-height : 1.0em !important;                                     /* Without '!important' it will be overwritten by other instances */
    padding     : 0.3em 0 0.2em 0;                                      /* Add a bit distance roughly estimated */
}
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup {                        /* Sup inside header lines are shaded [rule 20260129°0751] */
    color        : Gray;
    font-size    : 0.61em;
    font-weight  : normal;
    padding-left : 0.7em;
}


/*
   issue 20260319°0741 'Custom tag needs Parasedown extension'
   matter   : I want introduce custom tag 20260319°0711 <c-id>, it shall work like <sup>
              But Parsedown treats this on block level, display:inline does not help.
   solution : Implement a Parsedown extension, which tells it <c-id> as an inline tag
   chain    : Ref 20260318°1212 👻
   status   : Open
 */


/** rule(set) 20260319°0711 <c-id>
 *  summary     : Custom tag experiment. Failed so far
 *  note        : This shall free the so far abused <sup> from the purpose overload, and provide a dedicated
 *                tag for the dedicated purpose On the other side, the <sup> has the advantage, that it is also
 *                recognized by other Markdown flavours, notably GitHub/GitLab. Let´s rather stick with <sup>!
 *  prototypes  : Page 20260317°1213 clips3/~readme.md
 *  see         : https://matthewjamestaylor.com/custom-tags [ref 20260315°0714]
 *  see         : https://matthewjamestaylor.com/div-custom-elements [ref 20260315°0732]
 *  see         : https://matthewjamestaylor.com/custom-element-examples [ref 20260315°0734]
 *  see         : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-position [ref ◇]
 *  see         : https://css-tricks.com/fluid-superscripts-and-subscripts/ [ref ◇]
 */
c-id___ {                                                               /* rule 20260319°0713 */
    color          : Gray;
    display        : inline;
    font-size      : 0.71em;
    /* font-variant-position : super; */                                /* Not what we want. Works totally different */
    padding-left   : 0.7em;
    vertical-align : sup;
}


/**
 * rule     : 20260129°0711 for h1, …
 * summary  : In bulk buddy pages show the category in the title line somewhat smaller
 *             and discerned as routine information e.g. File, Page, Project, Screenshot
 */
/* .Lmp_TitleType, */                                                   /* ELIMINATED */
/* .lmp-header-type, */                                                 /* ELIMINATED */
.lmp-title-type {
    font-weight : normal;
    font-size   : 0.81em;
    font-family : Georgia;                                              /* Serif */
    font-style  : italic;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* This are the rules for <pre> blocks [seq 20260305°0721]

/**
 * rule 20250929°0741
 * ref : About "white-space:pre-wrap;" and "word-wrap:break-word;" see 👻 ref 20260113°0712
 */
pre { background-color    : #E8F8FF; /* #F4F4FF #FFE8F0 FFE40EB */       /* Pink = FFC0CB */
       border             : 2px dotted SkyBlue;
        border-radius     : 0.7rem;
         font-size        : 0.77em; /* !important; */                   /* Without '!important' it gets overwritten by some '_reboot.scss' */
          line-height     : 1.4em !important;                           /* Without '!important' it gets overwritten by some '_reboot.scss' */
           padding        : 0.1em 0.9em 0.1em 0.1em;                    /* Wanted with fit-content [prop 20260106°1251] */
            width         : fit-content; /* 100%; */ /* fit-content */                                /* May not always be wanted? [prop 20260106°1253] */

            max-width     : 100%;                                       /* [rule 20260205°0831] */
            overflow-x    : auto;                                       /* Makes vertical scrollbar for too long lines [rule 20260205°0833] */

            overflow-wrap : anywhere;                                   /* Introduced with issue 20260602°0711 'Pre with image float right'  */
            white-space   : pre-wrap;                                   /* Introduced with issue 20260602°0711 'Pre with image float right'  */
            word-break    : break-all;                                  /* Break more rigorous, not only after whitespace breaks are exhausted */

            /* display    : inline-block; */ /* flow-root */
}

/**
 * rule 20260214°1211
 * summary : Parsedown seems to introduce a <p> inside the <pre>, this causes whitespaces collapse (↗ ref 20260213°0942)
 * finding : It is the `markdown="1"` which causes the spaces collapse. Just do not use it. [finding 20260214°1213 Space-collapsing]
 */
/*
pre p { white-space : pre !important; display: inline !important; }
*/

/* rule 20260112°1311 (↗ 👻 ref 20260113°0712, ref 20260113°0742) */
/* It works, but the '[class*="language-"]' mixes up Prism´s line-number plugin */
/* pre code[class*="language-"] { */                                    /* All <code> with a class 'language-*' */
/* pre.Hy_Pre_BreakLines, */                                            /* ELIMINATED */
/* .Hy_BreakLines, */                                                   /* ELIMINATED */
/* .Lmp_BreakLines, */                                                  /* ELIMINATED */
.lmp-pre-break-lines {                                                  /* Dedicated class for the 'pre', not 'code' */
    max-width        : 100%;                                            /* Counteract the 'width:fit-content;' from the <pre> */
    overflow-x       : auto;                                            /* Fallback: horizontal scroll if needed, e.g. for long unbreakable words */
    white-space      : pre-wrap;                                        /* Preserve whitespace but allow wrapping */
    /* word-wrap     : break-word; */                                   /* Break long words if necessary */
    /* word-wrap     : break-word; */                                   /* Why not?! */

    /* Break anywhere [seq 20260521°0828] */
    word-break       : break-all;                                       /* Allows breaking at any character */
    overflow-wrap    : anywhere;                                        /* Ensures breaking even if no break points exist */
}

/*
   issue 20260602°0711 'Pre with image float right'
   matter : When trying to have a float:right image in the record pre, the lines do not float left around the
             pre, but the image occupies the vertical space, and the lines continue only behind the image
   finding : Below rule 20260305°0713 'pre > a' rule is the culprit with it´s ´display : inline-block;`
   solution : Provisor shutdown the `display : inline-block;`. Just we are not sure about the side effects,
               and for which reason this was introduced! Let´s go a while and observe the behaviour.
               Only if we found no counter indication, this solution can be accepted on long term.
   status : Perhaps solved, perhaps more inquiry must be done.
*/

/** ruleset 20260305°0711
 *  summary : An images inside a record pre blocks make the label left of it appear in the
 *             vertical middle of the image. I want appear the label on top of the image
 *  prototype : Page 20260214°0917 img 20260301°1144 and ico 20260301°1139
 */
pre > a {                                                               /* rule 20260305°0713 */
    /* display     : inline-block; */                                   /* See issue 20260602°0711 'Pre with image float right' */
    vertical-align : top;
}
pre > img {                                                             /* rule 20260305°0715 */
    display        : inline-block;
    vertical-align : top;
}
pre img {                                                               /* rule 20260305°0717 */
    border         : 1px dotted LightGray;
    border-radius  : 0.4em;
    padding        : 0.1em;
}


/** rule 20260602°0721
 *  summary   : Image floating right inside a Pre element, so succeeding lines do not run through the image but wrap before it
 *  see       : issue 20260602°0711 'Pre with image float right'
 *  prototype : Page 20260531°0911
 */
.lmp-img-float-right-in-pre {
    float           : right;
    margin-left     : 0.4em;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = */


/** rule 20260219°0711 Mark dedicated Pre boxes
 *  protoype : Page 20260214°1116
 */
.Fineprint {
    border        : 2px dotted Crimson;
    border-radius : 0.7em;
    padding       : 0.4em;
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/**
 *  ruleset 20260205°1141 'Reference with icon to the left'
 *  summary : For the image tag before a link to show the target´s favicon
 *  note    : For making the container element have a min-height see below ruleset 20260224°1441
 */
/* .RefsIcon, */                                                        /* ELIMINATED */
/* .ReferenceIcon, */                                                   /* ELIMINATED */
/* .lmp-img-reference, */                                               /* ELIMINATED */
.lmp-reference-icon {                                                   /* rule 20260205°1143 */
    float            : left;
    margin-right     : 0.7em;
    /* shape-outside : inset(0 0 0 0); */                               /* Does not help anyway (↗ ref 20260209o0748) */
}
.lmp-reference-icon + p {
    min-height:32px;                /* Check — Might 24px be enough? */ /* Minimum height for any iconized link paragraph [rule 20260330°0751] */
}

/* .lmp-img-reference + .lmp-img-reference, */
.lmp-reference-icon + .lmp-reference-icon {                             /* Double icon, e.g GitHub icon plus overlapping the user icon [rule 20260205°1145] '+' is the adjacent sibling combinator */
    margin-left : -24px;
}

/**
 *  ruleset 20260224°1441 'Additive for ruleset 20260205°1141 class "lmp-img-reference"'
 *  see         : Prototype page 20260224°1112 (20260224o1111.install/~readme.md)
 *  note        : For occasional specific other heights, put a Style element
 *                 into the regarding page with an individual class definition
 *  proposal    : Use a CSS variable definition in the style element of the image, like in
 *                 ruleset 20260226°1041. No! This will not work due to the CSS variable scope
 *  note        : That margin-bottom assignments are experimental … we will see,
 *                 whether this is a good idea [note 20260228°0751]
 */
img.height-48px + p { min-height:49px; }                                /* margin-bottom: 0.1em; */
img.height-64px + p { min-height:65px; }
img.height-96px + p { min-height:96px; }
img.height-128px + p { min-height:129x; }
li:has(img.lmp-reference-icon) { min-height:32px; }  /* Check — Might 24px be enough? */ /* Minimum height for any iconized link list item [rule 20260330°0752] */
li:has(img.height-48px) { min-height:49px; }
li:has(img.height-64px) { min-height:65px; }
li:has(img.height-96px) { min-height:97px; }
li:has(img.height-128px) { min-height:129px; }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */


/** rule 20260301°1111 for <img>
 *  summary   : Use square image inside a text line, like an emoticon
 *  prototype : Page 20250928°1111
 */
.lmp-img-as-emoticon {
    height   : 1.1em;
    position : relative;
    top      : -0.15em;
    width    : 1.2em;
}


/** rule 20260301°0711 for <iframe>
 *  summary   : Include one web page into another and possibly scale it
 *  prototype : Page 20010610°0901´17
 */
.lmp-include-webshot {
    border        : 2px dotted Orange;
    border-radius : 0.7rem;
    padding       : 0.4rem;
    width         : 720px; /* 512px; */                                 /* Can be overwritten by style attribute in iframe element. Percent is relative to container width */
    height        : 560px; /* 512px; */                                 /* Percent yields always the same height of e.g. 150px */
}


/** ruleset 20260205°1111 Give table cells borders as default
 *  ref 20260204°1122
 */
table {                                                                 /* rule 20260205°1113 */
    border-collapse : collapse;
    margin-bottom   : 0.9em;                                            /* Some additional space is mostly wanted, isn´t it? */
 }

 table td, th {                                                         /* rule 20260205°1115 */
    border          : 1px solid LightGray;
    padding         : 0 0.2em 0 0.2em;
    text-align      : left;
    vertical-align  : top
  }

/* rule 20260205°1121 */
.Lmp_TblNoBorders td, th { border: None; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ruleset 20251220°0711 <pre> boxes with plaintext reference records
 */
.Hy_Pre_Linkbox {
    font-size        : 0.81em;
    line-height      : 1.4em;
    padding-left     : 47px;
}
.Hy_Pre_Linkbox img {
    float            : left;
    margin-left      : -41px;
    margin-top       : 24px;
    padding-right    : 8px;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */


/** rule 20251009°0721
 *  summary : Sup is used for annotating objects with timestamps. Wanted properties:
 *            1. Avoid the SUPs to sick out at the top and thus making the line higher as otherwise
 *            2. Possibly and compress the width
 *            3. Avoid right-align on all except the page footer ones (see 20260110°1011)
 *  ref : https://chat.mistral.ai/chat/966f3968-489d-41cc-bba9-c82e15540ed8 [ref 20251209°1132 📡]
 */
sup {
    color           : LightGray; /* #909090; */                         /* LightGray */
    display         : inline-flex; /* inline-block; */                  /* To allow max-width */
    font-size       : 0.67em;
    font-style      : italic;
    line-height     : 0.9em;
    padding-left    : 0.1em;
    vertical-align  : text-top;
}


/** rule 20260110°1011 'Footer Sups'
 *  summary : If the Sup is in the last paragraph on a page area, then right-align it
 *  note : Making the color different from the plain <sup> just does not work
 *  note : As a workaround against false positives, put a "<em></em>" at the end of the paragraph, this
 *          makes for a second child, so the ´sup´ is no more the only child. [workaround 20260113°0911].
 */
/* div.PageArea > p:last-of-type:has(> sup:only-child) { */             /* Only if it is the last immediate child paragraph on the page area plus has a Sup (ref 20260223°0702 📡) */
/* div.PageArea > p:last-child:has(> sup:only-child) { */               /* Only if it is the last immediate child paragraph on the page area plus has a Sup (ref 20260223°0702 📡) */
/* div.PageArea > p:has(> sup:only-child) { */                          /* Paragraph containing nothing else but a Sup */
div.PageArea > p:has(> sup:only-child):not(:has(> *:not(sup), :not(sup))) {  /* Paragraph containing nothing else but a Sup, also no text and no whitespace */
    margin-top  : 1.1em;                                                    /* Just fancy */
    text-align  : right;
    /* color    : red;                                                  /* Debug */
}


/**
 * rule 20251003°1311 'Chapter pane' (following daftari.css rule 20160617°0211 ChapterFaceNormal)
 * note : IE does not understand max-width, so as a compromise, apply
 *         the elements a width as well (following workaround 20100822°1323).
 * note : 'margin:0 auto;' seems to have the div centered instead of leftside
 * see : ref 20170306°0411 'stackoverflow → css style inheritance'
 */
div.PageArea {
    background-color : #fcfcfc;
    border           : 2px dotted Magenta;                              /* Debug */
    border-radius    : 0.7rem;
    box-shadow       : 6px 6px 11px 11px #d0d0d0;                       /* line 20240329°1331 Added */
    margin           : 0 auto;
    max-width        : 1000px;  /* 900px */
    width            : 88%;                                               /* chg 20211211°0918 Before it was 'max-width:780px; width:84%;' */               padding:0.3em 0.9em 0.3em 0.9em;
    margin-top       : 0.4rem;                                            /* On change, sync values in seq 20260326°1141 in file 20260326°1011 probe-33-sidebar.js */
    margin-bottom    : 3.1rem;                                            /* On change, sync values in seq 20260326°1141 in file 20260326°1011 probe-33-sidebar.js */
}

/* rule 20250929°1211 */
div.LanguageDiv {
    background-color : var(--member-div-color);
    border           : 1px solid SkyBlue; border-radius:0.7rem;
    padding          : 0 0.7rem 0.7rem 0.7rem; margin:1.1rem 0.7rem 1.1rem 0.7rem;
}

/** rule 20250929°1231
 *  usage : Chapters Articles, Imprint, Privacy
 */
div.ArticlesDiv {
    background-color : var(--box-articles-color);
    border           : 1px solid SkyBlue; border-radius:0.4rem;
    padding          : 0.7rem; margin:1.1rem 0.7rem 1.1rem 0.7rem;
}

/** rule 20250929°1241
 *  usage :
 */
div.AssociationDiv {
    border           : 1px solid SkyBlue;
    background-color : PaleTurquoise;
    border-radius    : 0.4rem;
    margin           : 0.7rem;
    padding          : 0.7rem;
}

/* rule 20251001°0711 */
div.GoDownDiv a {
    background-color : var(--go-below-item-color);
    border           : 1px solid Transparent;                           /* SkyBlue */
    border-radius    : 0.3rem;
    margin           : 0 0.1rem 0 0.1rem;
    padding          : 0 0.3rem 0 0.3rem;
}


/**
 *  ruleset 20260110°0721 Font sizes
 *  See https://chat.mistral.ai/chat/55572f72-480a-4f2e-9c19-1b4205fd0770 [ref 20260115°1314 📡] Quest "Of which font-size in 'em' are the 'large', 'x-large' and 'xx-large' CSS values?"
 *  Since in body we have font-size a bit enlarged (1.1em) we need here also one tick
 *  larger values than in the browser default stylesheets (see ref 20260115°1314)
 */
/* .FontBig, */                                                         /* ELIMINATED */
.lmp-font-big { font-size : 1.3em; }                                    /* .FontBig { font-size:large; } [rule 20260118°1011] */

/* .FontHuge, */                                                        /* ELIMINATED */
.lmp-font-huge  { font-size : 1.6em; }                                  /* .FontHuge { font-size:x-large; } [rule 20260118°1013] */

/* .FontGiant, */                                                       /* ELIMINATED */
.lmp-font-giant { font-size : 2.1em; }                                  /* .FontGiant { font-size:xx-large; } [rule 20260118°1015] */

/* .FontSmall, */                                                       /* ELIMINATED */
.lmp-font-small { font-size : 0.81em; }                                 /* [rule 20260118°1021] */

/* .FontTiny, */                                                        /* ELIMINATED */
.lmp-font-tiny  { font-size : 0.71em; }                                 /* [rule 20260118°1023] */

/* .FontMicro, */                                                       /* ELIMINATED */
.lmp-font-micro { font-size : 0.61em; }                                 /* [rule 20260118°1025] */

/* .FontFat, */                                                         /* ELIMINATED */
.lmp-font-fat { font-weight : bold; }                                   /* [rule 20260328°1311] */

/* .FontSerif, */                                                       /* ELIMINATED */
.lmp-font-serif { font-family : Georgia; }                              /* [rule 20260225°1411] */

/* .FontItalic, */                                                      /* ELIMINATED */
.lmp-font-italic { font-style : italic; }                               /* [rule 20260225°1413] */

/* .TinyGrayLink { font-size: small; } */
/* .TinyGrayLink a, */                                                  /* ELIMINATED */
.lmp-font-graylink a { color:#b0b0b0; text-decoration:none; }         /* [rule 20260426°0931] */

/* .HyFontTty, */                                                       /* ELIMINATED */
/* .FontTty, */                                                         /* ELIMINATED */
.lmp-font-tty { font-family : monospace, monospace; }                   /* [rule 20260118°1123} */

/* .HyFontGoodbye, */                                                   /* ELIMINATED */
/* .FontGoodbye, */                                                     /* ELIMINATED */
.lmp-font-goodbye { font-style : italic; color: Green; }              /* Todo: Get font like in Daftari [rule 20260118°1031] */

/* .HyNoWrap, */                                                        /* ELIMINATED */
/* .NoWrap, */                                                          /* ELIMINATED */
/* .FontNoWrap, */                                                      /* ELIMINATED */
.lmp-font-nowrap { white-space  : nowrap; }                             /* [rule 20260118°1121} */

/* .FontTodo, */                                                        /* ELIMINATED */
.lmp-font-todo { color: Crimson; font-size:0.8em; }                   /* [rule 20260416°1121] */

/* rule 20260227°0711
 * summary   : Time indication at the beginning of a paragraph, mostly in a Span
 * prototype : Page 20260301°1512
 */
.lmp-time-prefix {
    color            : SlateGray;
    font-family      : Georgia;
    font-size        : 0.9em;
    padding-right    : 0.4em;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
/**
 * ruleset 20260111°1141 (after 20260111°1041 'table.Table_Like_List_5')
 * usage        : Wrap list with sublists in <div markdown="1" class="lmp-render-list-as-table">
 *                 • The list lines resemble the rows, they should be empty
 *                 • The sublist lines resemble the columns
 * note         : JavaScript supported feature
 * prototype    : page 20251213°0731 docs/bees.md
 * prototype    : page 20141116°0611 app.hikedrive/trunk/pages/index.md
 */
.lmp-render-list-as-table {                                             /* rule 20260111°1043 */
    border-collapse : collapse;
}
.lmp-render-list-as-table {                                             /* rule 20260111°1045 */
    padding          : 0 0.2em 0 0.2em;
    vertical-align   : top;
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */


/* ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² */
/**
 *  ruleset 20260531°1031
 *  summary : For a breadcrumb line
 *  prototype :
 */
 .lmp-breadcrumbs {
    color           : DarkGreen;
    font-size       : 1.2em;
    margin-bottom   : -0.4rem;
}
.lmp-breadcrumbs a {
    color           : DarkGreen;
    padding         : 0 0.1rem 0 0.1rem;
}

/* ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² ² */
/* ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ */

/* ruleset 20251001°0841 For DIVs */
/* .Hy_Nav_MenuItems_Box, */                                            /* ELIMINATED */
.lmp-box-nav-menuitems {                                                /* rule 20251001°0842 */
    border        : 1px dotted LightGray;
    border-radius : 0.4em;
    width         : fit-content;
}

/* .Hy_Nav_MenuItems_Box p, */                                          /* ELIMINATED */
.lmp-box-nav-menuitems p {                                              /* rule 20251001°0843 */
    margin : 0;
}

/* .Hy_Nav_MenuItems_Box a, */                                          /* ELIMINATED */
.lmp-box-nav-menuitems a {                                              /* rule 20251001°0845 */
    background-color : var(--nav-menu-items-color);
    border           : 1px solid SkyBlue;
    border-radius    : 0.3rem;
    padding          : 0 0.5rem 0 0.5rem;
    white-space      : pre;
}

/* .Hy_Nav_MenuItems_Box span.CurrentChapter a, */                      /* ELIMINATED */
/* .lmp-box-nav-menuitems span.CurrentChapter a { */                    /* rule 20251001°0847 */
.CurrentChapter a {                                                     /* rule 20251001°0847 */
  /*  background-color : var(--nav-menu-item-current-chapter); */       /* (Experimentally shutdown 20260531°1041`01) */
    /* font-style    : italic; */
    /* font-weight   : bold; */
    white-space      : pre;
}

/* .Hy_Nav_MenuItems_Box span.CurrentPage a, */                         /* ELIMINATED */
/* .lmp-box-nav-menuitems span.CurrentPage a { */                       /* rule 20251001°0849 */
.CurrentPage a {                                                        /* rule 20251001°0849 */
    /* background-color : var(--nav-menu-item-current); */              /* (Experimentally shutdown 20260531°1041`02) */
    color            : Firebrick !important;
    cursor           : default;
    font-weight      : bold;
    pointer-events   : none;
    text-decoration  : none;
    white-space      : pre;
}

/* ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ ³ */
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

/* rule 20251001°0851 Target the DIV box itself */
/* .Hy_Nav_SubmenuItems_Box, */                                         /* ELIMINATED */
.lmp-box-nav-submenuitems {                                             /* rule 20251001°0852 */
    background-color : #ffff80;
    border           : 1px solid LightGray;
    border-radius    : 0.7rem;
    margin           : 0.2em 0 0.2em 0;
    padding          : 0 0.4rem 0 0.4rem;
    width            : fit-content;                                     /* Replaces "display:table-cell;" */
}

/* Target each paragraph inside the box */
/* .Hy_Nav_SubmenuItems_Box p, */                                       /* ELIMINATED */
.lmp-box-nav-submenuitems p {                                           /* rule 20251001°0853 */
    margin:0;
}

/* Target each link inside the box */
/* .Hy_Nav_SubmenuItems_Box a, */                                       /* ELIMINATED */
.lmp-box-nav-submenuitems a {                                           /* rule 20251001°0854 */
    background-color : var(--nav-submenu-items-color);
    border           : 1px solid SkyBlue; border-radius:0.3rem;
    margin           : 0 0 0 0; /* margin: 0 -0.1rem 0 -0.1rem; */
    padding          : 0 0.5rem 0 0.5rem;
    white-space      : pre;
}

/* Target specific link inside the box. Is 'CurrentPage' missing here?! */
/* .Hy_Nav_SubmenuItems_Box span.CurrentPage a, */                      /* ELIMINATED */
/*
.lmp-box-nav-submenuitems span.CurrentPage a {                          / * (Experimentally shutdown 20260531°1041`03) rule 20251001°0855 * /
    background-color : var(--nav-menu-item-current);
    cursor           : default;
    font-weight      : bold;
    pointer-events   : none;
    text-decoration  : none;
}
*/

/* .Hy_Nav_SubmenuItems_Box span.CurrentChapter a, */                   /* ELIMINATED */
/*
.lmp-box-nav-submenuitems span.CurrentChapter a {                       / * (Experimentally shutdown 20260531°1041`04) rule 20251001°0856 * /
    background-color : var(--nav-menu-item-current-chapter);
    font-weight      : bold;
}
*/

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */

/* rule 20260106°1041 Target the DIV box itself */
/* .Hy_Nav_PageSections_Box, */                                         /* ELIMINATED */
/* .lmp-div-page-sections, */                                           /* ELIMINATED */
.lmp-box-page-sections {                                                /* rule 20260106°1042 */
    margin           : 0 0 0.7em -0.4em;
    padding          : 0 0.2rem 0 0.2em;
    width            : fit-content;
}

/* Target each paragraph inside the box */
/* .Hy_Nav_PageSections_Box p, */                                       /* ELIMINATED */
/* .lmp-div-page-sections p, */                                         /* ELIMINATED */
.lmp-box-page-sections p {                                              /* rule 20260106°1043 */
    margin           : 0;
    padding          : 0.1em 0 0.1em 0;  /* 0.1em 0 0.05em 0; */
}

/* Target each link inside the box */
/* .Hy_Nav_PageSections_Box a, */                                       /* ELIMINATED */
/* .lmp-div-page-sections a, */                                         /* ELIMINATED */
.lmp-box-page-sections a {                                              /* rule 20260106°1044 */
    background-color : LightCyan;
    border           : 1px solid SkyBlue; border-radius:0.3rem;
    margin           : 0 0.1em 0 0.1em;
    padding          : 0 0.2em 0 0.2em;
    white-space      : nowrap;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */


/*  rule 20260217°0921 Mark links to empty pages
 *  Prototype in page 20260214°1114 app.freeplane/trunk/~readme.md
 */
 .lmp-link-lightgray { color: #B0B0B0; /* font-size:0.81em; */ }
 .lmp-link-lightgray a { color: #B0B0B0; /* font-size:0.81em; */ }


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
/** rule 20260217°1111
 *  summary : Put frame around image
 *  prototype : Page 20260217°1014´17
 */
.lmp-img-framed {
    border        : 1px solid LightGray;
    border-radius : 0.4em;
    padding       : 0.2em;

    /* See https://chat.mistral.ai/chat/64835d1b-96f2-4066-9f35-fc0a94fd903a [ref 20260217°1122] */
    box-sizing    : content-box;                                        /* Default: padding is added outside width/height */
    /* display    : block; */                                           /* Ensures padding is applied correctly */
}

/** rule 20260217°1131
 *  summary     : Put the logo on top-right of page
 *  prototype   : Page 20100808°2144 app.amaya/trunk/~readme.md
 *  note        : Not using `align="right"` is state-of-the-art, just sorrily this were
 *                 the only way to align something right for github-flavoured Markdown
 *  ref         : https://chat.mistral.ai/chat/698c079a-912a-46ce-8697-91106ae572a7 [ref 20260217°1312]
 */
.lmp-img-logo-top-right {
    float         : right;
}

/** rule 20260330°0821 'Image in centered box, with JavaScript support'
 *  summary : Image centered. Needs helper JavaScript seq 20260330°0831
 *  prototype : Page 20160515°0321 notepadplusplus.md
 *  see     : Mistral quest https://chat.mistral.ai/chat/602efd8c-a055-4630-bad4-5a0186c94c84 [ref 20260331°0726]
 */
p:has(img.lmp-img-centered) {
    /* border     : 2px dotted LightGray; */
    border-radius : 0.7em;
    color         : Green;
    font-family   : 'Comic Sans MS', 'Comic Neue', cursive, sans-serif;  /* 'Comi Neue' were available as <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet"> */
    padding       : 0.4em;
    text-align    : center;
    /*width       : fit-content; */                                     /* No! The paragraph must be 100% so the text-align:center appears relative to the page, not only inside the paragraph */
    /* box-sizing : content-box; */                                     /* Default: padding is added outside width/height */ /* See https://chat.mistral.ai/chat/64835d1b-96f2-4066-9f35-fc0a94fd903a [ref 20260217°1122] */
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */


/* rule 20250929°1223 */
span.TodoSpan {
    border           : 2px dotted Red;
    border-radius    : 0.4rem;
    color            : Red; background-color:LemonChiffon;              /* Green LemonChiffon Red White */
    font-size        : 0.85rem;
    font-style       : italic;
    padding          : 0 0.7rem 0 0.7rem;
}
span.TodoSpan a { color:Magenta; }                                      /* Red */


/* rule 20250929°1221 */
div.TodoAlignRight {
    background-color : LemonChiffon;                                    /* Green LemonChiffon Red White */
    border           : 2px dotted Red;
    border-radius    : 0.7rem;
    color            : Red;
    float            : right;
    font-size        : 0.85rem;
    font-style       : italic;
    max-width        : 66%;
    padding          : 0 0.7rem 0 0.7rem;                               /* padding-right:0.7rem; */
    text-align:right;
}
div.TodoAlignRight a { color:Magenta; }                                 /* Red */
div.TodoAlignRight p {
    display          : inline-block;                                    /* Trick to reduce space left/right of paragraph [trick 20251003°1011] 'Space left/right of paragraph' */
    line-height      : 1.4em;
    margin           : 0; padding:0;                                    /* Trick to reduce space above/below paragraph [trick 20251003°1021 'Space above/below paragraph'] */
}


/* rule 20251001°0921 */
div.ImageWithDescription { border: 1px dotted Gray;
                           color:Green; font-style:italic;
                           border-radius:0.7rem;
                           padding:0 0.7rem 0.7rem 0.7rem;
                           line-height:1.4;
                           margin:0.7rem 0.7rem 0.7rem 0.7rem;
                         }


/** rule 20251003°1031
 *  usage: members.md
 *  ref : https://www.perplexity.ai/search/have-several-div-of-a-specific-huEbcjW.T1yUKBAoySjx4g [ref 20251002°0946] Quest "I have several div of a specific class name in a HTML page and want give them different background-colors by counting them. How can i do this in CSS?"
 */
div.PageCoarseDivBox {
    border-radius    : 0.7rem;
    margin           : 1.1rem 0 1.1rem 0;
    padding          : 0.7rem;
}
div.PageCoarseDivBox:nth-child(2n) { background-color: Thistle; }
div.PageCoarseDivBox:nth-child(2n+1) { background-color: PaleGreen; }


/** rule 20251008°0711
 *  usage: meetings.md
 *  ref : https://chat.mistral.ai/chat/d49ac232-6eab-48d4-8637-94fe0147761e [ref 20251005°0904] Quest "I want an image scale it's width to the website's width, …"
 */
div.Img-Scale-To-Page-Width {
    overflow         : hidden;                                          /* Optional: prevents overflow */
    width            : 100%;                                            /* Takes full width of its parent */
}
div.Img-Scale-To-Page-Width img {
    display          : block;                                           /* Removes extra space below image */
    height           : auto;                                            /* Maintains aspect ratio */
    width            : 100%;                                            /* Scales image to container width */
}
.Img-Scale-To-Page-Width p { margin:0; font-size:0.71em; color:Green; text-align:right; font-style:italic; }
.Img-Scale-To-Page-Width p a { color:Green; }


/** rule 20251008°0731
 *  usage: meetings.md
 *  ref : https://chat.mistral.ai/chat/2bd3d224-1d6d-4beb-bd46-5c1d1b19fc27 [ref 20251005°0906] Quest "… ensure with CSS that the height of the div will cover the image?"
 */
div.Meeting-Div-Covering-Images {
    background-color : var(--member-div-color);                         /* AliceBlue; */
    border           : 2px solid LightGray; border-radius: 0.7rem;
    margin           : 1.1rem 0 1.1rem 0; padding: 0.7rem;
    display          : flow-root;
}


/** ruleset 20251228°0711 Fitted div
 *  see : ref 20251124°0718 Quest '… CSS style "display:table-cell;" … alternative'
 */
.hyp-div-fitted-box {
    border           : 2px solid LightGray;
    border-radius    : 0.7em;
    display          : block;
    margin-left      : 3.1rem;
    padding          : 0.2em 1.1em 0.2em 1.1em;
    width            : fit-content;
}
.hyp-div-fitted-box p { margin-top: 0; margin-bottom: 0; }


/** rule 20251009°0711
 *  summary     : Compact link lists and their caption, since we find the original vertical spacing a bit too generous
 *  advice      : Do not separate List items by blank lines, this will cause items with a paragraph inside.
 *                 Such 'paragraphed' items are too complicated to control for their vertical spacing.
 *  todo        : This are tricky empirically found values. Simplify if possible. [todo 20260126°0911]
 *  prototype   : E.g. page 20250928°0916 ~references.md
 *  refs        : ref 20251010°0712, ref 20251209°0714
 */

/* p + ul, p + ol { margin-top: -0.7em; color:Red; } */                 /* The List beginning behind a paragraph, not any nested List */
/* ol:nth-child(1), ul:nth-child(1) { margin-top: -0.7em; color:Red; } */  /* The List beginning behind a paragraph, not any nested List */
/* ol, ul { margin-top: -0.7em; border: 1px solid Red; } */             /* The List beginning behind a paragraph, not any nested List */
p + ol, p + ul { margin-top: -0.7em; }  /* border:1px solid Red; */     /* The List beginning behind a paragraph, not any nested List */

/* li > ol, li > ul { margin-top: -0.8em; } */                          /* Mested List beginnin, not a List behind a paragraph */
/* li > li, li > ul { margin-top: -0.7em; } */                          /* Affects sublists */
/* li + li { margin-top: -0.4em; color:Red; } */                        /* border: 1px solid Red; border-radius:0.7em; */ /* Affects sibling List items */
/* ol li, ul li { line-height: 1.5em; } */                              /* Spacing inside a List element */
/* li > p { margin-top:0; margin-bottom:0; } */ /* color:Magenta; */    /* General, replaces much of the other so far attempt [rule 20260126°0921] */

/** rule 20260228°0921 <div>
 *  summary     : For casual paragraph or list accentuation
 *  prototype   : Page 20260226°0911
 */
.lmp-box-orange-dotted {                                                /* rule 20260226°0913 */
    border        : 4px dotted Orange;
    border-radius : 0.7em;
    margin-bottom : 1.1rem;
    padding       : 0.2em 0.2em 0 0.7em;
}
.lmp-box-orange-dotted p:last-of-type {                                 /* rule 20260226°0915 */
    margin-bottom : 0.4em;                                              /* Avoid much empty space at the bottom */
}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/**
 * ruleset 20251018°0841 Tables
 * version : Two 20251018°0847 — With highlighting rows
 * note : Version three, with a crosshair, highlighting rows plus cols, would need JavaScript, see ref 20251010°1054
 * ref : https://www.perplexity.ai/search/i-want-format-a-html-table-so-1XavfAyYSuCKrwUDXn2VsQ [ref 20251010°1054] Quest "I want format a HTML table so that the rows background-color is alternately …"
 *
 */
.Hy_Table_Row_Highlight table {
    /* border-collapse: collapse; */                                    /* border-collapse disables border-radius inside the cells [finding 20251118°1741] */
    font-size        : 0.8em; line-height:1.2em;                        /* Custom supplement 20251018°0851 */
    /* width         : 100%; */
}
.Hy_Table_Row_Highlight td, th {
    /* padding       : 8px; */
    padding          : 0.1em 0.4em 0.1em 0.4em;
    text-align       : left;
    vertical-align   : text-top;                                        /* add 20251118°1731 */
}
/* Alternate row background colors */
.Hy_Table_Row_Highlight tr:nth-child(odd) {
    background-color : #d0f0ff;                                        /* lightblue */
    vertical-align   : text-top;                                        /* Custom supplement 20251018°0853*/
}
.Hy_Table_Row_Highlight tr:nth-child(even) {
    background-color : #d0ffd0;                                         /* lightgreen */
}
/* Alternate column shades */
.Hy_Table_Row_Highlight td:nth-child(odd), th:nth-child(odd) {
    background-color : rgba(255, 255, 255, 0.2);                        /* Transparency */
}
.Hy_Table_Row_Highlight td:nth-child(even), th:nth-child(even) {
    background-color : rgba(0, 0, 0, 0.05);                             /* Transparency */
}
/* Hover effect: highlight current row */
.Hy_Table_Row_Highlight tr:hover {
    background-color : #ffeeaa !important;                              /* light yellow on hover */
}
/* Hover effect: highlight current column */
.Hy_Table_Row_Highlight td:hover, th:hover {
    background-color : #ffeb99 !important;                              /* slightly different highlight */
}
/* Optional: Make the hovered column highlight extend vertically */
.Hy_Table_Row_Highlight td:hover::before, th:hover::before {
    background-color : rgba(255, 235, 153, 0.5);
    content          : "";
    height           : 100%;
    left             : 0;
    position         : absolute;
    top              : 0;
    width            : 1000vw;
    z-index          : -1;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
/**
 *  seq 20251207°0911
 *  summary : Make a <div> for an album of thumbnails
 *  prototype : Page 20210328°1911
 *  ref : https://www.perplexity.ai/search/how-can-i-make-css-display-inl-pVca4V6US8CAAL91dvtD3g [ref 20251206°1022]
 */
.Div_ThumbnailsAlbum {
    border           : 3px dotted LightSlateGray;
    border-radius    : 0.7rem;
    padding-left     : 0.7rem;
}

.Div_ThumbnailsAlbum p:has(img) {
    border           : 1px dotted LightGray; border-radius: 0.4rem;
    display          : inline-block;
    font-size        : small;
    line-height      : 1.3em;
    max-width        : var(--maxwidth, 188px);                          /* 188px is the default if --maxwidth is not set */
    padding          : 0.4em;
    vertical-align   : top;
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

/**
 *  ruleset 20260118°0911 For <div>
 *  summary : Yellow-Attention-Box <div>
 *  prototype :
 */
.lmp-box-attention {                                                    /* rule 20260118°0913 */
    background-color : Yellow;
    border           : 2px solid LightSlateGray;
    border-radius    : 0.4em;
    font-family      : monospace ;
    padding          : 0 0.7em 0 0.7em;
    margin           : auto;                                            /* Center the box */
    margin-bottom    : 0.4rem;
    margin-top       : 1.1rem;
    text-align       : center;                                          /* Center the text inside the box */
    width            : fit-content;
}
.lmp-box-attention p { margin:0 !important; }                           /* Sorrily _reboot.scss:130 seems stronger with margin-bottom:1rem */ /* rule 20260118°0915 */


/**
 *  ruleset 20260118°0921
 *  summary :
 *  prototype :
 */
.lmp-box-references {                                                   /* rule 20260118°0923 */
    border           : 2px solid SkyBlue;
    border-radius    : 0.7em;
    padding          : 0.7em 0.7em 0.7em 0.7em;
    width            : fit-content;
}

/**
 *  rule 20260118°0925
 *  summary : A plain list in the reference block collides with the icon, then zigzags to the left. Thus target and smooth such list.
 */
.lmp-reference-icon + p + ul {                                          /* Target an <ul> which follows an <p> which follows an <img class=""> */
    padding-left     : 95px;                                            /* Constant value is better than nothing, but not yet ideal. Ideal were a calculated value depending on the real icon width */
}


/**
 *  rules 20260416°0941
 *  summary : Paint a div as a TLDR box
 *  prototype :
 */
 .lmp-box-tldr {                                                        /* rule 20260416°0943 */
    border           : 3px dotted Lime;
    border-radius    : 0.7em;
    margin-bottom    : 0.7rem;                                          /* Compensate for too tight following. As is the same in other elements. Is there a general solution? [quest 20260421°1011] */
    padding          : 0.2em 0.7em 0 0.7em;
    width            : fit-content;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */


/* $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ */
/**
 *  ruleset 20260112°1041
 *  summary     : Provide alternative backdrops for Bootstrap dialogs
 *  note        : This rules are perhaps not used, just provided in stock
 */

/* rule 20260112°1051 Hide the default backdrop */
/* This class name must not be changed, it is defined inside Bootstrap (for shutdown use e.g. '___' postfix */
.modal-backdrop___ {
    display : none;
}

/* rule 20260112°1053 Transparent dot pattern */
.Custom_Backdrop_1 {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.5);                              /* Semi-transparent black */
    background-image :
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    background-size  : 20px 20px;
    z-index          : 1040;                                            /* Just below the modal, default modal z-index is 1050 */
    pointer-events   : none;                                            /* Allow clicks to pass through to the modal */
}

/* rule 20260112°1057 Grid pattern */
.Custom_Backdrop_3 {
    background-image :
       linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size  : 20px 20px;
}
/* $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/** ruleset 20260520°1111 Horizontal ruler */

hr { clear : both; }                                                    /* rule 20260525°1051 */

 /**
 *  rule 20260520°1113
 *  summary : Yet another try to provide the horizontal ruler before the Fineprint
 *             with a dedicated top margin, so there is no need for a `&nbsp;` anymore
 */
div.PageArea > hr:last-of-type:has(+ h4, + pre) {                       /* The last hr if it is follwed by either a h4 or a pre */
    border        : 1px solid DarkSlateGray;
    box-shadow    : 0 0 11px 3px DarkSlateGray;                         /* X and Y offsets relative to the element, blur, spread radius, color */
    clear         : both;                                               /* Just routinely */
    /* height     : 0; */                                               /* For Firefox ... */
    margin        : 2.7em auto 1.1em auto;
    width         : 94%;
 }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* eof */