/* Every page in the entry gate's manner: a wordmark and a menu bar under double rules, one column of ruled boxes and
   tables, keys in brackets, a footer bar. Colours and faces come from theme.css only; nothing is rounded, shadowed or
   animated. */
html, body { background: var(--k); color: var(--g); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 15px/1.6 var(--mono); }
a { color: var(--c); text-underline-offset: .2em; }
a:hover { color: var(--w); }
:focus-visible { outline: 1px solid var(--c); outline-offset: 1px; }
h1, h2, h3 { font-family: var(--term); font-weight: normal; color: var(--w); line-height: 1.1; }
h1 { font-size: 40px; margin: 0 0 .75rem; }
h2 { font-size: 28px; margin: 1.5rem 0 .5rem; }
h3 { font-size: 22px; margin: 1.25rem 0 .25rem; }
.fh-col { width: min(64rem, 100% - 2rem); margin-inline: auto; }
.fh-muted { color: var(--cd); }
.fh-term { font-family: var(--term); font-size: 20px; line-height: 1.2; }

/* header: the wordmark, the sections as keys, the account; static scanlines as on the gate */
.fh-bar { position: relative; border-bottom: 3px double var(--cd); }
.fh-bar::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .28) 2px 3px); }
.fh-bar > .fh-col { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2ch; padding-block: .9rem .7rem; }
.fh-brand { display: block; line-height: 0; }
.fh-brand:hover { background: none; }
.fh-brand img { height: 28px; width: auto; }
.fh-nav, .fh-user { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1ch; font: 24px/1.2 var(--term); }
.fh-nav { flex: 1; }
.fh-nav a, .fh-user a { color: var(--g); text-decoration: none; padding: 0 .5ch; }
.fh-nav a:hover, .fh-user a:hover, .fh-nav a[aria-current="page"] { background: var(--c); color: var(--k); }
.fh-user form { display: inline; }
main.fh-col { flex: 1; padding-block: 2rem 3rem; }

/* footer: one bar of links */
.fh-foot { border-top: 3px double var(--cd); font: 20px/1.3 var(--term); color: var(--cd); }
.fh-foot > .fh-col { display: flex; flex-wrap: wrap; gap: .25rem 0; padding-block: 1rem 1.5rem; }
.fh-foot > .fh-col > * + *::before { content: "|"; color: var(--dg); padding-inline: 1ch; }
.fh-foot a { color: var(--g); text-decoration: none; }
.fh-foot a:hover { color: var(--w); text-decoration: underline; }

/* keys: Web Awesome's buttons drawn as the gate's [ ENTER ] */
wa-button::part(base) { font: 24px/1.2 var(--term); height: auto; min-height: 0; padding: .1em .5ch; border: 0; border-radius: 0;
  background: none; color: var(--c); box-shadow: none; transition: none; }
wa-button::part(label)::before { content: "[ "; }
wa-button::part(label)::after { content: " ]"; }
wa-button[size="s"]::part(base) { font-size: 24px; padding-block: 0; }
wa-button:hover::part(base), wa-button:focus-visible::part(base) { background: var(--c); color: var(--k); }
wa-button[variant="brand"]::part(base) { background: var(--c); color: var(--k); }
wa-button[variant="brand"]:hover::part(base), wa-button[variant="brand"]:focus-visible::part(base) { background: var(--w); }
wa-button[variant="danger"]::part(base) { color: var(--r); }
wa-button[variant="danger"]:hover::part(base), wa-button[variant="danger"]:focus-visible::part(base) { background: var(--r); color: var(--k); }
wa-button[appearance="plain"]::part(base) { color: var(--g); }

/* fields: square boxes on black, labels in the terminal face */
wa-input::part(label), wa-textarea::part(label), wa-select::part(label),
wa-input::part(form-control-label), wa-textarea::part(form-control-label), wa-select::part(form-control-label) {
  font: 22px/1.2 var(--term); color: var(--w); }
wa-input::part(hint), wa-textarea::part(hint), wa-select::part(hint), wa-checkbox::part(hint) { font-size: 13px; color: var(--cd); }
wa-checkbox::part(control) { border-radius: 0; background: var(--k); border-color: var(--cd); }
wa-checkbox[checked]::part(control) { background: var(--c); border-color: var(--c); color: var(--k); }
wa-select::part(tag) { border-radius: 0; }
wa-callout { border-radius: 0; font-size: 14px; }
wa-copy-button { color: var(--c); }

