/** (c) 1995-2026 Dr.-Ing. Raimund Reisacher */
html, body {background: #000000; color: #ffffff;}

a {color: #a0a0ff; background: inherit;}
a.linkRef button {background: #303030; color: #ffffff;}

blockquote {border-left: 4px solid #707070;}
blockquote, blockquote p {background: #303030; color: #f8f8f0;}
.breadcrumb {background-color: #f8f8f0; color: #303030;}

.btnCommand button {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%);}

button {font-weight: 400;}

div.form.doc.ctr:not(.hFold) button.btnFold {display: none;}
/* Why: a rendered Markdown document outside an hFold frame has no heading folding; without this rule the fold button the converter puts into every heading shows as a bare square touching the first letter (documentation pages, 2026-10-01). */
.md button.btnFold:not(.hFold *) {display: none;}
div.form.doc.ctr.hFold button.btnFold {font-size: inherit; background: inherit; color: inherit;}
div.form.doc.ctr.hFold button.btnFold.toggle::before {content: "▽";}
div.form.doc.ctr.hFold button.btnFold:not(.toggle)::before {content: "△";}

.gallery {background: #c0c0c0;}

.form, .form input, .form textarea {background: #000000; color: #f8f8f0; font-weight: 200;}
.formDet, .formDet input, .formDet textarea {border: 1px solid #f8f8f0;}
.form img {background: #c0c0c0; color: #ffffff; }
.form .tableForm {background: #081a2d; color: #f6f6f6; border-color: rgb(110 231 200 / 18%); border: 2px solid rgb(110 231 200 / 22%); border-spacing: unset;}
.form .detailForm {background: #000000; color: #ffffff; border: 2px solid #f8f8f0;}
.form .row, .form.column {padding: .5rem 1rem .5rem 1rem;}

.form button {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%);}
.form button.disabled {background: #505050; color: #ffffff; border: 1px solid #ffffff; font-style: italic;}
.form button.active {background: #606060; color: #ffffff; font-weight: bold; border: 1px solid #ffffff;}
.form button:not(.disabled):hover {background: #707070; color: #ffffff;}

.form .formBlock {border: 2px solid #565656;}
.form .formBlock form.ctr {border: 2px solid #565656;}
/* Why: tableForm and its detForm projection need one governed visual role set without changing the generic theme palette. */
.detForm .form {background: #081a2d; color: #f6f6f6; border-color: rgb(110 231 200 / 18%);}
.detForm .formBlock, .detForm .formBlock form.ctr {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}
.form .formBlock form.ctr >div >label, .form .formBlock form.ctr .flex.column >div >label {font-style: italic; font-weight: 900;}
.form .formBlock form.ctr .flex.column {width: 100%; padding: 0; margin: 0;}

/* Why: the header frame and its content need complete theme roles instead of a background token plus fixed colors. */
.form .formHeader {background: linear-gradient(90deg, #102438 0%, #15384b 52%, #10283c 100%); color: #f8f8f0; border: 1px solid #f8f8f0; outline: 1px solid #f8f8f0;}
.form .formHeaderTitle {text-align: start; background: linear-gradient(90deg, #102438 0%, #15384b 52%, #10283c 100%); color: #f8f8f8;}
.form .formHeaderText {background: linear-gradient(90deg, #102438 0%, #15384b 52%, #10283c 100%); color: #f8f8f8;}

.form .formFoot {background: #565656; color: #f8f8f0; border: 1px solid #f8f8f0;}

.form .text {width: 100%; overflow: auto; border: 1px solid #f8f8f0;}

.form .title, .form .title label {font-weight: 900;}

.form.doc .input.check:not(.disabled) input[type='checkbox'] {background-color: #000000; color: #000000; padding: .1rem .2rem;}
.form.doc .input.check.disabled input[type='checkbox'] {background-color: #303030; color: #303030; padding: .1rem .2rem}
.form.doc .input.check input[type='checkbox']::before {content: "✓"; font-weight: 900;}
/*.form.doc .input.check input[type='checkbox']::before {content: "X"; font-weight: 900;}*/
.form.doc .input.check input[type='checkbox']:checked {color: #f8f8f0;}

.tableForm .tableRow.active td >input[type='checkbox'] {background: #303030;}

.tableForm input {border: none;}
.form.doc .input.check input[type='checkbox'] {border: 1px solid #707070;}
.detailForm input {border: 1px solid #707070;}
.detForm .detColumnChild {background: #081a2d; color: #f6f6f6; border-color: rgb(110 231 200 / 18%);}

.tableForm .tableFormHead >div, .tableFormHead >div >textarea {background: #000000; color: #ffffff;}
.tableForm .listFrHead .tableFormVerticalResize >div {background: #565656; opacity: .98;}
.tableForm .tableFormSel >div, .tableFormSel div textarea, .tableFormSel div input {background: #565656;}
.tableForm .tableFormFoot {outline: 1px solid #f8f8f0; margin: 3px 2px;}

.tableForm .tableFormHead >div {font-weight: 400;}
.tableForm .tableFormHead .tableFormVerticalResize textarea, .tableForm .tableFormRow .tableFormVerticalResize textarea {background: #303030; color: #f8f8f0;}
.tableForm .tableFormSel .tableFormVerticalResize textarea {background: #565656;}
.tableForm .tableFormHead >div, .tableForm .tableFormSel >div, .tableForm .tableFormRow >div  {outline: 1px solid #f8f8f0;}
.tableForm .tableFormHead .tableFormHeaderBtn button {background: #565656; color: #f8f8f0; border: 1px solid #565656; }

.tableForm .mainTable {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%); font-weight: 200; border-spacing: unset;}
.tableForm .headColumn >div, .tableForm .selectColumn >div, .tableForm td.rowColumn >div {overflow: hidden; text-overflow: ellipsis;}

.tableForm .headRow, .tableForm .headRow input {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}
.tableForm .selectRow, .tableForm .selectRow input {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}

.tableForm .mainTable .headColumn {font-weight: 400; border: 1px solid rgb(110 231 200 / 22%); background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}
.tableForm .mainTable .headColumn.disabled {font-style: italic;}
.tableForm .mainTable .selectColumn {font-weight: 400; border: 1px solid rgb(110 231 200 / 22%); background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}
.tableForm .mainTable .selectColumn {border-bottom: 4px solid rgb(110 231 200 / 22%);}
.tableForm.hiddenSelect .mainTable .headColumn {border-bottom: 4px solid rgb(110 231 200 / 22%);}
/*table.tableForm {border-collapse: collapse;}*/

.tableForm .tableFormBody {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%); border: 1px solid rgb(110 231 200 / 22%); outline: 1px solid rgb(110 231 200 / 22%);}
.tableForm .tableRow {background: #0d3348; color: #f6f6f6; border-color: rgb(110 231 200 / 22%);}
.tableForm .tableRow td {border: 1px solid rgb(110 231 200 / 22%); background: #081a2d; color: #f6f6f6; border-color: rgb(110 231 200 / 18%);}
.tableForm.stripe .tableRow.odd:not(.active):not(:hover), .tableForm.stripe .tableRow.odd:not(.active):not(:hover) td, .tableForm.stripe .tableRow.odd:not(.active):not(:hover) td >div, .tableForm.stripe .tableRow.odd:not(.active):not(:hover) td >input {background: #0a2236;}
.tableForm .tableRow td.disabled {font-style: italic;}

.tableForm:not(.noBorder) td.range input:focus {outline: 2px solid #6ee7c8;}
.tableForm .tableRow:hover:not(.active) td, .tableForm .tableRow:hover:not(.active) td >div, .tableForm .tableRow:hover:not(.active) td >input {background: #12333b; color: #ffffff;}
.tableForm:not(.noBorder) .tableRow.active:not(.disabled) td {border-top: 2px solid #6ee7c8; border-bottom: 2px solid #6ee7c8;}
.tableForm:not(.noBorder) .tableRow.active.disabled td {border-top: 2px solid #d03030; border-bottom: 2px solid #d03030;}
.tableForm .tableRow.active td, .tableForm .tableRow.active td >div, .tableForm .tableRow.active td >input {background: #184449; color: #ffffff;}

.tableForm:not(.noBorder):not(.md):not(.noDivBorder) .tableColumn:not(.disabled) >div {border: 1px solid rgb(110 231 200 / 22%);}

.detForm.disabled >div.form, .detForm.disabled .formBlock.ctr >form {border-color: #d03030;}
.detForm .form .ctr.row >div >div {min-height: 1.7rem;}
.detForm input[type="range"], .tableForm input[type="range"] {background: #565656;}
.detForm input[type="range"]::-moz-range-thumb, .tableForm input[type="range"]::-moz-range-thumb {background: #ffffff;}
.detForm input[type="range"]::-webkit-slider-thumb, .tableForm input[type="range"]::-webkit-slider-thumb {background: #ffffff;}

.detForm .progress >div >div:first-child, .tableForm .progress >div >div:first-child {background: #404040; opacity: .7; color: #202020; border: 1px solid #101010; height: 1.3em; margin-left: 2px;}
.detForm .progress >div >div:last-child, .tableForm .progress >div >div:last-child {background: #f0f0f0; opacity: .7; color: #202020; border: 1px solid #101010; height: 1.3em; margin-right: 2px;}

.detForm .form div.disabled label.detColumnLabel {font-weight: normal; font-style: italic;}
.detForm .form div.disabled .detColumnChild, .detForm div.disabled >input {border-color: #565656; font-style: italic;}

.footer {background: linear-gradient(90deg,#102438 0%,#15384b 52%,#10283c 100%); border-top: 1px solid rgb(110 231 200 / 0.18); box-shadow: 0 -0.35rem 1.25rem rgb(2 12 27 / 0.24);}
.footer a {color: #a0a0ff;}
.footer a:link, .footer a:visited {background: transparent;}
.footer a:hover {background: rgb(110 231 200 / 12%); color: #ffffff;}

.uY div, .uZ div {background: #565656;}
.uZ div.z4 {background: #303030; color: #f8f8f0;}

.grid:not(.noBorder) {background: #000000; color: #ffffff; outline: 2px solid #303030;}
.grid svg line {stroke-width: 2px; stroke: #ffffff; fill: #ffffff;}
.gridBox, .gridBox.vertical {background: #303030; color: #f8f8f0; text-align: center; stroke: #ffffff; stroke-width: 1px;}
.gridFrame {background: #303030; color: #f8f8f0; border: 2px solid #565656;}
.gridFrame.gap {background: #000000; color: #ffffff; border: 1px solid #f8f8f0;}
.gridHead, .gridHead2 {background: #303030; color: #f8f8f0; border: 1px solid #f8f8f0; border-bottom: 2px solid #f8f8f0;}
.gridHead {font-weight: 900;}
.gridItem {background: #303030; color: #f8f8f0; border: 1px solid #f8f8f0;}
.gridItem.vertical {background: #303030; color: #f8f8f0; border: none;}
.gridHead.block, .gridHead2.block, .gridItem.block {border-left: 2px solid #f8f8f0; border-right: 2px solid #f8f8f0;}
.gridItem.vertical.block {border-left: 2px solid #565656;}
.gridGap.b, .gridGap.l, .gridGap.r, .gridGap.t {border-color: #ffffff;}
.gridLine.b, .gridLine.l, .gridLine.r, .gridLine.t {border-color: #ffffff;}
.gridLine svg text {color: #ffffff; fill: #565656;}
.gridOrg {text-align: center; background: #303030; color: #f8f8f0; border: 2px solid #ffffff;}
.gridOrg.vertical {text-align: center; background: #303030; color: #f8f8f0; border: 2px solid #ffffff; padding: 1em;}
.gridPickColor {background: #565656; border: 2px solid #565656;}
.gridPickSymbol {background: #565656; border: 2px solid #565656; grid-gap: 1px;}
.gridPickSymbol.awesome {grid-template-columns: repeat(8, 24px); grid-template-rows: repeat(6, 24px); max-height: 10em; overflow-y: auto;}
.gridPickSymbol.font {grid-template-columns: repeat(8, 24px); grid-template-rows: repeat(8, 24px); max-height: 10em; overflow-y: auto;}
.gridPickSymbol >div {background: #303030; color: #f8f8f0;}

.grid polygon {fill: #565656; stroke: #f8f8f0;}
.grid marker {fill: #f8f8f0;}
.grid marker polygon {fill: #f8f8f0;}
.grid svg text {background: #303030; color: #f8f8f0; stroke: #f8f8f0; stroke-width: 1px;}

/* spreadsheet theming ***************************************************** */
.gridWkb .gridItem {border: 1px solid gray;}

/* spreadsheet headings */
.gridWkb .gridItem.sticky,
.gridWkb .gridItem.sticky-1,
.gridWkb .gridItem.sticky-left,
.gridWkb .gridItem.sticky-top,
.gridWkb .gridItem.sticky-top-left {color: #ffffff; background: #000000;}

/* spreadsheet frozen panes */
.gridWkb .gridItem.sticky-left-1,
.gridWkb .gridItem.sticky-top-1,
.gridWkb .gridItem.sticky-top-left-1 {color: #d0d0d0; background: #202020; font-weight: 900;}

/* spreadsheet default cells */
.gridWkb .gridItem {color: #f8f8f8; background: #202020;}
.gridWkb .gridItem.label {color: #404040; background: #f0f0f0;}
.gridWkb .gridItem.locked {color: #202020; background: #d9d9d9;}
.gridWkb .s-1, .gridWkb .s-2, .gridWkb .s-3, .gridWkb .s-4 {color: #325b93; background: inherit;}

/* spreadsheet questionnaire */
.gridWkb.quest .gridItem:read-write {color: #202020; background: #fbe74d;}
.gridWkb.quest .gridItem.request:not(.true, .false) {color: #202020; background: #ffff54;}
.gridWkb.quest .gridItem.request.true {color: #202020; background: #fbe74d;}
.gridWkb.quest .gridItem.request.false {color: #202020; background: #f6c9cf;}


/* Why: each heading and title level owns one complete theme declaration while format-0 retains its geometry. */
h1 {font-weight: 900; background: #202020; color: #f8f8f0;}
h2 {font-weight: 900; background: #303030; color: #f8f8f0;}
h3 {font-weight: 900; background: #202020; color: #f8f8f0;}
h4 {font-weight: 900; background: #202020; color: #f8f8f0;}
h5 {font-weight: 400; background: #202020; color: #f8f8f0;}
h6 {font-weight: 200; background: #202020; color: #f8f8f0;}

t-1 {font-weight: 900; background: #202020; color: #f8f8f0;}
t-2 {font-weight: 900; background: #202020; color: #f8f8f0;}
t-3 {font-weight: 900; background: #202020; color: #f8f8f0;}
t-4 {font-weight: 900; background: #202020; color: #f8f8f0;}
t-5 {font-weight: 400; background: #202020; color: #f8f8f0;}
t-6 {font-weight: 400; font-style: italic; background: #202020; color: #f8f8f0;}

h1.logo, h1.logoTitle, t-1.logo {background: #404040; color: #f8f8f8;}

.s-1, .s-2, .s-3, .s-4 {font-weight: 900;}
.s-5 {font-weight: 400;}
.s-6, .s-7, .s-8 {font-weight: 200;}

header {background: #ffffff; color: #000000;}
.headerBtn {background: #565656; border: 2px solid #565656;}
.headerLabel {background: #000000; color: #ffffff;}
.headerTitle {background: #565656; font-weight: 900; border: 2px solid #565656;}
.headerText {background: #565656;}

.img.logo2, .img.logo2 img {background: inherit}

.main {background: #000000; color: #ffffff;}

.main .bar {background: #565656; border: 2px solid #f8f8f0;}
.main .bar >div {border: 1px solid #707070;}
.main .bar div.previewCtl {border-right: 1px solid #f8f8f0;}
.main .bar .tab:not(.focus, .active), .main .bar .tab:not(.focus, .active) >div {background: #565656;}
.main .bar .tab.focus, .main .bar .tab.active, .main .bar .tab.focus >div, .main .bar .tab.active >div {background: #303030; color: #f8f8f0;}
.main .bar .tab:hover, .main .bar .tab:hover >div {background: #303030;}

.main .bar button.textCtl, .main .bar button.barEllipsis, .main .bar button.barCts, .main .bar button.barCode {border: none; background: #303030; color: #f8f8f0;}
.main .bar .barCtl, .main .bar .barEllipsis, .main .bar .barCts, .main .bar .barCode {background: #303030; color: #f8f8f0;}
.main .bar button.barTab {background: #303030; color: #f8f8f0;}

.winRows >.l, .winRows >.r {background: #303030; color: #f8f8f0;}
.winRows .win {border: 2px solid #565656;}
.winRows .win.active {border: 2px solid #707070;}
.winRows .cts {background: #303030;}

.nav .navHead {background: #565656; font-weight: 900;}
.nav.btnChar-165 {background: #303030; color: #f8f8f0; transition: var(--transition-fast);}
.nav.btnBorder-180 .btnNav {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%); border: none;}
.nav.btnBorder-181 .btnNav {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%); border-width: 1px;}
.nav.btnBorder-182 .btnNav {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%); border-width: 2px;}

.nav, .nav.top {background: linear-gradient(90deg, #081a2d 0%, #0d3348 52%, #0a2236 100%); border-bottom: 1px solid rgb(110 231 200 / 0.22); box-shadow: 0 0.35rem 1.25rem rgb(2 12 27 / 0.28); color: #ffffff; opacity: .95;}
.nav.top ul, .nav.top li, .nav.top a, .nav.top button:not(.btnNav) {background: inherit; color: #ffffff; box-shadow: none; opacity: 1;}
.nav.top >ul {border: 2px solid #565656;}
/* Why: scrollbar colors belong to the active theme rather than the dark-teak navigation. */
.nav.top >ul {scrollbar-color: rgb(110 231 200 / 55%) #0b263a; scrollbar-width: thin;}

/*.nav.top >ul >li.toggleBtnFlag, .nav.top >ul >li:has(>ul.toggleMenuFlag) {z-index:1200;}*/

.nav.edit.seg >li {border: 1px solid #ffffff;}
.nav.edit.seg >li.insertElementList {border: 1px solid #ffffff;}
.nav.edit.seg >ul {border: 1px solid #707070; padding: 4px 2px; width: 100%; height: 100%; overflow-y: auto;}

.nav button:not(.btnNav) {background: #000000; color: #ffffff; border: 1px solid #f8f8f0;}
/* Why: keep the top command toolbox on the theme's nav-button palette instead of the nav-list background. */
.nav.top .btnCommand button {background: rgb(110 231 200 / 14%); color: #ffffff; border: 1px solid rgb(110 231 200 / 22%);}

.nav.edit li.insertElementList {border: 1px solid #ffffff;}
.nav .btnEdit.winSelect:not(.active) {background: #565656;}
.nav .btnEdit.winSelect.active, .nav .btnEdit.winSelect {background: #303030; color: #f8f8f0; border: 1px solid #f8f8f0;}
.nav .btnEdit.winSelect:hover {background: #303030; color: #f8f8f0;}

.nav a:not(.disabled, .btnCommand):hover {background: rgb(110 231 200 / 14%); color: #ffffff;}
.nav a.active {  background: rgb(110 231 200 / 22%); color: #ffffff; font-weight: bold;}
.nav a.disabled {background: rgb(255 255 255 / 6%); color: rgb(255 255 255 / 58%); font-style: italic;}
.nav.top a:not(.disabled, .btnCommand):hover, .nav.top button:not(.btnNav):hover {background: #707070; color: #ffffff;}

.nav a.active button, .nav a button.active {background: #606060; color: #ffffff; font-weight: bold; border: 1px solid #ffffff;}
#navEdit button.active, #navEditSide button.active {background: #606060; color: #ffffff; font-weight: bold; border: 1px solid #ffffff;}
#navEdit button.btnEdit.winSelect.active, #navEditSide button.btnEdit.winSelect.active {background: #303030; color: #f8f8f0; font-weight: bold; border: 1px solid #f8f8f0;}
.nav .btnCommand.active button {background: #606060; color: #ffffff; font-weight: bold; border: 1px solid #ffffff;}

.nav button.disabled {background: #505050; color: #ffffff; border: 1px solid #ffffff; font-style: italic;}

p {background: #303030; color: #f8f8f0;}
pre, .pre {color: #000000; background: #f8f0d0;}
.ul {background: #303030; color: #f8f8f0;}

.remark {background: #303030; border: 2px solid #303030; border-radius: .5rem;}
.remark p {background: #303030; border: 1px solid #303030; border-radius: .5rem;}

.range {background: #565656;}

.docInfo .docBaseInfo,.docInfo .docVersionInfo {background: #303030; color: #f8f8f0; border: 2px solid #565656; padding: .5rem; margin: .5rem;}
.docInfo textarea, .docInfo input {background: #303030; color: #f8f8f0;}

.form.doc .textEdit, .form.doc .textEdit p, .form.doc .textEdit div, .form.doc input.textEdit {color: #4caf50; border: 1px solid #4caf50;}
.form.doc input.textEdit {color: #4caf50; outline: 1px solid #4caf50;}
.form.doc .textHint, .textHint p, .textHint div {color: #f44336}
.form.doc .textCommentBlock, .textCommentBlock p, .textCommentBlock div {color: #2196f3}

input.placeholderGreen::placeholder {opacity: 1; color: green;}
input.placeholderRed::placeholder {opacity: 1; color: red;}

/* Document and website roles, shared by the website and rendered documentation: the placeholders feed custom properties,
   so a section identity overrides only its own values and page-scoped widget CSS reads the same colors (operator
   decision 2026-09-29). Geometry of these roles: format-0. */
:root {
  --text: #ffffff; --accent: #6ee7c8; --muted: rgb(248 251 255 / 0.82);
  --cardBackground: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(15 23 42 / 0.23)); --cardBorder: rgb(255 255 255 / 0.12); --cardMark: linear-gradient(90deg, #6ee7c8, #f4d394);
  --noteBackground: rgb(255 255 255 / 0.08); --noteTip: #bef264; --noteWarning: #fbbf24;
  --termBackground: rgb(255 255 255 / 0.08); --termBorder: rgb(255 255 255 / 0.1);
  --brandTitle: linear-gradient(90deg, #67e8f9 0%, #6ee7c8 52%, #bef264 100%);
  --statePrn: #4ade80; --stateReady: #60a5fa; --stateTest: #facc15; --statePrepare: #fb923c;
}
/* Why: rendered documentation stands on the surface of the first section identity and reads the same text roles, so
   a documentation page and the website show one design in every theme (operator 2026-09-30). Its root is `md` alone;
   `tableForm md` is the table of the vocabulary, never a root. */
.section.identity-1, .md:not(.tableForm) {--accent: #6ee7c8; --sectionLabel: #bff7df; --sectionLabelBackground: rgb(255 255 255 / 0.08); --sectionGrid: rgb(255 255 255 / 0.08); --sectionBackground: radial-gradient(circle at 84% 18%, rgb(45 212 191 / 0.2), transparent 28rem), radial-gradient(circle at 14% 82%, rgb(244 211 148 / 0.12), transparent 30rem), linear-gradient(135deg, #0b1d2b 0%, #0d3f49 48%, #111827 100%); --sectionVignette: linear-gradient(90deg, rgb(2 6 23 / 0.28), transparent 28%, transparent 74%, rgb(2 6 23 / 0.24)), linear-gradient(180deg, rgb(2 6 23 / 0.08), transparent 45%, rgb(2 6 23 / 0.22));}
.section.identity-2 {--accent: #f4d394; --sectionLabel: #f4e7c5; --sectionLabelBackground: rgb(15 23 42 / 0.22); --sectionGrid: rgb(244 211 148 / 0.094); --sectionBackground: linear-gradient(180deg, rgb(255 255 255 / 0.045) 0%, transparent 24%, rgb(3 7 18 / 0.16) 100%), linear-gradient(145deg, #252a31 0%, #33383c 48%, #1b2428 100%); --sectionVignette: linear-gradient(90deg, rgb(3 7 18 / 0.24), transparent 24%, transparent 76%, rgb(3 7 18 / 0.2)), linear-gradient(180deg, transparent 0 64%, rgb(9 20 24 / 0.28) 100%);}
.section.identity-3 {--accent: #f4d394; --sectionLabel: #f4e7c5; --sectionLabelBackground: rgb(15 23 42 / 0.22); --sectionGrid: rgb(244 211 148 / 0.094); --sectionBackground: linear-gradient(180deg, rgb(255 255 255 / 0.045) 0%, transparent 24%, rgb(3 7 18 / 0.16) 100%), linear-gradient(145deg, #262a2f 0%, #3a3931 48%, #1b2428 100%); --sectionVignette: radial-gradient(circle at 82% 18%, rgb(244 211 148 / 0.14), transparent 28rem), linear-gradient(90deg, rgb(3 7 18 / 0.24), transparent 24%, transparent 76%, rgb(3 7 18 / 0.2)), linear-gradient(180deg, transparent 0 64%, rgb(9 20 24 / 0.3) 100%);}

.section, .md:not(.tableForm) {color: var(--text); background: var(--sectionBackground);}
.md .md:not(.tableForm) {background: none;}
.section {box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);}
:is(.section, .md:not(.tableForm))::before {background-image: linear-gradient(var(--sectionGrid) 1px, transparent 1px), linear-gradient(90deg, var(--sectionGrid) 1px, transparent 1px);}
:is(.section, .md:not(.tableForm))::after {background: var(--sectionVignette);}
:is(.section, .md) :where(h1, h2, h3, h4, h5, h6, t-1, t-2, t-3, t-4, t-5, t-6, t-7, t-8, p, li) {background: transparent;}
:is(.section, .md) :where(h1, h2, h3, h4, h5, h6, t-1, t-2, t-3, t-4, t-5, t-6, t-7, t-8) {color: var(--text);}
.section h2 >span {color: var(--accent);}
.sectionLabel {color: var(--sectionLabel); background: var(--sectionLabelBackground); border-color: color-mix(in srgb, var(--accent) 30%, transparent);}
.lead {color: var(--muted);}
/* Why: low specificity, so a text class inside a document, such as `textHint`, keeps its color. */
.md :where(p, li) {color: var(--muted);}
.md:not(.tableForm) :where(strong, b) {color: var(--text);}
.md:not(.tableForm) a {color: var(--accent);}
/* Page header of a documentation document: the brand title and the line below it carry the brand gradient as their
   text color, as the title of the homepage does (operator 2026-09-30). Geometry: format-0. */
.pageHeader .brandTitle span, .pageHeader p {color: transparent; background: var(--brandTitle); -webkit-background-clip: text; background-clip: text;}
.pageHeader .brandTitle img {background: none;}

.note {color: var(--text); background: var(--noteBackground); border-left-color: var(--accent);}
.note.tip {border-left-color: var(--noteTip);}
.note.warning {border-left-color: var(--noteWarning);}
.note :where(h3, h4) {color: var(--text);}
.note p {background: transparent; color: var(--muted);}

/* Why: a shadow darkens in every theme, so its color stays fixed. */
.card >li {background: var(--cardBackground); border-color: var(--cardBorder); box-shadow: 0 16px 38px rgb(2 8 23 / 0.16);}
.card >li::before {background: var(--cardMark);}
.card h3 {color: var(--text);}
.card p {color: var(--muted);}

ul.term >li {color: var(--muted); background: var(--termBackground); border-color: var(--termBorder);}
/* A term pill shows the state of its project by its color, the most advanced state of the project's rows in the project
   table: in production, ready, in test, in preparation; a pill without a state class is planned (operator 2026-09-30).
   A linked pill opens the root document of its project and keeps the state color. */
ul.term >li.statePrn {color: var(--statePrn); border-color: color-mix(in srgb, var(--statePrn) 55%, transparent);}
ul.term >li.stateReady {color: var(--stateReady); border-color: color-mix(in srgb, var(--stateReady) 55%, transparent);}
ul.term >li.stateTest {color: var(--stateTest); border-color: color-mix(in srgb, var(--stateTest) 55%, transparent);}
ul.term >li.statePrepare {color: var(--statePrepare); border-color: color-mix(in srgb, var(--statePrepare) 55%, transparent);}
ul.term >li >a:any-link {color: inherit;}

:where(.section, .md) figcaption {color: var(--muted);}
.section figure img {box-shadow: 0 18px 45px rgb(2 8 23 / 0.28);}

/* `noChange` mutes a value repeated from the month before, so a change stands out (Quest overview, 2026-09-29). */
.previous, .noChange {color: color-mix(in srgb, var(--text) 55%, transparent);}
.noChange >[role="img"] {opacity: .55;}
.increase {color: var(--accent);}

/* Why: a rendered document table and a website table share one look, the card surface with row lines. */
:where(.section, .md) .tableForm.md:not(.noFrame) {background: var(--cardBackground); border-color: var(--cardBorder);}
.section .tableForm.md:not(.noFrame) {box-shadow: 0 18px 45px rgb(2 8 23 / 0.2);}
:where(.section, .md) .tableForm.md .mainTable, :where(.section, .md) .tableForm.md .mainTable .headColumn {background: transparent; color: var(--text);}
:where(.section, .md) .tableForm.md .mainTable .tableRow, :where(.section, .md) .tableForm.md .mainTable .tableRow td, :where(.section, .md) .tableForm.md .mainTable .tableRow td >div {background: transparent;}
:where(.section, .md) .tableForm.md .mainTable :is(.headColumn, .tableColumn) {border: 0; border-bottom: 1px solid var(--cardBorder);}
:where(.section, .md) .tableForm.md .mainTable .tableColumn {color: var(--muted);}

@media screen {
  /* text folding: hiding next div element */
  .hiddenDiv {background: orange;}
  .form.print {border: 1px solid black;}
}

@media screen and (max-width: 36rem) {
  .linkNav-1, .linkNav-2, .nav.top ul li {background-color: #000000; color: #707070; }
}

.form.print {background: #ffffff; border: 1px solid black; hyphens: none;}
.form.print button.btnFold {display: none;}

.form.print p,
.form.print h1, .form.print h2, .form.print h3, .form.print h4, .form.print h5, .form.print h6,
.form.print t-1, .form.print t-2, .form.print t-3, .form.print t-4, .form.print t-5, .form.print t-6, .form.print t-7, .form.print t-8,
.form.print .tableForm .tableRow, .form.print .gridFrame
{background: #ffffff; color: #000000;}

.form.print .tableForm:not(.noBorder) {border: 2px solid #303030;}

.form.print .tableForm .headRow, .form.print .tableForm .headRow input {background: #f8f8f8; color: #202020;}
.form.print .tableForm .selectRow, .form.print .tableForm .selectRow input {background: #f8f8f8; color: #000000;}
.form.print .tableForm .tableRow td {background: #ffffff; color: #000000; border: 1px solid #707070;}
.form.print .tableForm.stripe .tableRow.even, .form.print .tableForm.stripe .tableRow.even td, .form.print .tableForm.stripe .tableRow.even td div, .form.print .tableForm.stripe .tableRow.even td >input {background: #ffffff;}
.form.print .tableForm.stripe .tableRow.odd, .form.print .tableForm.stripe .tableRow.odd td, .form.print .tableForm.stripe .tableRow.odd td div, .form.print .tableForm.stripe .tableRow.odd td >input {background: #f8f8f8;}

.form.print .tableForm .tableRow:hover:not(.active) td, .form.print .tableForm .tableRow:hover:not(.active) td >div, .form.print .tableForm .tableRow:hover:not(.active) td >input {background: #f0f0f0;}

.form.print .gridFrame, .form.print .printHeader, .form.print .adrHeader, .form.print .adrBody,
.form.print .textEdit, .form.print .textEdit p, .form.print .textEdit div, .form.print input.textEdit,
.form.print input.textEdit
{background: #ffffff; color: #000000; border: none; outline: none;}

.form.print .form.doc, .form.print .detForm, .form.print .tableFormBody
{background: #ffffff; border: none; outline: none; padding: 0;}

.form.print .printBodyTitle {font-weight: 900;}
.form.print .printBodyHead .headTitle, .form.print .printTopTitle {font-weight: 900;}
.form.print .printBodyHead .headBody {font-weight: 200;}

@media print {
  .form.print {border: none;}
}