/* ++C++; // 未確認飛行 C - site stylesheet */

:root {
  color-scheme: light;
  --color-page-bg: #f3f3f3;
  --color-content-bg: #ffffff;
  --color-text: #4c4c4c;
  --color-heading: #483949;
  --color-text-secondary: #808080;
  --color-brand-lavender: #ccccff;
  --color-brand-navy: #2a3869;
  --color-brand-navy-hover: #455282;
  --color-brand-rule: #484a44;
  --color-content-link: #a35951;
  --color-border: #dddddd;
  --color-image-border: #696969;
  --color-code-border: #ccccff;
  --color-code-console: #606060;
  --color-code-keyword: #0000ff;
  --color-code-control: #8f08c4;
  --color-code-preprocessor: #808080;
  --color-code-excluded: #808080;
  --color-code-comment: #008000;
  --color-code-string: #a31515;
  --color-code-number: #098658;
  --color-code-type: #2b91af;
  --color-code-struct: #007acc;
  --color-code-method: #74531f;
  --color-code-field: #004080;
  --color-code-property: var(--color-code-field);
  --color-code-event: var(--color-code-property);
  --color-code-enum-member: var(--color-code-field);
  --color-code-constant: #0070c1;
  --color-code-variable: #000080;
  --color-code-operator: #004080;
  --color-code-highlight: #e0ffff;
  --color-editorial-highlight: rgba(238, 239, 118, 0.75);
  --font-sans: "Hiragino Kaku Gothic Pro", "Meiryo", "Yu Gothic", YuGothic,
    "MS PGothic", sans-serif;
  --font-mono: Consolas, "Courier New", Courier, monospace;
  --site-max-width: 1452px;
  --gutter-wide: 48px;
  --gutter-medium: 32px;
  --gutter-small: 8px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-page-bg);
}

body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