/* boxes: a frame, nothing else */
.fh-panel { border: 1px solid var(--cd); padding: 1.25rem 1.5rem; background: var(--k); }
.fh-panel > h2:first-child, .fh-form > h2 { margin: 0; }
main > * + .fh-panel, .fh-panel + .fh-panel { margin-top: 1.5rem; }
main > wa-callout { display: block; margin-block: 0 1rem; }
.fh-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2ch; }
.fh-narrow { max-width: 34rem; }
.fh-form, .fh-reply { display: grid; gap: 1rem; margin-top: 1.5rem; }
.fh-reply form { display: grid; gap: 1rem; justify-items: start; } .fh-reply wa-textarea { width: 100%; }
.fh-form > wa-button { justify-self: start; }
.fh-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fh-periods { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* tags as [bracketed] words; the ones in use are lit */
.fh-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1ch; margin-block: .5rem 1rem; font: 20px/1.3 var(--term); color: var(--cd); }
.fh-chips { display: inline-flex; flex-wrap: wrap; gap: 0 1ch; }
.fh-chip { font: 18px/1.3 var(--term); color: var(--cd); text-decoration: none; white-space: nowrap; }
.fh-filters .fh-chip { font-size: 20px; }
.fh-chip::before { content: "["; } .fh-chip::after { content: "]"; }
.fh-chip .fh-muted { color: var(--dg); }
.fh-chip:hover, .fh-chip-on { background: var(--c); color: var(--k); }
.fh-chip:hover .fh-muted, .fh-chip-on .fh-muted { color: var(--k); }
.fh-more { font: inherit; }

/* tables: the thread list and every list of rows, ruled like a 2000s board */
.fh-table { width: 100%; border-collapse: collapse; border: 1px solid var(--cd); }
.fh-table th { font: 20px/1.2 var(--term); text-align: left; color: var(--k); background: var(--cd); padding: .3rem .75rem; white-space: nowrap; }
.fh-table td { border-top: 1px solid var(--cd); padding: .55rem .75rem; vertical-align: top; }
.fh-table td + td { border-left: 1px solid var(--dg); }
.fh-table .fh-num { text-align: right; width: 1%; white-space: nowrap; }
.fh-table .fh-when, .fh-table .fh-who { font: 20px/1.3 var(--term); color: var(--cd); white-space: nowrap; width: 1%; }
.fh-table tbody tr:hover { background: #001515; }
.fh-table caption { caption-side: top; text-align: left; color: var(--cd); padding-bottom: .4rem; }
.fh-thread-title { color: var(--w); text-decoration: none; }
.fh-thread-title:hover { color: var(--k); background: var(--c); }
.fh-table .fh-chips { display: flex; margin-top: .15rem; }
.fh-threads { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cd); }
.fh-thread { display: grid; gap: .15rem; padding: .55rem .75rem; }
.fh-threads > .fh-thread + .fh-thread { border-top: 1px solid var(--cd); }
.fh-empty { padding: 1rem .75rem; color: var(--cd); }
.fh-meta { font: 20px/1.3 var(--term); color: var(--cd); }
wa-relative-time { white-space: nowrap; }
.fh-meta a { color: var(--g); }
.fh-inline { display: inline; }
.fh-link { font: inherit; color: var(--g); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.fh-link:hover { color: var(--w); }
.fh-pages { display: flex; gap: 2ch; align-items: baseline; justify-content: center; margin-block: 1.25rem; font: 22px/1.2 var(--term); }

/* posts: ruled boxes, a header strip and the text */
.fh-post { border: 1px solid var(--cd); margin-block: 0 1rem; }
.fh-post > header.fh-meta { border-bottom: 1px solid var(--dg); padding: .3rem .75rem; }
.fh-sep { color: var(--dg); }
.fh-post > .fh-body, .fh-post > .fh-removed { padding: .5rem .75rem; margin: 0; }
.fh-thread-head { margin-bottom: 1rem; }
.fh-thread-head h1 { margin-bottom: .25rem; }
.fh-body { overflow-wrap: anywhere; color: var(--g); }
.fh-body > :first-child { margin-top: 0; } .fh-body > :last-child { margin-bottom: 0; }
.fh-body strong { color: var(--w); }
.fh-body ul { list-style-type: square; } .fh-body li::marker { color: var(--cd); }
.fh-body pre { border: 1px solid var(--dg); padding: .6rem .75rem; overflow-x: auto; color: var(--w); }
.fh-body code { color: var(--w); font: inherit; }
.fh-body blockquote { border-left: 3px double var(--cd); margin-inline: 0; padding-left: 1rem; color: var(--cd); }
.fh-body table { border-collapse: collapse; } .fh-body th, .fh-body td { border: 1px solid var(--cd); padding: .2rem .6rem; }
.fh-body th { color: var(--w); text-align: left; }
.fh-body hr { border: 0; border-top: 3px double var(--cd); }
.fh-removed { color: var(--cd); font-style: italic; }
.fh-page { max-width: 72ch; }
.fh-page h1 { margin-top: 0; }

/* the tags page: a table of families */
.fh-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); border: 1px solid var(--cd); }
.fh-family { border: 1px solid var(--cd); margin: -1px 0 0 -1px; padding: 0 0 .6rem; }
.fh-family h2 { font-size: 20px; color: var(--k); background: var(--cd); margin: 0 0 .5rem; padding: .25rem .75rem; }
.fh-family .fh-chips { padding: 0 .75rem; }

