:root {
  --fg: #1c1c1c;
  --bg: #fbfaf7;
  --muted: #5a5a5a;
  --accent: #6b4f2a;
  --border: #d8d2c4;
  --focus: #1a5fb4;
  --greek-font: "SBL Greek", "New Athena Unicode", "Gentium Plus", system-ui, -apple-system, "Segoe UI", Roboto, serif;
}

/* SBL Greek is used for Greek letters and marks wherever they appear. Latin
   text keeps the system UI font. */
@font-face {
  font-family: "SBL Greek";
  src: url("/static/fonts/SBL_grk.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0300-036F, U+0387, U+1FBD-1FFF, U+1FBE;
}

/* Apply the Greek font only to runs that actually contain Greek. Renderers and
   the on-screen keyboard mark those runs with .greek-text. */
.greek-text {
  font-family: var(--greek-font);
}

/* Rendered wiki content: the SBL Greek face declares a unicode-range covering
   Greek, so Latin text keeps the body font and Greek uses SBL automatically. */
main {
  font-family: var(--greek-font);
}

main code,
main pre,
main kbd,
main samp,
main .greek-key-latin {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The Markdown source editor also uses the Greek face for Greek, with a
   monospace fallback for Latin source. */
textarea#markdown {
  font-family: var(--greek-font);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, serif;
  line-height: 1.6;
}

main,
header,
footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

header {
  padding-top: 1rem;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.breadcrumbs li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
}

.messages {
  border-left: 4px solid var(--accent);
  padding: 0.5rem 1rem;
  margin: 1rem auto;
  background: #f3efe6;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--bg);
  padding: 0.5rem;
  border: 1px solid var(--border);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.site-nav form {
  display: inline;
  margin: 0;
}

.site-nav button[type="submit"] {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

form > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  max-width: 24rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.messages-error {
  border-left-color: #a51d2d;
  background: #fbeaec;
}

.messages-notice {
  border-left-color: #2a6b3a;
  background: #eaf5ec;
}

[aria-label="Page actions"] ul,
.tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

[aria-label="Page actions"] form,
.tags form {
  display: inline;
  margin: 0;
}

[aria-label="Page actions"] button[type="submit"] {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

textarea {
  font: inherit;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

pre {
  overflow-x: auto;
  padding: 0.75rem;
  background: #f3efe6;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Editor toolbar: label and the "Formatting help" button on one line. */
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-direction: row;
  max-width: none;
}

/* Markdown preview: shown in place of the source textarea. It matches the
   width/box of the textarea so swapping does not shift the layout. */
.article-preview {
  min-height: 16rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.article-preview[hidden],
.editor-source[hidden] {
  display: none;
}

.article-preview[aria-busy="true"] {
  opacity: 0.6;
}

.editor-toolbar noscript {
  color: var(--muted);
  font-size: 0.9rem;
}

button.link-button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Group the editor help buttons on one line. */
.editor-help-buttons {
  display: flex;
  gap: 1rem;
  flex-direction: row;
  max-width: none;
}

/* Live Greek completion hints shown as a popup under the caret. */
.greek-hints {
  position: fixed;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 22rem;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.95rem;
}

.greek-hints[hidden] {
  display: none;
}

.greek-hints li {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.greek-hints li[aria-selected="true"] {
  background: #f3efe6;
}

.greek-hints li:hover {
  background: #eee7da;
}

/* Screen-reader-only text (labels that would otherwise clutter the layout). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Site search. The form works without JavaScript; the listbox is populated by
   search-combobox.js and stays hidden until there are results. */
.site-search {
  position: relative;
  margin: 0 0 0.5rem;
  max-width: 24rem;
}

.site-search-input {
  font: inherit;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.site-search-list {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.site-search-list[hidden] {
  display: none;
}

.site-search-list li {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.site-search-list li[aria-selected="true"],
.site-search-list li:hover {
  background: #f3efe6;
}

.site-search-list .site-search-empty {
  color: var(--muted);
  cursor: default;
}

/* Editor "Insert link" / "Insert widget" dialogs. */
.insert-dialog form > div,
.insert-dialog form > ul {
  max-width: none;
}

.insert-search-input {
  font: inherit;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.insert-results {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.insert-results[hidden] {
  display: none;
}

.insert-results li {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.insert-results li[aria-selected="true"],
.insert-results li:hover {
  background: #f3efe6;
}

.insert-results .insert-empty {
  color: var(--muted);
  cursor: default;
}

.insert-hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.insert-widget-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: none;
}

.insert-widget-item {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.insert-widget-params {
  display: grid;
  gap: 0.35rem;
  margin: 0.4rem 0;
  max-width: none;
}

.insert-widget-param {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.insert-widget-param input[aria-invalid="true"] {
  border-color: #a51d2d;
}

.insert-widget-param .hint {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Formatting help dialog. */
.help-dialog {
  max-width: 36rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.help-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.help-rows {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  max-width: none;
}

.help-row {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.75rem;
  align-items: baseline;
  flex-direction: row;
  max-width: none;
}

.help-row code {
  white-space: pre-wrap;
}

/* Unresolved wiki links look like "create this page" affordances. */
.wikilink-new {
  color: var(--muted);
  text-decoration-style: dotted;
}

/* On-screen Greek keyboard. Hidden by default; toggled by the editor button or
   Ctrl+G. Keys show the Greek output prominently with the Latin legend below. */
.greek-keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-height: 45vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: #f3efe6;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

.greek-keyboard[hidden] {
  display: none;
}

.greek-keyboard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-direction: row;
  max-width: none;
  margin-bottom: 0.5rem;
}

.greek-keyboard-bar select {
  font: inherit;
  padding: 0.2rem 0.35rem;
}

.greek-keyboard-keys {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

/* A real-keyboard-looking table: fixed columns and 40px rows, like the
   Microsoft reference layout. */
.greek-keyboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 auto;
  table-layout: fixed;
}

.greek-keyboard-table td {
  padding: 0;
  vertical-align: top;
}

.greek-keyboard-table td {
  overflow: hidden;
}

.greek-keyboard-table td > .greek-key {
  width: 100%;
  min-width: 0;
}

.greek-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 2.85rem;
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 1.05;
  box-shadow: 0 1px 0 var(--border);
}

.greek-key:hover {
  background: #eee7da;
}

.greek-key:active {
  background: #e4dbc9;
  box-shadow: none;
}

.greek-key .greek-key-base {
  font-size: 1.2rem;
}

.greek-key .greek-key-latin {
  font-size: 0.68rem;
  color: var(--muted);
}

.greek-key .greek-key-shift {
  display: none;
  font-size: 0.95rem;
}

/* Swap to the shifted label only for keys that actually have one, so keys
   without a shift output keep showing their base glyph. */
.greek-keyboard-keys.is-shifted .greek-key.has-shift .greek-key-base {
  display: none;
}

.greek-keyboard-keys.is-shifted .greek-key.has-shift .greek-key-shift {
  display: inline;
}

/* Mark-name label on shortcut keys (e.g. the "\" key shows "grave"). */
.greek-key-mark-name {
  font-size: 0.55rem;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Accent keys: keep the glyph prominent but the compact label within the cell. */
.greek-key.key-mark .greek-key-base {
  font-size: 1.05rem;
  line-height: 1.05;
}

.greek-key.key-mark .greek-key-latin-small {
  font-size: 0.55rem;
}

.greek-key-latin-small {
  font-size: 0.6rem;
}

/* Pressed state for toggle keys (Shift/Caps). */
.greek-key[aria-pressed="true"] {
  background: #d9cfb8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.key-mark .greek-key-latin {
  color: var(--accent);
}

/* Special keys (Tab, Caps, Shift, Enter, Backspace, Space, marks). */
.greek-key.key-tab,
.greek-key.key-backspace,
.greek-key.key-enter,
.greek-key.key-caps,
.greek-key.key-shift-wide,
.greek-key.key-space {
  background: #e8e2d5;
}

.greek-key.key-space {
  height: 2.2rem;
}

/* Accent keys look like ordinary keys (not disabled). */
.greek-key.key-mark {
  background: #fff;
}

.greek-key.is-empty {
  opacity: 0.35;
  cursor: default;
}

.greek-key-shift[aria-pressed="true"] {
  background: #eee7da;
}

.greek-keyboard-hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Keep page content clear of the fixed keyboard while it is open. */
body.greek-keyboard-open {
  padding-bottom: 46vh;
}

/* Accent row below the main keyboard, visually separated. */
.greek-keyboard-marks-row td.key-marks-caption {
  text-align: right;
  padding-right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}

/* The Accents row is separated by its caption and spacing, not a grey fill. */
.greek-keyboard-marks-row .greek-key {
  background: #fff;
}

/* Widget data tables (invites, feature flags). */
.invite-table,
.feature-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

.invite-table th,
.invite-table td,
.feature-table th,
.feature-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.invite-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
}

/* A newly created invite row flashes once after the redirect. */
.invite-table tr.invite-flash {
  animation: invite-flash 2s ease-out;
}

@keyframes invite-flash {
  from { background: #fbefc9; }
  to { background: transparent; }
}

.widget-flash {
  margin: 0.5rem 0;
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .invite-table tr.invite-flash { animation: none; background: #fbefc9; }
}

/* Invite link disclosure in the OpenInvites table. */
.invite-link-body {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.invite-link-url {
  flex: 1 1 12rem;
  min-width: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.invite-table .muted {
  color: var(--muted);
}

/* Uploads: a list of files with size/quota metadata and a delete form. */
.upload-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.upload-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.upload-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.upload-item .upload-delete,
.upload-item form {
  display: inline;
  margin: 0;
}

.upload-form,
.upload-limits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  max-width: 24rem;
}

/* Activity widget: a chronological list of events. */
.activity-item {
  padding: 0.25rem 0;
}
.activity-summary {
  margin-right: 0.5rem;
}
.activity-time {
  font-size: 0.85rem;
}

/* Inbox: notification rows with an unread marker */
.notification-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.notification-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.notification-unread {
  border-left-width: 4px;
  border-left-color: var(--accent);
}
.notification-read-tag {
  font-size: 0.85rem;
}
.notification-item form {
  display: inline;
  margin: 0;
}