a:hover {
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid #66ccdd;
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Header */
.site-header {
  position: relative;
  color: var(--color-text);
  background: var(--color-brand-lavender);
  box-shadow: 0 1px 1px var(--color-border);
}

.site-header-inner {
  min-height: 100px;
  padding: 0 var(--gutter-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-brand {
  margin: 0;
  line-height: 0;
}

.site-title {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.site-logo {
  display: block;
  width: 450px;
  height: 65px;
}

.site-search-link {
  padding: 0.4rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: underline;
}

.site-search-link::before {
  content: "\1F50D";
  font-size: 1em;
  line-height: 1;
}

.site-search-link:hover {
  background: rgba(255, 255, 255, 0.55);
}

.site-search-form {
  max-width: 42rem;
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid #767676;
  border-radius: 10px;
  background: var(--color-content-bg);
}

.site-search-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.site-search-controls {
  display: flex;
  gap: 0.75rem;
}

.site-search-controls input[type="search"] {
  min-width: 0;
  flex: 1;
  padding: 0.65rem 0.75rem;
  border: 1px solid #767676;
  border-radius: 4px;
  color: var(--color-text);
  font: inherit;
}

.site-search-controls button {
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-brand-navy);
  border-radius: 4px;
  background: var(--color-brand-navy);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.site-search-controls input[type="search"]:focus-visible,
.site-search-controls button:focus-visible {
  outline: 3px solid var(--color-brand-rule);
  outline-offset: 2px;
}

.site-nav {
  border-top: 5px solid var(--color-brand-rule);
  background: var(--color-brand-navy);
  color: #ffffff;
}

.site-nav ul {
  max-width: 1356px;
  min-height: 50px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  list-style: none;
}

.site-nav li {
  display: flex;
}

.site-nav a {
  padding: 0 1.4em;
  display: flex;
  align-items: center;
  color: inherit;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--color-brand-navy-hover);
  color: #ffffff;
  text-decoration: none;
}

/* Page shell */
.site-body {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto 48px;
  padding: 48px var(--gutter-wide) 0;
}

.site-main {
  width: 100%;
  min-width: 0;
}

/* Content */
.content {
  padding: 16px;
  border: 1px solid rgba(192, 192, 192, 0.35);
  background: var(--color-content-bg);
  line-height: 1.5;
}

.content.article {
  padding: 0;
  border: 0;
  background: transparent;
}

.content.article .article-body {
  margin: 1rem 0;
  padding: 16px;
  border: 1px solid rgba(192, 192, 192, 0.35);
  background: var(--color-content-bg);
}

.content.article .article-body > h2:first-child,
.content.article .article-body > p:first-child {
  margin-top: 0;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--color-heading);
  line-height: 1.25;
  text-wrap: balance;
}

.content h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 6px 8px;
  border-radius: 0.2em;
  background: var(--color-brand-navy);
  color: var(--color-page-bg);
  font-size: 28px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.content.article > h1 {
  margin-bottom: 0;
}

.content h2 {
  position: relative;
  margin: 20px 0;
  padding: 4px 4px 4px 24px;
  font-size: 22px;
  font-weight: 400;
}

.content h2::before {
  content: "";
  position: absolute;
  inset: 2px auto 2px 0;
  width: 8px;
  background: var(--color-brand-navy);
}

/* Longhands, not the `margin` shorthand: `margin` would declare margin-left: 0
   at (0,1,1) and defeat the legacy `.version` marker's margin-left at (0,1,0).
   ufcpp.net uses margin-top/margin-bottom here for the same reason. */
.content h3 {
  margin-top: 16px;
  margin-bottom: 16px;
  color: var(--color-brand-navy);
  font-size: 18px;
  font-weight: 700;
}

.content h4 {
  margin-top: 16px;
  margin-bottom: 16px;
  color: #2b91af;
  font-size: 16px;
  font-weight: 700;
}

.content h5 {
  margin-top: 16px;
  margin-bottom: 16px;
  color: var(--color-brand-navy);
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
}

.content h6 {
  margin-top: 16px;
  margin-bottom: 16px;
  color: var(--color-brand-navy);
  font-size: 16px;
  font-weight: 400;
}

.content p {
  margin: 1em 0;
  text-indent: 1em;
  text-wrap: pretty;
}

.content li p,
.content blockquote p,
.content figcaption p,
.content td p,
.content th p {
  text-indent: 0;
}

.content a {
  color: var(--color-content-link);
  overflow-wrap: anywhere;
}

.content ul,
.content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.content ol {
  padding-left: 2em;
}

.content li {
  margin: 0.2em 0;
}

.content em,
.content .keyword {
  padding: 0 2px;
  background: var(--color-editorial-highlight);
}

.content figure {
  margin: 0.5em 0;
}

.content figcaption,
.content table caption {
  margin: 0.3em 0;
  font-weight: 700;
  text-align: center;
}

.content img {
  display: block;
  max-width: 95%;
  margin: 0 auto;
  border: 1px solid var(--color-image-border);
}

/* Code */
code {
  margin: 0 2px;
  padding: 1px 2px;
  border: 1px solid var(--color-code-border);
  border-radius: 0.2em;
  color: #000000;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  max-width: 100%;
  margin: 1em 0;
  padding: 0.4em;
  overflow: auto;
  border: 2px solid var(--color-code-border);
  background: var(--color-content-bg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.3;
}

pre code {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}

.content pre code mark.code-highlight {
  padding: 0 2px;
  color: inherit;
  background: var(--color-code-highlight);
  font-style: normal;
  font-weight: 700;
}

.content pre code .error {
  border-bottom: dotted medium #f00;
}

.content pre code .warning {
  border-bottom: dotted medium #008000;
}

pre.console,
pre.console code {
  background: var(--color-code-console);
  color: #ffffff;
}

.content pre.console code mark.code-highlight {
  color: #ffffff;
  background: var(--color-code-console);
  border-bottom: 1px solid #ff8080;
  font-weight: 400;
}

.content pre code .keyword {
  padding: 0;
  color: var(--color-code-keyword);
  background: transparent;
}

.content pre code .controlKeyword,
.content pre code .htmlTagDelimiter,
.content pre code .htmlOperator,
.content pre code .xmlDelimiter {
  color: var(--color-code-keyword);
}

.content pre code .preprocessorKeyword {
  color: var(--color-code-preprocessor);
}

.content pre code .comment,
.content pre code .htmlComment,
.content pre code .xmlDocComment,
.content pre code .xmlComment {
  color: var(--color-code-comment);
}

.content pre code .string,
.content pre code .stringCSharpVerbatim,
.content pre code .htmlElementName {
  color: var(--color-code-string);
}

.content pre code .xmlName {
  color: var(--color-code-string);
}

.content pre code .type,
.content pre code .powershellType,
.content pre code .className {
  color: var(--color-code-type);
}

.content pre code .htmlAttributeName,
.content pre code .xmlAttribute,
.content pre code .cssPropertyName {
  color: #c00000;
}

.content pre code .htmlAttributeValue,
.content pre code .xmlAttributeValue,
.content pre code .cssPropertyValue {
  color: #0000e1;
}

.content pre code .jsonKey {
  color: #a04b00;
}

.content pre code .jsonString {
  color: #007070;
}

.content pre code .powershellVariable {
  color: #c43b00;
}

.content pre code .powershellCommand {
  color: #000080;
}

/* Roslyn C# semantic classifications */
.content pre code .roslyn-keyword {
  color: var(--color-code-keyword);
}

.content pre code .roslyn-preprocessor-keyword {
  color: var(--color-code-preprocessor);
}

.content pre code .roslyn-keyword-control {
  color: var(--color-code-control);
}

.content pre code .roslyn-comment,
.content pre code [class*="roslyn-xml-doc-comment-"] {
  color: var(--color-code-comment);
}

.content pre code .roslyn-excluded-code {
  color: var(--color-code-excluded);
}

.content pre code .roslyn-string,
.content pre code .roslyn-string-verbatim,
.content pre code .roslyn-string-escape-character {
  color: var(--color-code-string);
}

.content pre code .roslyn-number {
  color: var(--color-code-number);
}

/* Every kind of type carries .roslyn-type-name, so a kind we have no rule for
   (a future union, say) still gets the default type color. */
.content pre code .roslyn-type-name {
  color: var(--color-code-type);
}

.content pre code .roslyn-type-name.roslyn-struct-name,
.content pre code .roslyn-type-name.roslyn-record-struct-name {
  color: var(--color-code-struct);
}

.content pre code .roslyn-method-name,
.content pre code .roslyn-extension-method-name {
  color: var(--color-code-method);
}

.content pre code .roslyn-field-name {
  color: var(--color-code-field);
}

.content pre code .roslyn-property-name {
  color: var(--color-code-property);
}

.content pre code .roslyn-event-name {
  color: var(--color-code-event);
}

.content pre code .roslyn-enum-member-name {
  color: var(--color-code-enum-member);
}

.content pre code .roslyn-constant-name {
  color: var(--color-code-constant);
}

.content pre code .roslyn-local-name,
.content pre code .roslyn-parameter-name {
  color: var(--color-code-variable);
}

.content pre code .roslyn-operator,
.content pre code .roslyn-operator-overloaded {
  color: var(--color-code-operator);
}

.content pre code .roslyn-obsolete-symbol {
  text-decoration: line-through;
}

.reserved,
.language-csharp .reserved {
  color: var(--color-code-keyword);
}

.control {
  color: var(--color-code-control);
}

.inactive {
  color: #808080;
}

.comment {
  color: var(--color-code-comment);
}

.type {
  color: var(--color-code-type);
}

.method {
  color: var(--color-code-method);
}

.string {
  color: var(--color-code-string);
}

/* Tables and quotations */
table {
  width: max-content;
  max-width: 100%;
  margin: 1em auto;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

th,
td {
  padding: 0.2em 0.3em;
  border: 1px solid #c0c0c0;
  text-align: left;
  vertical-align: middle;
}

th {
  background: #eeeeee;
  font-weight: 700;
}

.content .math {
  font-family: "Times New Roman", serif;
  font-style: italic;
}

.content span.math {
  display: inline-block;
}

.content div.math {
  margin: 0.2em 1.5em 0.5em;
}

.content table.frac,
.content table.sigma,
.content table.integral,
.content table.matrix,
.content table.branch,
.content table.subsup {
  width: auto;
  max-width: none;
  margin: 0;
  display: inline-table;
  overflow: visible;
  vertical-align: middle;
  font-family: "Times New Roman", serif;
  font-style: italic;
  text-align: center;
}

.content table.frac td,
.content table.sigma td,
.content table.integral td,
.content table.matrix td,
.content table.branch td,
.content table.subsup td {
  border: 0;
  text-align: center;
}

.content table.frac {
  font-size: 90%;
}

.content table.frac td {
  padding: 0;
}

.content table.frac td.num {
  /* ufcpp.net pins this rule to a literal #4c4c4c rather than the inherited
     colour, so the fraction bar stays neutral even inside coloured blocks such
     as `table.variable`. `--color-text` is that same value. */
  border-bottom: 1pt solid var(--color-text);
}

.content table.sigma td {
  padding: 0;
}

.content table.sigma td.sigma {
  font-size: 120%;
  font-style: normal;
}

.content table.sigma td.sigmasub {
  font-size: 70%;
}

.content span.integral,
.content span.ointegral {
  font-size: 140%;
  font-style: normal;
  vertical-align: middle;
}

.content span.integral {
  margin-right: -0.1em;
}

.content span.ointegral {
  margin-right: -0.4em;
}

.content table.integral {
  padding-right: 0.3em;
  padding-left: 0.1em;
  font-size: 80%;
}

.content table.integral td {
  margin: 0;
  padding: 0;
}

.content table.integral td.intsup {
  text-align: right;
}

.content table.integral td.intsub {
  text-align: left;
}

.content table.matrix td,
.content table.branch td {
  padding: 0.1em 0.25em;
}

.content table.subsup {
  padding-left: 1em;
  font-size: 80%;
}

.content table.subsup td {
  padding: 0;
}

.content .math span.normal {
  font-weight: 400;
  font-style: normal;
}

.content .math span.paren,
.content .math span.matrix {
  vertical-align: middle;
}

.content .math span.paren {
  font-style: normal;
}

.content .math span.vector {
  font-weight: 700;
}

.content .math span.bold {
  font-weight: 700;
  font-style: normal;
}

.content .math span.bar {
  display: inline-block;
  border-top: 1pt solid currentColor;
}

.content .math span.cursive,
.content .math span.script {
  padding-right: 0.2em;
  font-family: cursive;
  font-style: italic;
}

blockquote {
  position: relative;
  margin: 1em 0;
  padding: 0.5em 0.5em 0.5em 1em;
  color: var(--color-text);
}

blockquote::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.5em;
  background: #eeeeee;
}

math {
  font-size: 1.1em;
}

/* Metadata and version markers */
.entry-meta {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.entry-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.entry-tag {
  padding: 0.1em 0.5em;
  border: 1px solid #c0c0c0;
  border-radius: 0.2em;
  background: #eeeeee;
  color: var(--color-text);
}

/* Context navigation */
.content .breadcrumbs {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.content .breadcrumbs ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}

.content .breadcrumbs li {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.content .breadcrumbs li + li::before {
  margin: 0 0.55rem;
  color: #a0a0a0;
  content: "\203A";
}

.content .breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.content .breadcrumbs a:hover {
  text-decoration: underline;
}

.content .breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.content.article .breadcrumbs {
  margin: 8px 0 0;
  font-size: 1rem;
}

.content.article .breadcrumbs [aria-current="page"] {
  color: inherit;
  font-weight: 400;
}

.content .around-article {
  margin: 1em 0;
}

.content .around-article::after {
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
  content: ".";
}

.content .around-article a {
  width: 48%;
  margin: 0;
  padding: 4px 8px;
  display: block;
  border: 0;
  border-radius: 0.2em;
  background-color: rgba(128, 128, 128, 0.2);
  color: var(--color-text);
  text-decoration: none;
}

.content .around-article a:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

.content .next-article {
  float: right;
  text-align: right;
}

.content .previous-article {
  float: left;
  text-align: left;
}

.content .article-navigation-arrow {
  font-size: 16px;
}

.content .next-article .article-navigation-arrow {
  margin-left: 0.25em;
}

.content .previous-article .article-navigation-arrow {
  margin-right: 0.25em;
}

.article-meta {
  margin: 0 0 8px;
  color: var(--color-text-secondary);
}

.content .sub-info-section {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  color: var(--color-text);
}

.content .sub-info-section a {
  color: inherit;
}

.content .sub-info-title {
  margin: 1rem 0;
  color: var(--color-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-indent: 0;
}

.content .toc ul {
  margin: 0.5em 0;
  padding-left: 1.5rem;
}

.content .toc li {
  margin: 0.2em 0;
}

.content .keywords ul {
  margin: 0 0 -8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.content .keywords li {
  margin: 0;
}

.content .keywords a {
  padding: 4px 8px;
  display: block;
  border-radius: 0.2em;
  background: rgba(128, 128, 128, 0.2);
  color: var(--color-text);
  text-decoration: none;
}

.content .keywords a::before {
  --keyword-key-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1696 1600'%3E%3Cpath d='M832 384q0-80-56-136t-136-56t-136 56t-56 136q0 42 19 83q-41-19-83-19q-80 0-136 56t-56 136t56 136t136 56t136-56t56-136q0-42-19-83q41 19 83 19q80 0 136-56t56-136m851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33t-38.5-40t-24.5-26l-96 96l220 220q28 28 28 68q0 42-39 81t-81 39q-40 0-68-28L733 893q-176 131-365 131q-163 0-265.5-102.5T0 656q0-160 95-313T343 95T656 0q163 0 265.5 102.5T1024 368q0 189-131 365l355 355l96-96q-3-3-26-24.5t-40-38.5t-33-36.5t-16-28.5q0-17 49-66t66-49q13 0 23 10q6 6 46 44.5t82 79.5t86.5 86t73 78t28.5 41'/%3E%3C/svg%3E");
  margin: 2px;
  display: inline-block;
  width: 1.06em;
  height: 1em;
  content: "";
  background-color: currentColor;
  font-size: 14px;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-mask: var(--keyword-key-icon) center / contain no-repeat;
  mask: var(--keyword-key-icon) center / contain no-repeat;
}

.content .keywords a:hover {
  background: rgba(0, 0, 0, 0.25);
}

.content [id] {
  scroll-margin-top: 1rem;
}

/* --- Legacy content styles -------------------------------------------------
   Ported from ufcpp.net's bundle.min.css so the raw HTML preserved in content/
   renders the way it does on the original site. See docs/css-parity.md for the
   full reconciliation and for the differences that are intentional.

   Every selector is wrapped in :where(.content) so these legacy names cannot
   leak into the site chrome. :where() adds zero specificity, so each rule keeps
   the exact weight it has on ufcpp.net — which some of them depend on. */

/* Version markers: <h5 class="version version13">, <div class="version version14">.
   Specificity is load-bearing here:
   - `.version` and `.versionN` must tie at (0,1,0) so the later `.versionN`
     wins the border colour. Promote only one of them and the `border-left`
     shorthand wins instead, turning every marker the same grey.
   - `.content h5` (0,1,1) must keep beating `.versionN` (0,1,0) for `color`,
     matching ufcpp.net where `.container h5` wins. Version *headings* stay
     navy; only `div.version.versionN` shows the per-version colour.
   `display: flexbox` in the original is an invalid legacy value that browsers
   drop, so it is not ported. */
:where(.content) .version {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 8px solid #b0b0c0;
}

:where(.content) .version2 {
  color: #ff0000;
  border-left-color: #ff8e8e;
}

:where(.content) .version3 {
  color: #00cc00;
  border-left-color: #8ecc8e;
}

:where(.content) .version4 {
  color: #0000cc;
  border-left-color: #8e8ecc;
}

:where(.content) .version5 {
  color: #cc00cc;
  border-left-color: #dd8ecc;
}

:where(.content) .version6 {
  color: #bbbb00;
  border-left-color: #dddd66;
}

:where(.content) .version7 {
  color: #00aacc;
  border-left-color: #66ccdd;
}

:where(.content) .version7_1 {
  color: #0000ff;
  border-left-color: #66ccdd;
}

:where(.content) .version7_2 {
  color: #00cc00;
  border-left-color: #66ccdd;
}

:where(.content) .version7_3 {
  color: #aa0000;
  border-left-color: #66ccdd;
}

:where(.content) .version8 {
  color: #ff0000;
  border-left-color: #ff8e8e;
  border-left-style: ridge;
}

:where(.content) .version9 {
  color: #00cc00;
  border-left-color: #8ecc8e;
  border-left-style: ridge;
}

:where(.content) .version10 {
  color: #0000cc;
  border-left-color: #8e8ecc;
  border-left-style: ridge;
}

:where(.content) .version11 {
  color: #cc00cc;
  border-left-color: #dd8ecc;
  border-left-style: ridge;
}

:where(.content) .version12 {
  color: #bbbb00;
  border-left-color: #dddd66;
  border-left-style: ridge;
}

:where(.content) .version13 {
  color: #00aacc;
  border-left-color: #66ccdd;
  border-left-style: ridge;
}

:where(.content) .version14 {
  color: #ff0000;
  border-left-color: #ff8e8e;
  border-left-style: double;
}

:where(.content) .version15 {
  color: #00cc00;
  border-left-color: #8ecc8e;
  border-left-style: double;
}

:where(.content) .version16 {
  color: #0000cc;
  border-left-color: #8e8ecc;
  border-left-style: double;
}

:where(.content) .version17 {
  color: #cc00cc;
  border-left-color: #dd8ecc;
  border-left-style: double;
}

:where(.content) .version18 {
  color: #bbbb00;
  border-left-color: #dddd66;
  border-left-style: double;
}

:where(.content) .version19 {
  color: #00aacc;
  border-left-color: #66ccdd;
  border-left-style: double;
}

/* Code blocks carried over as raw HTML. The base `pre` rule already supplies
   the margin and background; only the text colour is still missing. */
:where(.content) pre.source,
:where(.content) pre.source code {
  color: #000000;
}

/* Layout tables are used purely to align figures, so their cells are bare. */
:where(.content) table.layout td,
:where(.content) table.layout th {
  border: none;
  background-color: transparent;
}

/* Variable-definition tables rule off the body block. ufcpp.net also colours
   the table via its bare `.variable` token rule, so the colour is reproduced
   here on the table itself — our syntax highlighter never emits `.variable`,
   and scoping it this way keeps the rule from leaking onto code tokens. */
:where(.content) table.variable {
  color: #2c2e55;
}

:where(.content) table.variable tbody {
  border-top: 4px solid #c0c0c0;
  border-bottom: 4px solid #c0c0c0;
}

/* Pro/con bullets and highlighted placeholder text. */
:where(.content) .pros-mark,
:where(.content) .cons-mark {
  margin: 0 4px;
}

:where(.content) .pros-mark {
  color: #ff0000;
}

:where(.content) .cons-mark {
  color: #0000ff;
}

:where(.content) .input {
  color: #ff8030;
  font-weight: 700;
}

/* Collapsible sections. On ufcpp.net `.expand-panel` starts at display: none
   and JavaScript toggles it. This site ships no JavaScript, so the generator
   rewrites the legacy `<span class="expand-button">` + `<div class="expand-panel">`
   pair into <details class="expand-panel"> / <summary class="expand-button">
   plus a `.expand-panel-body` wrapper (see Rendering/LegacyControlRewriter.cs).
   The disclosure is native, so the label carries ufcpp.net's pointer cursor and
   hover feedback again. The `::before` FontAwesome glyph is replaced by the
   <details> marker because no icon font is served. See docs/css-parity.md. */
:where(.content) .expand-panel {
  margin: 1em 0;
}

:where(.content) .expand-button {
  margin: 0 0.5em 0 0;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
}

:where(.content) .expand-button:hover {
  background-color: #f3f3f3;
}

:where(.content) .expand-panel-body {
  padding: 2px;
  background-color: #f3f3f3;
}

/* Language tabs. `.view` and `.current` are added at runtime by ufcpp.net's
   JavaScript. The generator instead emits one radio button per tab ahead of the
   legacy <ul> and wraps each <li> in a <label>, so `:checked ~` switches panels
   with no scripting. The nth-of-type pairs below cover
   LegacyControlRewriter.MaxSwitchableTabs tabs; a larger set is left unrewritten
   and keeps every panel visible. */
:where(.content) .tab-container {
  margin: 1em 0;
}

:where(.content) .tab-container > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

:where(.content) .tab-container > ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  color: #4c4c4c;
  font-size: 0.8em;
  list-style: none;
}

/* The padding ufcpp.net puts on the <li> lives on the <label> instead, so the
   whole tab is clickable. The rendered box is the same size either way. */
:where(.content) .tab-container > ul li {
  margin: 0 0.2em 0 0;
  display: inline-block;
  border: solid 1px var(--color-code-border);
  border-bottom: none;
  background-color: transparent;
}

:where(.content) .tab-container > ul li label {
  display: block;
  padding: 0.2em 0.8em;
  cursor: pointer;
}

:where(.content) .tab-container > ul li:hover {
  border-color: var(--color-brand-navy);
  background-color: var(--color-brand-navy);
  color: #f3f3f3;
}

:where(.content) .tab-container > input:nth-of-type(1):checked ~ ul li:nth-child(1),
:where(.content) .tab-container > input:nth-of-type(2):checked ~ ul li:nth-child(2),
:where(.content) .tab-container > input:nth-of-type(3):checked ~ ul li:nth-child(3),
:where(.content) .tab-container > input:nth-of-type(4):checked ~ ul li:nth-child(4),
:where(.content) .tab-container > input:nth-of-type(5):checked ~ ul li:nth-child(5),
:where(.content) .tab-container > input:nth-of-type(6):checked ~ ul li:nth-child(6) {
  border-color: var(--color-brand-navy);
  background-color: var(--color-brand-navy);
  color: #f3f3f3;
  font-weight: 700;
}

/* The radio itself is clipped, so its focus ring has to move to the tab. */
:where(.content) .tab-container > input:nth-of-type(1):focus-visible ~ ul li:nth-child(1),
:where(.content) .tab-container > input:nth-of-type(2):focus-visible ~ ul li:nth-child(2),
:where(.content) .tab-container > input:nth-of-type(3):focus-visible ~ ul li:nth-child(3),
:where(.content) .tab-container > input:nth-of-type(4):focus-visible ~ ul li:nth-child(4),
:where(.content) .tab-container > input:nth-of-type(5):focus-visible ~ ul li:nth-child(5),
:where(.content) .tab-container > input:nth-of-type(6):focus-visible ~ ul li:nth-child(6) {
  outline: 3px solid #66ccdd;
  outline-offset: 3px;
}

:where(.content) .tab-container > div {
  display: none;
  padding: 0.2em;
  border: solid 1px var(--color-code-border);
}

:where(.content) .tab-container > input:nth-of-type(1):checked ~ div:nth-of-type(1),
:where(.content) .tab-container > input:nth-of-type(2):checked ~ div:nth-of-type(2),
:where(.content) .tab-container > input:nth-of-type(3):checked ~ div:nth-of-type(3),
:where(.content) .tab-container > input:nth-of-type(4):checked ~ div:nth-of-type(4),
:where(.content) .tab-container > input:nth-of-type(5):checked ~ div:nth-of-type(5),
:where(.content) .tab-container > input:nth-of-type(6):checked ~ div:nth-of-type(6) {
  display: block;
}

/* Update-history block captured inside one blog post. The original restacks
   this at 640px; that override lives with the other narrow-viewport rules. */
:where(.content) .latest-posts time,
:where(.content) .latest-posts header,
:where(.content) .latest-posts h4 {
  display: inline-block;
}

:where(.content) .latest-posts h4 {
  margin: 0 0.5em;
  color: #a35951;
  font-weight: 400;
}

:where(.content) .latest-posts h4 a {
  text-decoration: underline;
}

:where(.content) .latest-posts h4 a:hover {
  text-decoration: none;
}

:where(.content) .latest-posts article {
  margin: 0 0 0 1em;
}

/* Footer */
.site-footer {
  margin: 0;
  padding: 1rem var(--gutter-wide) 2rem;
  background: var(--color-brand-lavender);
  color: #3e3e5c;
  box-shadow: 0 -1px 1px var(--color-border);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer-inner {
  max-width: 1356px;
  margin: 0 auto;
  text-align: center;
}

.site-footer p {
  margin: 0.35rem 0;
}

.site-footer a {
  color: inherit;
}

@media (max-width: 1024px) {
  body {
    line-height: 1.65;
  }

  .site-header-inner {
    padding-inline: var(--gutter-medium);
  }

  .site-nav ul {
    padding-inline: var(--gutter-medium);
  }

  .site-nav a {
    padding-inline: 1em;
    font-size: 16px;
  }

  .site-body {
    margin-bottom: 32px;
    padding: 32px var(--gutter-medium) 0;
  }

  .site-footer {
    padding-inline: var(--gutter-medium);
  }
}

@media (max-width: 700px) {
  .site-logo {
    width: 350px;
    height: 50px;
  }

}

@media (max-width: 640px) {
  body {
    line-height: 1.5;
  }

  .site-header-inner {
    min-height: auto;
    padding: 0;
    display: block;
    text-align: center;
  }

  .site-brand {
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 5px solid var(--color-brand-rule);
  }

  .site-title {
    width: 100%;
  }

  .site-logo {
    width: min(450px, 100%);
    height: auto;
    margin: 0 auto;
  }

  .site-search-link {
    margin: 8px auto;
  }

  .site-search-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .site-nav {
    border-top: 0;
  }

  .site-nav ul {
    padding: 0 var(--gutter-small);
    justify-content: flex-start;
    overflow-x: auto;
  }

  .site-nav a {
    padding-inline: 1em;
    line-height: 44px;
  }

  .site-body {
    width: auto;
    margin: 0 var(--gutter-small) 16px;
    padding: 16px 0 0;
  }

  .content {
    padding: 8px;
  }

  .content .breadcrumbs {
    font-size: 0.8rem;
  }

  .content.article .article-body {
    padding: 8px;
  }

  .content h1 {
    font-size: 24px;
  }

  .content h2 {
    padding-left: 20px;
  }

  pre {
    font-size: 13px;
  }

  table {
    font-size: 0.875rem;
  }

  /* Legacy: ufcpp.net restacks the captured update-history block here. */
  :where(.content) .latest-posts time {
    display: block;
  }

  :where(.content) .latest-posts h4 {
    margin-left: 0;
  }

  :where(.content) .latest-posts article header {
    margin-left: 1em;
  }

  .site-footer {
    padding: 1rem var(--gutter-small);
    border: 0;
    background: var(--color-brand-navy);
    color: var(--color-page-bg);
    box-shadow: none;
  }
}

@media (max-width: 450px) {
  .site-logo {
    width: 100%;
    height: auto;
  }
}

@media print {
  .site-header,
  .site-footer,
  .content .breadcrumbs,
  .content .sub-info-section {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  .site-body {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .content {
    padding: 0;
    border: 0;
  }

  .content.article .article-body {
    margin: 0;
    padding: 0;
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  .content pre code span {
    color: #000000 !important;
  }
}