/* anonymous sources, keys, the signed log */
.fh-source { border-bottom: 1px dotted var(--cd); }
.fh-nick { color: var(--w); font-weight: normal; }
.fh-source[data-verified="yes"]::after { content: " ✓"; color: var(--gr); }
.fh-source[data-verified="no"] { color: var(--r); text-decoration: line-through; }
.fh-fingerprint { font-family: var(--mono); color: var(--w); letter-spacing: .05em; }
.fh-members ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.fh-log li[data-verified="yes"]::after { content: " ✓ signature checked"; color: var(--gr); font-size: 13px; }
.fh-log li[data-verified="no"] { color: var(--r); }
.fh-log li[data-verified="no"]::after { content: " ✗ signature does not match"; }

/* the chat */
.fh-chat { display: grid; gap: 1rem; }
.fh-chat-log { min-height: 16rem; max-height: 55vh; overflow-y: auto; border: 1px solid var(--cd); padding: .5rem .75rem; }
.fh-chat-log p { margin: .15rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.fh-chat-log strong { color: var(--c); font-weight: normal; }
.fh-chat-log strong::after { content: ">"; }
.fh-chat-mine strong { color: var(--w); }
.fh-chat-note { color: var(--cd); }
.fh-chat-note::before { content: "* "; }
.fh-chat-form { display: grid; gap: .75rem; justify-items: start; } .fh-chat-form wa-textarea, .fh-chat-form wa-input { width: 100%; }

/* the drop */
.fh-drop { display: grid; gap: 1.25rem; }
.fh-drop > h1, .fh-drop > p { margin-block: 0; }
.fh-drop .fh-form { margin-top: 0; }
.fh-drop-text { white-space: pre-wrap; }
.fh-drop-mine > header { color: var(--w); }
.fh-code wa-input::part(input) { color: var(--c); letter-spacing: .05em; }

/* phones: wordmark and account on the first row, the sections below; tables become stacked rows */
@media (max-width: 40rem) {
  h1 { font-size: 34px; }
  .fh-brand img { height: 20px; }
  .fh-bar > .fh-col { column-gap: 1ch; }
  .fh-user { margin-left: auto; }
  .fh-nav { order: 3; flex: 1 1 100%; margin-left: -.5ch; }
  .fh-table thead { display: none; }
  .fh-table tr { display: block; border-top: 1px solid var(--cd); padding: .5rem .75rem; }
  .fh-table tbody tr:first-child { border-top: 0; }
  .fh-table td { display: inline; border: 0; padding: 0; }
  .fh-table td:first-child { display: block; margin-bottom: .2rem; }
  .fh-table td + td { border: 0; }
  .fh-table td.fh-num::after { content: " repl."; }
  .fh-table td + td + td::before { content: "· "; color: var(--dg); }
  .fh-table td.fh-num, .fh-table .fh-when, .fh-table .fh-who { font: 20px/1.3 var(--term); color: var(--cd); width: auto; }
  .fh-periods { grid-template-columns: 1fr; }
  .fh-panel { padding: 1rem; }
}