/* Flamenet Messenger, styled as a channel of the flamenet.io portal.
   Ported from the flamenet-2001 WordPress theme (wp-content/themes/flamenet-2001/
   style.css) so the messenger reads as part of the same site. The two stacks are
   separate on purpose, so this is a copy, not a shared file: changes to the
   portal chrome have to be made in both places.

   Channel colour is burgundy, which is what the theme's own colour map already
   assigns to messages. */

:root {
  --fn-navy: #004E82;
  --fn-navy-dark: #00314F;
  --fn-mid: #026AAB;
  --fn-chan: #963455;
  --fn-chan-dark: #6F2740;
  --fn-chan-tint: #F3E9ED;
  --fn-left: #C4D9EF;
  --fn-right: #EDF5FD;
  --fn-rule: #A9C4E0;
  --fn-link: #0266A8;
  --fn-visited: #635190;
  --fn-gold: #FFCC00;
  --fn-ink: #000000;
  --fn-ink-2: #333333;
  --fn-ink-3: #666666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background-color: var(--fn-navy);
  background-image: linear-gradient(180deg, #0A5C92 0%, var(--fn-navy) 45%, var(--fn-navy-dark) 100%);
  background-attachment: fixed;
  font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: var(--fn-ink);
  line-height: 1.35;
}

a { color: var(--fn-link); text-decoration: none; }
a:visited { color: var(--fn-visited); }
a:hover, a:visited:hover { color: #FF0000; text-decoration: underline; }

img { border: 0; max-width: 100%; }

h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; }

.sr-only, .screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--fn-gold); color: #000; padding: 6px 10px; z-index: 100;
}
.skip:focus { left: 6px; top: 6px; }

#page-wrapper { width: 100%; background: #FFFFFF; }

/* Top utility bar. Carries the date and the account links, same as the portal,
   but the account it offers is the messenger's own: a flamenet.io sign-in is
   not a Flamenet Messenger sign-in. */
#top-bar {
  background: #003F6B linear-gradient(180deg, #0A5C92 0%, #003A62 100%);
  border-bottom: 1px solid #00345A;
  padding: 3px 12px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 2px 10px;
  font-size: 10px; color: #B4D2EE;
}
#top-bar .top-bar-left { color: #B4D2EE; }
/* The left side carries a link too ("read the code"), and only the right side
   was ever styled. So that one link fell back to the site's ordinary link
   colour, #0266A8 on this navy bar: a contrast ratio of 1.8, and darker still
   once visited, which is how it was reported. Same treatment as its
   neighbours, underlined because it is the only link on this side and nothing
   else marks it as one. */
#top-bar .top-bar-left a,
#top-bar .top-bar-left a:visited {
  color: #FFFFFF; text-decoration: underline;
}
#top-bar .top-bar-left a:hover { color: var(--fn-gold); }
#top-bar .top-bar-right a {
  color: #FFFFFF; text-decoration: none; font-size: 10px; margin-left: 12px;
}
#top-bar .top-bar-right a:visited { color: #FFFFFF; }
#top-bar .top-bar-right a:hover { color: var(--fn-gold); text-decoration: underline; }
#top-bar .top-bar-tag { color: #FFFFFF; font-weight: bold; }

/* Channel masthead. The parent brand sits above the channel name, which is the
   whole cue that this is a section of flamenet.io rather than a separate site. */
#channel-masthead {
  background-color: var(--fn-chan);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,0.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 12px 14px 13px 14px;
  color: #FFFFFF;
}

.channel-title { font-family: Arial, Helvetica, sans-serif; line-height: 1; }

.ch-name {
  display: block;
  font-size: 27px; font-weight: bold; letter-spacing: -0.5px;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* The search box in the masthead searches flamenet.io, because the messenger
   has nothing to search and the portal does. */
.channel-search {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #FFFFFF; padding-bottom: 2px;
}
.channel-search label { color: #FFFFFF; white-space: nowrap; }
.channel-search input[type="search"] {
  width: 150px; height: 20px;
  border: 1px solid #5E7A96; padding: 1px 4px;
  font-size: 11px; font-family: Tahoma, Arial, sans-serif; background: #FFFFFF;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

/* Portal buttons: beveled, 2px radius, the era's grey gradient. */
.fs-btn, .channel-search input[type="submit"] {
  height: 20px; padding: 0 9px;
  background: linear-gradient(180deg, #FCFBF6 0%, #E7E3D3 52%, #D4CEB9 100%);
  border: 1px solid #87826E; border-radius: 2px;
  font-size: 11px; font-weight: bold; color: #000000;
  font-family: Tahoma, Arial, sans-serif; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.fs-btn:hover, .channel-search input[type="submit"]:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1EEE3 52%, #DED8C5 100%);
}

/* Channel nav. These are the portal's channels, not the messenger's sections:
   the tab strip is the parent site's, and Messenger is the tab you are on.
   The messenger's own sections live in the left rail. */
#channel-nav {
  overflow: hidden;
  background-color: var(--fn-chan-dark);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.26) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 3px rgba(0,0,0,0.25);
}
#channel-nav ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
#channel-nav ul li a {
  display: block; padding: 4px 11px;
  color: #FFFFFF; text-decoration: none;
  font-size: 11px; font-weight: bold; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.16);
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#channel-nav ul li a:visited { color: #FFFFFF; }
#channel-nav ul li a:hover,
#channel-nav ul li.active-tab a {
  background: rgba(255,255,255,0.25); color: #FFFFFF; text-decoration: none;
}

/* Three columns, as a table so the centre column can take whatever height the
   rails do not. Stacked below 860px, see the bottom of this file. */
#content-area {
  display: table; width: 100%;
  /* `fixed`, because auto table layout treats a cell's `width` as a
     suggestion and settles the real widths from content. While the centre
     column's text was capped at 640px there was slack and the rails got the
     150 and 300 they ask for; the moment the centre could use its full
     width, the algorithm handed it the slack and squeezed both rails well
     under their declared size. Fixed layout takes the widths as stated and
     gives the centre whatever is left, which is what a three-column shell
     with two fixed rails is meant to do. */
  table-layout: fixed;
  border-collapse: collapse; background: #FFFFFF;
}

#directory-column {
  display: table-cell; width: 150px; vertical-align: top;
  background: var(--fn-left) linear-gradient(180deg, #D3E2F3 0%, var(--fn-left) 28%, #B9D0EB 100%);
  box-shadow: inset -9px 0 11px -9px rgba(0,24,56,0.42);
  padding: 8px 8px 22px 8px;
}

#main-column {
  display: table-cell; vertical-align: top;
  background: #FFFFFF; padding: 8px 10px 22px 10px;
}

#sidebar-column {
  display: table-cell; width: 300px; vertical-align: top;
  background: var(--fn-right) linear-gradient(180deg, #F5F9FE 0%, var(--fn-right) 28%, #E1EDFA 100%);
  box-shadow: inset 9px 0 11px -9px rgba(0,24,56,0.42);
  padding: 8px 10px 22px 10px;
}

/* Left rail: the messenger's own sections. This is the product nav. */
#directory-column ul, .lcol-list { list-style: none; margin: 0 0 8px 0; padding: 0; }
#directory-column li { margin: 0; padding: 0; line-height: 1.4; }
#directory-column li a {
  display: block; color: var(--fn-navy); text-decoration: none;
  font-size: 11px; padding: 1px 2px;
}
#directory-column li a:visited { color: var(--fn-navy); }
#directory-column li a:hover { color: #FF0000; text-decoration: underline; }
#directory-column li.active-tab a { font-weight: bold; color: #CC0000; }

.lcol-hd {
  color: #004277; font-weight: bold; font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 3px 2px; margin-top: 4px;
  border-top: 1px solid var(--fn-rule);
}
summary.lcol-hd { display: block; cursor: default; list-style: none; }
summary.lcol-hd::-webkit-details-marker { display: none; }

.lcol-note { margin: 2px 2px 8px 2px; color: #555555; font-size: 10px; line-height: 1.35; }

/* Module boxes. Coloured header, hairline body, one per topic. */
.content-box { margin-bottom: 13px; width: 100%; box-shadow: 0 1px 3px rgba(0,22,52,0.22); }

.content-box .box-header, .sidebar-widget .widget-title {
  background-color: #1835A0;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%);
  color: #FFFFFF;
  font-size: 11px; font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  padding: 3px 6px; margin: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
  text-shadow: 0 1px 1px rgba(0,0,0,0.32);
}
.content-box .box-header a, .content-box .box-header a:visited,
.sidebar-widget .widget-title a, .sidebar-widget .widget-title a:visited { color: #FFFFFF; }
.content-box .box-header a:hover, .sidebar-widget .widget-title a:hover {
  color: var(--fn-gold); text-decoration: underline;
}
.content-box .box-header > a:last-child { font-size: 10px; font-weight: normal; }

.content-box .box-body, .sidebar-widget .widget-body {
  padding: 6px 8px; background: #FFFFFF;
  border: 1px solid var(--fn-rule); border-top: none;
}

.cm-orange   > .box-header, .cm-orange   > .widget-title { background-color: #CC6600; }
.cm-green    > .box-header, .cm-green    > .widget-title { background-color: #2B804C; }
.cm-burgundy > .box-header, .cm-burgundy > .widget-title { background-color: #963455; }
.cm-blue     > .box-header, .cm-blue     > .widget-title { background-color: #1835A0; }
.cm-purple   > .box-header, .cm-purple   > .widget-title { background-color: #635190; }
.cm-red      > .box-header, .cm-red      > .widget-title { background-color: #9E4040; }
.cm-sky      > .box-header, .cm-sky      > .widget-title { background-color: #446CC0; }

.cm-orange   > .box-body { background: #FBEEE0; }
.cm-green    > .box-body { background: #EAF3ED; }
.cm-burgundy > .box-body { background: var(--fn-chan-tint); }
.cm-blue     > .box-body { background: #E8ECFB; }
.cm-purple   > .box-body { background: #EDE9F5; }
.cm-red      > .box-body { background: #F3E9E9; }
.cm-sky      > .box-body { background: #E9EEF9; }

.sidebar-widget { margin-bottom: 13px; box-shadow: 0 1px 3px rgba(0,22,52,0.22); }
#sidebar-column .sidebar-widget:nth-of-type(7n+1) .widget-title { background-color: #CC6600; }
#sidebar-column .sidebar-widget:nth-of-type(7n+2) .widget-title { background-color: #2B804C; }
#sidebar-column .sidebar-widget:nth-of-type(7n+3) .widget-title { background-color: #963455; }
#sidebar-column .sidebar-widget:nth-of-type(7n+4) .widget-title { background-color: #635190; }
#sidebar-column .sidebar-widget:nth-of-type(7n+5) .widget-title { background-color: #9E4040; }
#sidebar-column .sidebar-widget:nth-of-type(7n+6) .widget-title { background-color: #446CC0; }
#sidebar-column .sidebar-widget:nth-of-type(7n+7) .widget-title { background-color: #1835A0; }

/* A stack of links in a widget, one per line, the portal's densest pattern. */
.widget-links { list-style: none; margin: 0; padding: 0; }
.widget-links li { line-height: 1.5; border-bottom: 1px dotted #C9D9EC; }
.widget-links li:last-child { border-bottom: 0; }
.widget-links li a { display: block; padding: 2px 1px; }

/* Download callout in the right rail, the one thing on the page with a job. */
.dl-box .box-body, .dl-box .widget-body { text-align: center; }
.dl-lede { margin: 0 0 6px; font-size: 11px; color: var(--fn-ink-2); }
.dl-meta { margin: 6px 0 0; font-size: 10px; color: var(--fn-ink-3); }

/* The big icon band the portal uses for its four headline destinations. */
.big4 {
  display: flex;
  background: var(--fn-mid) linear-gradient(180deg, #1A86C4 0%, var(--fn-mid) 52%, #014F80 100%);
  margin-bottom: 13px; padding: 6px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 3px rgba(0,22,52,0.3);
}
.big4-cell, .big4-cell:visited {
  flex: 1 1 0; text-align: center; color: #FFFFFF;
  font-size: 10px; font-weight: bold; text-decoration: none;
  padding: 2px 1px; text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.big4-cell:hover { color: var(--fn-gold); text-decoration: underline; }
.big4-ic { display: block; font-size: 15px; margin-bottom: 2px; }

.section-divider { height: 1px; background: #DCE4F4; margin: 6px 0; }

/* Page bodies.

   Twenty of the pages, including every page generated from docs, are an
   <article class="band doc"> holding a <div class="wrap wrap-narrow">. Those
   classes are restyled here rather than in the templates, so the generated
   pages keep building from their own sources and still land inside the portal
   frame. */
.band { display: block; }
.wrap { width: 100%; margin: 0; padding: 0; }
/* Was `max-width: 640px`, which left every document page's text in a column
   narrower than half the space it had, with white to the right of it. The
   centre column is already bounded by the two rails, and the landing page's
   own bands run the full width, so the doc pages were the only thing on the
   site that did not. Kept as a class rather than removed from 28 templates. */
.wrap-narrow { max-width: none; }

.doc h1, .band h1 {
  font-size: 17px; color: #003399; margin: 0 0 6px;
  padding-bottom: 3px; border-bottom: 1px solid var(--fn-rule);
}
.doc h2, .band h2 {
  font-size: 13px; color: #003399; margin: 14px 0 4px;
}
.doc h3, .band h3 { font-size: 12px; color: var(--fn-chan); margin: 10px 0 3px; }
.doc h4, .band h4 { font-size: 11px; color: var(--fn-ink-2); margin: 8px 0 3px; }

.doc p, .band p { margin: 0 0 7px; font-size: 11px; line-height: 1.5; }
.doc ul, .doc ol, .band ul, .band ol { margin: 0 0 8px 18px; }
.doc li, .band li { margin: 0 0 3px; font-size: 11px; line-height: 1.5; }

.doc table, .band table { border-collapse: collapse; margin: 0 0 10px; font-size: 11px; }
.doc th, .doc td, .band th, .band td {
  border: 1px solid var(--fn-rule); padding: 3px 6px; text-align: left; vertical-align: top;
}
.doc th, .band th { background: #E8EFF8; font-weight: bold; }

/* A table in a generated page has no wrapper to scroll inside, and those
   templates are built from docs so they cannot be given one. Making the table
   a block gives it its own scroll container, and its rows still lay out as a
   table inside. The comparison table already sits in .compare-scroll. */
.doc table:not(.compare), .band table:not(.compare) {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.doc hr { border: 0; border-top: 1px solid var(--fn-rule); margin: 12px 0; }

.doc blockquote {
  margin: 0 0 8px; padding: 5px 8px;
  background: #F5F8FC; border-left: 3px solid var(--fn-chan);
}

.eyebrow {
  display: block; font-size: 10px; font-weight: bold;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fn-chan);
  margin-bottom: 3px;
}
.lede { margin: 0 0 9px; font-size: 12px; line-height: 1.5; color: var(--fn-ink-2); }
.lede-wide, .band-lede { max-width: none; }
.band-lede-spaced { margin-top: 9px; }
.meta, .fineprint { font-size: 10px; color: var(--fn-ink-3); margin: 0 0 8px; }
.hl { color: var(--fn-chan); }

.callout {
  margin: 0 0 10px; padding: 6px 8px;
  background: #FFFBE6; border: 1px solid #E0C878;
}
.callout p { margin: 0; }

/* Code. Monospace on a tinted panel, and long unbroken strings wrap: a
   sixty-four character hash has no spaces and would push the column sideways. */
code, kbd, samp {
  font-family: "Courier New", Courier, monospace; font-size: 11px;
  background: #F1F4F9; border: 1px solid #DCE4F0; padding: 0 3px;
}
pre {
  margin: 0 0 10px; padding: 6px 8px;
  background: #F1F4F9; border: 1px solid var(--fn-rule);
  overflow-x: auto; font-size: 11px; line-height: 1.45;
}
pre code { background: none; border: 0; padding: 0; }
.code, .json, .bash, .js { display: block; }
.code-light { background: #FAFCFF; }

.btn, a.btn {
  display: inline-block;
  padding: 3px 12px; margin: 0 3px 3px 0;
  background: linear-gradient(180deg, #FCFBF6 0%, #E7E3D3 52%, #D4CEB9 100%);
  border: 1px solid #87826E; border-radius: 2px;
  font-size: 11px; font-weight: bold; color: #000000;
  font-family: Tahoma, Arial, sans-serif; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
a.btn:visited { color: #000000; }
.btn:hover, a.btn:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1EEE3 52%, #DED8C5 100%);
  color: #000000; text-decoration: none;
}

/* The one button per page that is the thing to do. Gold on navy, which is the
   portal's own accent pair. */
.btn-primary, a.btn-primary {
  background: linear-gradient(180deg, #596EBB 0%, #1835A0 50%, #13297D 100%);
  border-color: #122678; color: #FFFFFF;
}
.btn-primary:visited, a.btn-primary:visited { color: #FFFFFF; }
.btn-primary:hover, a.btn-primary:hover {
  background: linear-gradient(180deg, #6B80CC 0%, #2445B5 50%, #18328F 100%);
  color: var(--fn-gold);
}

.btn-nav, a.btn-nav { background: var(--fn-gold); border-color: #D1A700; color: #004E82; }
.btn-nav:visited, a.btn-nav:visited { color: #004E82; }

.cta-row { margin: 8px 0 4px; }

/* Feature grids become module rows. Cards keep their class names so the
   product pages need no rewrite beyond their own layout. */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 10px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  padding: 6px 8px; background: #F7FAFD;
  border: 1px solid var(--fn-rule); box-shadow: 0 1px 2px rgba(0,22,52,0.12);
}
.card h3 { margin: 0 0 3px; font-size: 11px; color: #003399; }
.card p { margin: 0 0 4px; font-size: 11px; }
.card-icon { display: none; }
.card-link { font-size: 10px; font-weight: bold; }

.honest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.honest-card {
  padding: 6px 8px; background: #FFFFFF;
  border: 1px solid var(--fn-rule); border-top: 3px solid var(--fn-chan);
}
.honest-card h3 { margin: 0 0 3px; font-size: 11px; }
.honest-card p { margin: 0; font-size: 11px; }

.stack-note {
  margin: 10px 0 0; padding: 6px 8px;
  background: #F5F8FC; border: 1px solid var(--fn-rule); font-size: 11px;
}
.proof { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11px; margin: 4px 0 0; }
.proof-lead { margin: 0; font-size: 11px; }
.chip { display: inline-block; margin-right: 10px; font-size: 11px; }
.chip-ic { display: none; }
.hero-chips { margin: 6px 0 0; }

/* Donation form. Stripe styles its own fields, so this covers the frame,
   the amount choices and the errors only. */
.donate-form {
  margin: 0 0 12px; padding: 8px 10px;
  background: #F7FAFD; border: 1px solid var(--fn-rule);
}
.donate-form fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.donate-form legend {
  padding: 0; margin-bottom: 5px;
  font-size: 10px; font-weight: bold; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fn-ink-3);
}
.donate-freq, .donate-amounts { display: flex; flex-wrap: wrap; gap: 4px; }

.donate-form label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: linear-gradient(180deg, #FCFBF6 0%, #E7E3D3 52%, #D4CEB9 100%);
  border: 1px solid #87826E; border-radius: 2px;
  font-size: 11px; font-weight: bold; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.donate-form label:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F1EEE3 52%, #DED8C5 100%); }
/* The radio stays focusable and in the accessibility tree, so it is moved
   rather than hidden. */
.donate-form input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.donate-form label:has(input[type="radio"]:checked) {
  background: linear-gradient(180deg, #596EBB 0%, #1835A0 50%, #13297D 100%);
  border-color: #122678; color: #FFFFFF;
}
.donate-form label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--fn-gold); outline-offset: 1px;
}

.donate-custom input[type="number"],
.donate-email input[type="email"] {
  padding: 2px 5px; font-family: Tahoma, Arial, sans-serif; font-size: 11px;
  border: 1px solid #6E8AA6; background: #FFFFFF;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.18);
}
.donate-custom input[type="number"] { width: 70px; }
.donate-email { margin: 8px 0 4px; }
.donate-email label {
  display: block; padding: 0; border: 0; background: none;
  box-shadow: none; cursor: default;
  font-size: 10px; font-weight: bold; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fn-ink-3); margin-bottom: 4px;
}
.donate-email label:hover { background: none; }
.donate-email input[type="email"] { width: 100%; max-width: 280px; }

.donate-payment { margin: 4px 0 10px; padding-top: 10px; border-top: 1px solid var(--fn-rule); }
.donate-error {
  margin: 0 0 8px; padding: 5px 8px;
  background: #FDECEC; border: 1px solid #D69A9A; color: #9B1C1C; font-size: 11px;
}
.donate-thanks {
  margin: 0 0 12px; padding: 6px 8px;
  background: #EAF3ED; border: 1px solid #2B804C;
}
.donate-thanks p { margin: 3px 0 0; font-size: 11px; }
.donate-pending {
  padding: 6px 8px; background: #F5F8FC;
  border: 1px dashed var(--fn-rule); color: var(--fn-ink-3);
}

/* Comparison table. Wide, so it scrolls inside its own box rather than
   widening the column. */
.compare-scroll { overflow-x: auto; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 11px; }
.compare th, .compare td {
  border: 1px solid var(--fn-rule); padding: 4px 6px;
  text-align: left; vertical-align: top;
}
.compare thead th { background: #E8EFF8; font-weight: bold; white-space: nowrap; }
.compare tbody th { background: #F5F8FC; font-weight: bold; width: 24%; }
.compare td { width: 19%; }
/* Our own column is marked, since the comparison is written by one of the
   products in it. */
.compare .mine { background: var(--fn-chan-tint); }
.compare thead th.mine { background: var(--fn-chan); color: #FFFFFF; }

/* Install page panels. */
.install-steps, .fdroid-block, .qr-hop, .verify-code {
  margin: 10px 0 0; padding: 6px 8px;
  background: #F7FAFD; border: 1px solid var(--fn-rule);
}
.install-steps h3, .fdroid-block h3 { margin: 0 0 4px; font-size: 12px; color: #003399; }
.install-lede { margin: 0 0 6px; font-size: 11px; }
.install-steps ol { margin: 0 0 0 18px; }
.install-steps ol li, .install-hashes li { margin: 0 0 5px; font-size: 11px; line-height: 1.5; }
.install-verify { margin: 8px 0 4px; font-size: 11px; }
.install-hashes { margin: 0 0 0 18px; }
.install-cmd { font-size: 10px; color: var(--fn-ink-3); }
.install-foot, .fdroid-note {
  margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--fn-rule); font-size: 10px;
}
.fdroid-block p { margin: 0 0 6px; font-size: 11px; }
.fdroid-steps { font-weight: bold; }
.fdroid-fp { display: block; margin-top: 3px; font-size: 10px; }
/* Hashes and fingerprints have no spaces to break at. */
.install-hashes code, .fdroid-manual code, .fdroid-fp code, .verify-line code, .verify-code {
  word-break: break-all;
}
.verify-code { display: block; white-space: pre-wrap; font-family: "Courier New", Courier, monospace; }
.verify-line { font-size: 11px; line-height: 1.6; }
.get-more { margin: 8px 0 0; font-size: 11px; }

/* The QR is for moving from a desktop to the phone the app ends up on, so it
   is hidden at phone widths where it would point at the page already open. */
.qr-hop { display: flex; align-items: center; gap: 10px; text-align: left; }
.qr-hop img { flex: none; width: 110px; height: 110px; display: block; }
.qr-hop p { margin: 0; font-size: 11px; }

/* Releases. The self-hosting note in each entry is written for an operator,
   not for somebody holding a phone, so it is set apart. */
.release { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #DCE4F4; }
.release h2 { margin-bottom: 2px; }
.release h2 small { font-weight: normal; color: var(--fn-ink-3); }
.release-platforms { margin: 2px 0 5px; }
.release-platforms .tag {
  display: inline-block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 5px; margin-right: 3px;
  background: #E8EFF8; border: 1px solid var(--fn-rule); color: var(--fn-ink-2);
}
.release .selfhost {
  margin-top: 8px; padding: 5px 8px;
  background: #F5F8FC; border-left: 3px solid var(--fn-chan);
}
.release .selfhost h3 { margin: 0 0 3px; font-size: 11px; }
.pager { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; font-size: 11px; }
.pager-off { color: #999999; }
.pager-at { color: var(--fn-ink-3); }

/* Footer, the portal's terms bar. */
#site-footer {
  background: var(--fn-navy); padding: 8px 12px 12px 12px;
  text-align: center; color: #FFFFFF;
}
#footer-links { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #6695B4; }
#footer-links a, #footer-links a:visited {
  color: #FFFFFF; text-decoration: none; font-size: 10px; margin: 0 6px;
  display: inline-block; line-height: 1.8;
}
#footer-links a:hover { color: var(--fn-gold); text-decoration: underline; }
/* The separate-app statement, in the same cream notice panel flamenet.io uses
   for its counterpart (#footer-messenger there). Somebody who thinks one
   account covers both sites has to read this, so it is a panel on the navy
   rather than another line of fine print. */
#footer-separate {
  max-width: 780px; margin: 0 auto 8px; padding: 8px 12px;
  font-size: 11px; line-height: 1.6; text-align: center;
  color: #333333;
  background: #FFF9E6;
  border: 1px solid #E0C97F;
}

#footer-separate strong { color: #000000; }

#footer-separate a,
#footer-separate a:visited { color: #0000CC; text-decoration: underline; }

#footer-separate a:hover { color: #CC0000; }

#footer-copyright { font-size: 9px; color: #B4D2EE; margin-top: 2px; line-height: 1.5; }
#footer-copyright a, #footer-copyright a:visited { color: var(--fn-gold); }
#footer-copyright strong { color: #FFFFFF; }
#footer-copyright .heart { color: #FF8FB0; }

/* Stats strip above the footer, the portal's site weather bar. Numbers here
   are the ones a relay can state without counting people. */
#site-stats-bar {
  background: #003399; color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  padding: 5px 12px; border-top: 1px solid var(--fn-gold); text-align: center;
}
#site-stats-bar strong { color: var(--fn-gold); }
#site-stats-bar a, #site-stats-bar a:visited { color: #FFFFFF; text-decoration: underline; }

/* Stacked layout.

   The three columns are table-cells, and table cells never wrap. At 375px the
   fixed rails leave the centre column about 100px wide and the row still
   demands more than the viewport, so the right rail becomes unreachable rather
   than narrow. Stacking is the only thing a table layout can do at this width.
   The look is kept: same gradients, same module chrome, the columns become
   rows.

   An overflow check will call the page clean either way, because the overflow
   is clipped rather than scrolled. Measure scrollWidth against clientWidth. */
@media (max-width: 860px) {
  #content-area { display: block; width: 100%; }

  #directory-column, #main-column, #sidebar-column {
    display: block; width: auto;
    box-shadow: none;
  }

  /* The rail stays first, where navigation is looked for. Its links flow and
     wrap instead of stacking into a vertical wall. */
  #directory-column ul, #directory-column .lcol-list {
    display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 6px 0;
  }
  /* 11px text with 1px of padding is a 15px tap target, which is fine for a
     mouse and not for a thumb. */
  #directory-column li a {
    display: inline-block; font-size: 13px; padding: 10px 12px;
    min-height: 24px;
  }

  /* The same thumb problem, on the buttons rather than the rail. `.btn` is
     3px of vertical padding around 11px text, about 20px tall, and the rail
     above was the only thing ever widened for touch. That covers every
     primary action on the site: Get the app, Donate, Self-host. 44px is
     Apple's minimum and comfortably over the 24px WCAG 2.5.8 floor.

     Phone only. The desktop portal keeps its small period buttons, which
     are correct for a mouse and are the look. */
  .btn, a.btn, button.btn {
    min-height: 44px; padding: 12px 18px; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  #main-column, #sidebar-column { border-top: 1px solid #9BB6D4; }

  /* Title left, search right, with a fixed 150px box that refuses to give way.
     They stay on one line whenever they fit. */
  #channel-masthead { flex-wrap: wrap; gap: 6px 10px; }
  .channel-search { flex-wrap: wrap; }
  .channel-search input[type="search"] { width: auto; flex: 1 1 130px; min-width: 0; }

  summary.lcol-hd {
    cursor: pointer; position: relative;
    padding: 8px 24px 8px 2px; font-size: 13px;
  }
  summary.lcol-hd::after {
    content: '+'; position: absolute; right: 6px; top: 50%;
    margin-top: -0.6em; font-size: 15px; line-height: 1;
  }
  .lcol-sec[open] > summary.lcol-hd::after { content: '\2212'; }
  .lcol-sec[open] > .lcol-list, .lcol-sec[open] > ul { margin-top: 4px; }

  .cards, .cards-3, .cards-4, .honest { grid-template-columns: 1fr; }
  .qr-hop { display: none; }
}

/* Bands as module boxes.

   Every page body is a stack of <section class="band"> or
   <article class="band doc">, each holding a .wrap. Styling that stack as the
   portal's module boxes is what makes all of the pages portal pages without
   editing a template, which matters for the nine pages generated from docs.

   The heading becomes the coloured header bar and the eyebrow becomes the pale
   tag strip above it, which is the same pair the theme's own page shell uses.
   Both are pulled full bleed with negative margins so the .wrap keeps its
   padding for everything else. */
.band {
  margin: 0 0 13px;
  background: #FFFFFF;
  border: 1px solid var(--fn-rule);
  box-shadow: 0 1px 3px rgba(0,22,52,0.22);
}
.band > .wrap { padding: 0 8px 7px; }

.band > .wrap > .eyebrow,
.band > .wrap > .band-head > .eyebrow {
  display: block; margin: 0 -8px 0 -8px; padding: 3px 8px;
  background: #EEF2FF; color: #003399;
  font-size: 10px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--fn-rule);
}

.band > .wrap > h1,
.band > .wrap > h2,
.band > .wrap > .band-head > h2 {
  margin: 0 -8px 7px -8px; padding: 3px 8px;
  background-color: var(--fn-chan);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%);
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px; font-weight: bold;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
  text-shadow: 0 1px 1px rgba(0,0,0,0.32);
}
.band > .wrap > h1 .hl,
.band > .wrap > h2 .hl,
.band > .wrap > .band-head > h2 .hl { color: var(--fn-gold); }

/* The portal gives consecutive modules different header colours. Element types
   in the stack are mixed, so the cycle is uneven, which is what these pages
   looked like anyway. */
.band:nth-of-type(7n+2) > .wrap > h2, .band:nth-of-type(7n+2) > .wrap > .band-head > h2 { background-color: #CC6600; }
.band:nth-of-type(7n+3) > .wrap > h2, .band:nth-of-type(7n+3) > .wrap > .band-head > h2 { background-color: #2B804C; }
.band:nth-of-type(7n+4) > .wrap > h2, .band:nth-of-type(7n+4) > .wrap > .band-head > h2 { background-color: #1835A0; }
.band:nth-of-type(7n+5) > .wrap > h2, .band:nth-of-type(7n+5) > .wrap > .band-head > h2 { background-color: #635190; }
.band:nth-of-type(7n+6) > .wrap > h2, .band:nth-of-type(7n+6) > .wrap > .band-head > h2 { background-color: #446CC0; }
.band:nth-of-type(7n+7) > .wrap > h2, .band:nth-of-type(7n+7) > .wrap > .band-head > h2 { background-color: #9E4040; }

.band-alt { background: #FAFCFF; }
.band-center, .band-head { text-align: left; }
.fineprint-flush { margin-bottom: 0; }
.doc-generated { }

/* The landing splash. A channel-coloured promo box with the copy on the left
   and the app on the right, which is where a product section of a portal put
   the thing it wanted you to download. */
.hero {
  margin: 0 0 13px;
  background-color: var(--fn-chan);
  background-image: linear-gradient(180deg, #A94062 0%, var(--fn-chan) 52%, #7A2A45 100%);
  border: 1px solid var(--fn-chan-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 3px rgba(0,22,52,0.3);
}
.hero-inner { display: flex; align-items: center; gap: 14px; padding: 12px 12px 14px; }
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero .eyebrow {
  display: block; background: none; border: 0; padding: 0; margin: 0 0 3px;
  color: rgba(255,255,255,0.85);
}
.hero h1 {
  margin: 0 0 6px; padding: 0; border: 0; background: none;
  font-size: 22px; line-height: 1.15; color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hero h1 .hl { color: var(--fn-gold); }
.hero .lede { color: #FFFFFF; font-size: 12px; max-width: 42em; }
.hero .chip { color: #FFFFFF; font-weight: bold; }
.hero .chip::before { content: '\2713\00a0'; color: var(--fn-gold); }
.hero-art { flex: none; }
.phone { display: block; }
.phone-screen {
  display: block; width: 132px; height: auto;
  border: 2px solid rgba(0,0,0,0.35); background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* The facts strip under the splash. */
.proof-band {
  margin: 0 0 13px; padding: 5px 8px;
  background: #E8EFF8; border: 1px solid var(--fn-rule);
}
.proof-band .wrap { padding: 0; }

/* Numbered steps. The number is a small square counter, not a circle. */
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 8px 22px; }
.step-n {
  position: absolute; left: 0; top: 1px;
  width: 16px; height: 16px; line-height: 16px; text-align: center;
  background: var(--fn-chan); color: #FFFFFF;
  font-weight: bold; font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
}
.step h3 { margin: 0 0 2px; font-size: 11px; color: #003399; }
.step p { margin: 0; }

/* Download choices. A row of beveled tiles, one per platform. */
.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 8px; }
.platform, a.platform, a.platform:visited {
  display: block; padding: 5px 8px; text-decoration: none; color: #000000;
  background: linear-gradient(180deg, #FCFBF6 0%, #EFECE0 52%, #DED8C5 100%);
  border: 1px solid #87826E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
a.platform:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F6F3E9 52%, #E7E1CF 100%); color: #000000; }
.platform-name { display: block; font-weight: bold; font-size: 11px; color: #003399; }
.platform-state { display: block; font-size: 10px; color: var(--fn-ink-3); }

/* Two columns inside a module, copy beside a command block. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

/* Comparison verdicts. A word, then its note on the next line. */
.yes { color: #1E6B3A; font-weight: bold; }
.no { color: #9E2020; font-weight: bold; }

/* Community page cards. */
.commun { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.commun-card {
  padding: 6px 8px; background: #F7FAFD;
  border: 1px solid var(--fn-rule); border-top: 3px solid var(--fn-chan);
}
.commun-card h3 { margin: 0 0 3px; font-size: 11px; color: #003399; }
.commun-ic { display: none; }
.commun-inf { font-size: 10px; color: var(--fn-ink-3); }

/* Grouped headings inside a document, and the spec's numbered parts. */
.group-head { margin: 12px 0 4px; font-size: 12px; color: #003399; font-weight: bold; }
.part { margin: 0 0 10px; }

/* Frequently asked questions. Closed by default, opened one at a time. */
.faq details {
  margin: 0 0 4px; background: #F7FAFD; border: 1px solid var(--fn-rule);
}
.faq summary {
  padding: 3px 6px; cursor: pointer;
  font-weight: bold; font-size: 11px; color: #003399;
}
.faq details p { margin: 0; padding: 0 6px 6px; }

.btn-ghost, a.btn-ghost { background: linear-gradient(180deg, #FCFBF6 0%, #E7E3D3 52%, #D4CEB9 100%); }
.btn-outline, a.btn-outline { background: #FFFFFF; }

@media (max-width: 860px) {
  .hero-inner { flex-wrap: wrap; }
  /* The app shot goes. Stacked, it took most of a phone screen before
     any of the words, and it is a picture of the thing the reader is
     already holding a phone to install. */
  .hero-art { display: none; }
  .platforms { grid-template-columns: repeat(2, 1fr); }
  .split, .commun { grid-template-columns: 1fr; }
}

/* The front page's throwaway poll. */
.demo-poll { max-width: 520px; margin: 18px auto 0; text-align: left; border: 1px solid #C9C3AE; background: #FFFFFF; padding: 14px 16px; }
.demo-poll-q { font-weight: bold; margin: 0 0 10px; }
.demo-poll-options { display: grid; gap: 6px; margin-bottom: 12px; }
.demo-poll-options label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.demo-poll-results { margin-top: 14px; display: grid; gap: 6px; }
.demo-poll-row { display: grid; grid-template-columns: 1fr 140px 2.5em; gap: 8px; align-items: center; font-size: 0.95em; }
.demo-poll-bar { display: block; height: 10px; background: #EEEAD9; border: 1px solid #C9C3AE; }
.demo-poll-bar i { display: block; height: 100%; background: #1835A0; }
.demo-poll-n { text-align: right; font-variant-numeric: tabular-nums; }
.demo-poll-total { margin: 4px 0 0; font-size: 0.9em; color: #555; }
.demo-poll-note { margin: 10px 0 0; font-size: 0.95em; }
.demo-poll .fineprint { margin-top: 12px; }