/* =====================================================================
   Language Creator — stylesheet
   Scholarly / typographic refinement.

   Design notes
   ------------
   - Charis throughout (8 cuts, regular + italic × 4 weights).
   - Layout is asymmetric: a quiet tinted left strip carries the site
     identity (and, when present, a section nav), the main column holds
     the article. Section counters float into the gutter between the
     two so headings sit flush with the body text. The first paragraph
     of every page gets a drop cap.
   - Tables and example blocks use hairline rules instead of fills, so
     long linguistic content reads like a journal page.
   - Auto dark mode via prefers-color-scheme.
   - All existing class hooks are preserved (.layout, .site-header,
     .site-identity, .site-title, .site-tagline, .content, .page,
     .page-title, .sidebar, .questionbox, .tocbox, .interlinear, .ortho,
     .pron, .dict, .chart, .float, .top-btn, .bot-btn, .mobile-toolbar,
     svg.lcdiagram, etc.) — no PHP changes required.
   ===================================================================== */

/* ---------- Fonts ----------
   Body type stays Charis. Headings (page title, h2/h3/h4, sidebar
   title, drop cap, Create button) use Source Serif 4 from Google
   Fonts. The @import must precede @font-face per CSS rules. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

@font-face { font-family: CharisW; font-weight: 400; src: url(fonts/Charis-Regular.woff2); }
@font-face { font-family: CharisW; font-weight: 500; src: url(fonts/Charis-Medium.woff2); }
@font-face { font-family: CharisW; font-weight: 600; src: url(fonts/Charis-SemiBold.woff2); }
@font-face { font-family: CharisW; font-weight: 700; src: url(fonts/Charis-Bold.woff2); }
@font-face { font-family: CharisW; font-weight: 400; font-style: italic; src: url(fonts/Charis-Italic.woff2); }
@font-face { font-family: CharisW; font-weight: 500; font-style: italic; src: url(fonts/Charis-MediumItalic.woff2); }
@font-face { font-family: CharisW; font-weight: 600; font-style: italic; src: url(fonts/Charis-SemiBoldItalic.woff2); }
@font-face { font-family: CharisW; font-weight: 700; font-style: italic; src: url(fonts/Charis-BoldItalic.woff2); }

/* ---------- Design tokens ---------- */
:root {
    /* Type */
    --primary-font: 'CharisW', 'Charis SIL', Cambria, Georgia, serif;
    --header-font:  'Source Serif 4', 'Source Serif Pro', Cambria, Georgia, serif;
    --subhead-font: 'Source Serif 4', 'Source Serif Pro', Cambria, Georgia, serif;

    /* Surfaces */
    --bg:                 #eef4f3;        /* page background */
    --paper:              #ffffff;        /* form fields / chart strong fill */
    --strip:              #dde7e6;        /* tinted side-strip */
    --primary-bg-color:   var(--bg);      /* legacy aliases — kept so any */
    --secondary-bg-color: var(--strip);   /* in-page inline styles still work */
    --gradient-bg:        var(--bg);
    --text-bg:            var(--paper);

    /* Foreground */
    --ink:           #1c2728;
    --ink-soft:      #56676a;
    --primary-color: var(--ink);          /* legacy alias */
    --header-color:  var(--ink);
    --subhead-color: var(--ink);
    --text-col:      var(--ink);
    --gloss-color:   #5b6a6c;

    /* Rules */
    --rule:          #c0cdcc;
    --rule-strong:   #4d6063;
    --border-color:  var(--rule);
    --border-thickness: 1px;
    --column-rule-color: var(--rule);

    /* Accent (deep teal) */
    --accent:        #2b788c;
    --accent-deep:   #143e48;
    --accent-color:  var(--accent);
    --button-color:  var(--accent);
    --link-col:      #1a5561;
    --link-hover:    #0c3942;
    --question-border: var(--accent);

    /* Status */
    --status-ok-color:  #2e6b35;
    --status-err-color: #8a2a2a;

    /* Diff */
    --diff-add-fg: #1f6b1f;
    --diff-add-bg: #ebf5e8;
    --diff-del-fg: #8a2a2a;
    --diff-del-bg: #f6e8e8;

    /* Shadows (used very sparingly) */
    --box-shadow:    0 1px 2px rgba(0,0,0,0.06);
    --shadow-weak:   0 1px 2px rgba(0,0,0,0.10);
    --shadow-mid:    0 2px 6px rgba(0,0,0,0.14);
    --shadow-strong: 0 6px 14px rgba(0,0,0,0.20);

    /* Radii / spacing */
    --border-radius:    3px;
    --padding-standard: 15px;
    --line-height:      1.62;

    /* Mobile toolbar */
    --mobile-toolbar-bg:     rgba(255,255,255,0.94);
    --mobile-toolbar-border: var(--rule);

    /* Layout */
    --margin-w:  12rem;     /* left strip width on desktop */
    --gutter:    2.5rem;    /* gap between strip and content */
    --content-w: 52rem;     /* was 48rem: readable measure — ~74ch, journal-page width */
    --layout-max: 86rem;    /* matches .layout's max-width */
    /* Horizontal gap between the viewport edge and where .layout
       actually starts. When the viewport is wider than --layout-max,
       .layout is centred with margin: 0 auto and the sidebar slides
       inward by this amount — the fixed buttons need to follow. */
    --layout-pad: max(0px, calc((100vw - var(--layout-max)) / 2));
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:                 #0e1819;
        --paper:              #131f21;
        --strip:              #182628;
        --primary-bg-color:   var(--bg);
        --secondary-bg-color: var(--strip);
        --gradient-bg:        var(--bg);
        --text-bg:            var(--paper);

        --ink:           #e6eded;
        --ink-soft:      #a8b8b9;
        --primary-color: var(--ink);
        --header-color:  var(--ink);
        --subhead-color: var(--ink);
        --text-col:      var(--ink);
        --gloss-color:   #aab7b8;

        --rule:          #28393b;
        --rule-strong:   #6e8082;
        --border-color:  var(--rule);
        --column-rule-color: var(--rule);

        --accent:        #8dd7df;
        --accent-deep:   #d4eef2;
        --accent-color:  var(--accent);
        --button-color:  var(--accent);
        --link-col:      #a8dde3;
        --link-hover:    #d4eef2;
        --question-border: var(--accent);

        --status-ok-color:  #84d390;
        --status-err-color: #ff8a8a;

        --diff-add-fg: #9be19b;
        --diff-add-bg: #15291a;
        --diff-del-fg: #ff9b9b;
        --diff-del-bg: #2a1517;

        --box-shadow:    0 1px 2px rgba(0,0,0,0.45);
        --shadow-weak:   0 1px 2px rgba(0,0,0,0.55);
        --shadow-mid:    0 2px 6px rgba(0,0,0,0.65);
        --shadow-strong: 0 6px 14px rgba(0,0,0,0.75);

        --mobile-toolbar-bg:     rgba(0,0,0,0.85);
        --mobile-toolbar-border: var(--rule);
    }
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--link-col);
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.18em;
}
a:hover { color: var(--link-hover); }
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

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

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

/* ---------- Layout: tinted strip + content + outer margin ----------
   The grid is symmetric: a fixed strip on the left, the readable
   measure in the middle, and a flex column on the right that mirrors
   the strip so the content sits OPTICALLY centered between them.
   On very wide windows the layout itself is also centered in the
   viewport, so prose never clumps to one side. */
.layout {
    display: grid;
    grid-template-columns:
        var(--margin-w)
        minmax(0, var(--content-w))
        minmax(var(--margin-w), 1fr);
    max-width: 86rem;
    margin: 0 auto;
    min-height: 100vh;
}

/* Side strip — carries identity and (when present) the section nav */
.site-header {
    grid-column: 1;
    background: var(--strip);
    border-right: 1px solid var(--rule);
    padding: 3rem 1.5rem;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    text-align: center;
    margin-bottom: 0;
    /* Centre the identity (and tagline) within the strip. */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Frontpage robot illustration. The image is intricate, so we let it
   break out of the readable measure on wider viewports and reach into
   the right-margin gutter — float:right keeps the prose wrapping around
   it the way an inset plate does in a journal article. */
.frontpage-illustration {
    float: right;
    width: min(22rem, 60%);
    max-width: 100%;
    margin: 0.4rem 0 1.4em 2em;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: var(--shadow-weak);
    overflow: hidden;
}

.frontpage-illustration figcaption {
    padding: 0.55rem 0.85rem 0.7rem;
    border-top: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--primary-font);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.frontpage-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

/* When there's room beyond the content column, push the illustration
   into the right gutter so its detail is legible. .page has 3rem of
   right padding; pulling margin-right past that overflows visibly into
   the right grid column (which is at least var(--margin-w) wide). */
@media (min-width: 1100px) {
    .frontpage-illustration {
        width: 28rem;
        margin-right: -9rem;
    }
}

@media (min-width: 1300px) {
    .frontpage-illustration {
        width: 34rem;
        margin-right: -14rem;
    }
}

@media (min-width: 1500px) {
    .frontpage-illustration {
        width: 40rem;
        margin-right: -19rem;
    }
}

@media (min-width: 1700px) {
    .frontpage-illustration {
        width: 46rem;
        margin-right: -24rem;
    }
}

.site-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1.6rem;
    width: 100%;
}
.site-identity:hover { text-decoration: none; }
.site-identity:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.site-identity .logo,
.logo {
    width: 2.4rem;
    height: auto;
    max-width: 80px;
    opacity: 0.85;
    margin: 0;
    vertical-align: middle;
}

.site-title {
    font-family: var(--header-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-deep);
    letter-spacing: 0.02em;
    white-space: normal;
    /* Tight leading so the wrap between "The Language" and "Creator"
       reads as one title, with clearly more space before the tagline. */
    line-height: 1.15;
}

.site-tagline {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.4;
    max-width: 12rem;
    /* Optical leading: line-box leading eats some of the flex `gap`, so
       add a touch of margin-top to balance the gap above the title
       (which sits below a tight image edge). */
    margin: 0.35rem auto 0;
    opacity: 1;
}

/* Content column */
.content {
    grid-column: 2;
    min-width: 0;
}

.page {
    padding: 3.5rem 3rem 5rem;
    max-width: var(--content-w);
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Page title */
.page-title {
    font-family: var(--header-font);
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 1.3rem;
    text-wrap: balance;
    color: var(--ink);
    text-align: left;
    letter-spacing: -0.005em;
}

/* Drop cap on the first body paragraph (from variation A) */
.page > p:first-of-type::first-letter {
    font-family: var(--header-font);
    font-size: 3.4em;
    font-weight: 600;
    float: left;
    line-height: 0.95;
    margin: -0.05em 0.1em -0.05em 0;
    color: var(--accent);
}

/* ---------- Headings: counter floats into the gutter ---------- */
h1, h2, h3, h4 {
    font-family: var(--header-font);
    color: var(--ink);
    text-wrap: balance;
}

/* h1 (used by some pages besides the .page-title) */
h1 {
    counter-reset: h2counter h3counter h4counter;
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 1.3rem;
    text-align: left;
    /* keep the legacy logo-inside-h1 case usable */
    display: block;
}

.subtitle {
    font-family: var(--primary-font);
    font-size: 1.05rem;
    color: var(--ink-soft);
    text-align: left;
    margin: -0.4em 0 1.4em;
    font-style: italic;
    line-height: 1.4;
    max-width: 38em;
    text-wrap: pretty;
}

h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 2.5em 0 0.6em;
    position: relative;
    counter-increment: h2counter;
    counter-reset: h3counter h4counter;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.8em 0 0.4em;
    position: relative;
    counter-increment: h3counter;
    counter-reset: h4counter;
}

h4 {
    font-size: 0.97rem;
    font-weight: 500;
    font-style: italic;
    margin: 1.4em 0 0.4em;
    counter-increment: h4counter;
}

/* h2/h3 numbers float into the left gutter; h4 stays inline */
h2::before {
    content: counter(h2counter);
    position: absolute;
    right: calc(100% + 0.8em);
    top: 0.05em;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--accent);
    font-variant-numeric: lining-nums;
}

h3::before {
    content: counter(h2counter) "." counter(h3counter);
    position: absolute;
    right: calc(100% + 0.8em);
    top: 0.1em;
    font-size: 0.78em;
    font-weight: 400;
    color: var(--accent);
    font-variant-numeric: lining-nums;
}

h4::before {
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "\00a0\00a0";
    color: var(--accent);
    font-style: normal;
    font-weight: 400;
    font-size: 0.85em;
}

/* ---------- Sidebar (.sidebar — currently commented out in the PHP,
   styled here so it lights up cleanly when re-enabled) ---------- */
.sidebar {
    margin-top: 0.4rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font-size: 0.85rem;
    color: var(--ink);
}
.sidebar h4 {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin: 0 0 0.6rem;
    font-style: normal;
}
.sidebar h4::before { content: none; }
.sidebar ul {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
}
.sidebar li { margin: 0.35rem 0; }
.sidebar a {
    text-decoration: none;
    color: var(--ink);
}
.sidebar a:hover {
    text-decoration: none;
    color: var(--accent);
}
.sidebar .current {
    font-weight: 600;
    color: var(--accent);
}

/* ---------- Glossed examples ---------- */
div.ortho {
    font-weight: 600;
    margin: 0;
}

.orth-arabic {
    font-family: "Scheherazade New", "Noto Naskh Arabic", serif;
    font-size: 110%;
    direction: rtl;
    unicode-bidi: isolate;
}

.orth-devanagari {
    font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
    font-size: 105%;
}

div.pron {
    margin: 0 0 0.3em;
    color: var(--ink-soft);
}
div.pron p { margin: 0; }

.interlinear {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9em;
    align-items: flex-end;
    margin: 0.3em 0 0.4em;
}

.ilpair {
    display: inline-block;
    text-align: left;
    vertical-align: bottom;
    margin: 0 0.15em;
    line-height: 0.7;
    white-space: nowrap;
}

.ilpair .mor {
    display: block;
    line-height: 1.0;
}

.ilpair .gls {
    display: block;
    font-size: 0.78em;
    color: var(--gloss-color);
    line-height: 1.0;
    margin-top: 0;
}

.ilpair .gls .glssc {
    font-size: 1em;
    color: var(--gloss-color);
    line-height: 1.0;
    margin-top: 0;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
}

/* The PHP wraps each example in an unclassed <div> — give those a quiet
   left rule when they sit immediately after a "(N) The language X:" line. */
.page p + div:has(> div.ortho) {
    margin: 0.6em 0 1.2em;
    padding: 0.4em 0 0.4em 1.1em;
    border-left: 1px solid var(--rule);
}

/* ---------- Tables ---------- */
table.numexample,
table.orthotable {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
table.numexample td,
table.orthotable td {
    padding: 0.2em 0.4em;
    vertical-align: top;
}
td.example { width: 90%; }
td.example p { margin: 0; }
td.number {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}

table.chart {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

th.chart, table.chart th {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

td.chart, table.chart td {
    background: transparent;
    border: 0;
    padding: 0.55rem 0.5rem;
    text-align: center;
}

/* ---------- Dictionary ---------- */
div.dict {
    column-count: 3;
    column-gap: 1.6em;
    column-rule: 1px solid var(--column-rule-color);
    margin-top: 1em;
}

ul.dict {
    list-style-type: none;
    padding-left: 1em;
    text-indent: -1em;
    margin: 0;
}

ul.dict li { break-inside: avoid; }

/* ---------- Boxed callouts ---------- */
/* Questions: a clear, self-contained block — paper fill, full hairline
   border, and a small uppercase label so the start of each question is
   unmistakable. Calmer than the old blue boxes, but no ambiguity about
   where one question ends and the next begins. */
.questionbox {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    padding: 1.6em 1.4em 1.2em;
    margin: 1.8em 0;
    box-shadow: var(--shadow-weak);
}
.questionbox::before {
    content: "Question";
    position: absolute;
    top: -0.6em;
    left: 1em;
    background: var(--bg);
    padding: 0 0.55em;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    line-height: 1.2;
}
.questionbox > :first-child { margin-top: 0; }
.questionbox > :last-child  { margin-bottom: 0; }

/* Table of contents: keep the lighter hairline-only treatment. */
.tocbox {
    background: transparent;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 1.1em 0;
    margin: 1.6em 0;
}

.tocbox a {
    text-decoration: none;
    color: var(--ink);
}
.tocbox a:hover {
    text-decoration: underline;
    color: var(--accent);
}
.tocbox ol {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
    margin: 0.2em 0;
}
.tocbox li {
    counter-increment: item;
    margin: 0.25rem 0;
}

/* Compact citation block */
.bibtex-card {
    width: min(calc(100% - 2rem), 38rem);
    margin: 0.4em 0 1.4em 2rem;
    padding: 0.9rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-weak);
    color: var(--ink);
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.56rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-x: auto;
    tab-size: 2;
}

@media (max-width: 640px) {
    .bibtex-card {
        width: 100%;
        margin-left: 0;
    }
}
.tocbox li::before {
    content: counters(item, ".") "\00a0\00a0";
    color: var(--accent);
    font-variant-numeric: lining-nums;
}

/* ---------- Form controls ---------- */
option {
    background-color: var(--paper);
    color: var(--ink);
}

select {
    background-color: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    padding: 0.4em 0.55em;
    border-radius: 3px;
    font: inherit;
}

select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 120, 140, 0.18);
}

input,
textarea {
    background-color: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.4em 0.55em;
    font: inherit;
}

button,
.btn {
    background-color: var(--accent);
    color: var(--paper);
    border: 0;
    padding: 0.55em 1.2em;
    border-radius: 3px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--shadow-weak);
    transition: background-color 0.15s, box-shadow 0.2s, transform 0.15s;
}
button:hover, .btn:hover {
    background-color: var(--accent-deep);
    box-shadow: var(--shadow-mid);
    transform: translateY(-1px);
}
button:active, .btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-weak);
}
button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.text-link-button {
    background: none;
    color: var(--link-col);
    border: 0;
    padding: 0;
    border-radius: 2px;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.18em;
}
.text-link-button:hover,
.text-link-button:active {
    background: none;
    color: var(--link-hover);
    box-shadow: none;
    transform: none;
}
.text-link-button:focus-visible {
    outline-offset: 2px;
}

/* ---------- Diff highlights ---------- */
.diff-add { color: var(--diff-add-fg); background: var(--diff-add-bg); }
.diff-del { color: var(--diff-del-fg); background: var(--diff-del-bg); }

/* ---------- Status flashes ---------- */
#applyStatus { margin-left: 0.5rem; font-size: 0.95em; }
#applyStatus.ok  { color: var(--status-ok-color); }
#applyStatus.err { color: var(--status-err-color); }
.ok  { color: var(--status-ok-color); }
.err { color: var(--status-err-color); }
.flash { animation: fadeout 1.2s ease-in forwards; }
@keyframes fadeout {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Sidebar-anchored navigation controls ----------
   The PHP emits up to three buttons:
     - .float    — Submit / Create (only on pages with a <form>)
     - .top-btn  — scroll to top
     - .bot-btn  — scroll to bottom

   They dock into the bottom of the sidebar column so they sit on
   the same vertical axis as the centred identity above. position:
   fixed keeps them in view during scroll; --layout-pad slides them
   inward in lockstep with .layout when the viewport is wider than
   --layout-max and the layout is centred.

      ┌──── sidebar ────┐
      │     ▲ logo      │
      │   The Language  │
      │      Creator    │
      │     – tagline   │
      │                 │
      │                 │
      │ ┌─────┬───────┐ │   ← .top-btn   .bot-btn
      │ │  ⇧  │   ⇩   │ │
      │ ├─────┴───────┤ │
      │ │   CREATE    │ │   ← .float (questionnaire only)
      │ └─────────────┘ │
      └─────────────────┘                                       */
.mobile-toolbar { display: none; }

.float,
.top-btn,
.bot-btn {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    margin: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
    z-index: 9999;
}

/* Submit / Create — full sidebar-column width, primary fill,
   docked along the floor of the sidebar. */
.float {
    left: calc(var(--layout-pad) + 1.5rem);
    width: calc(var(--margin-w) - 3rem);
    min-width: 0;
    height: 44px;
    padding: 0 0.8rem;

    background-color: var(--accent);
    color: var(--paper);

    font-family: var(--header-font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.float:hover    { background-color: var(--accent-deep); }
.float:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ⇧ / ⇩ — a hairline-bordered pair sitting above .float. */
.top-btn,
.bot-btn {
    bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 44px + 8px);
    width: calc((var(--margin-w) - 3rem - 8px) / 2);
    height: 36px;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    font-size: 0.95rem;
    font-weight: 500;
}
.top-btn {
    left: calc(var(--layout-pad) + 1.5rem);
}
.bot-btn {
    /* layout-pad + sidebar inner-left + half inner-width + gap */
    left: calc(var(--layout-pad) + 1.5rem + (var(--margin-w) - 3rem - 8px) / 2 + 8px);
}
.top-btn:hover,
.bot-btn:hover {
    background: var(--paper);
    color: var(--accent);
    border-color: var(--accent);
}
.top-btn:focus-visible,
.bot-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    z-index: 10000;
}

/* On pages without Submit/.float the arrows fall to the sidebar floor. */
body:not(:has(.float)) .top-btn,
body:not(:has(.float)) .bot-btn {
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

/* ---------- SVG diagram ---------- */
svg.lcdiagram { color: var(--ink); }
svg.lcdiagram .stroke      { stroke: var(--rule-strong); }
svg.lcdiagram .fill-soft   { fill: var(--strip); }
svg.lcdiagram .fill-strong { fill: var(--paper); }
svg.lcdiagram .fill-user   { fill: transparent; }

svg.lcdiagram .box        { stroke-width: 1.25; rx: 3; }
svg.lcdiagram .box-strong { stroke-width: 1.25; rx: 3; }
svg.lcdiagram .box-internal { stroke-dasharray: 6 4; }
svg.lcdiagram .user       { stroke-width: 1.5; }

svg.lcdiagram .title {
    font-family: var(--primary-font);
    font-size: 17px;
    font-weight: 600;
    fill: var(--ink);
}
svg.lcdiagram .label {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    fill: var(--ink);
}
svg.lcdiagram .small {
    font-family: var(--primary-font);
    font-size: 12px;
    fill: var(--ink-soft);
    font-style: italic;
}
svg.lcdiagram .mono {
    font-family: var(--primary-font);
    font-size: 13px;
    font-style: italic;
    fill: var(--ink-soft);
}
svg.lcdiagram .arrow {
    fill: none;
    stroke-width: 1.25;
}
svg.lcdiagram .arrow-dash {
    fill: none;
    stroke-width: 1.25;
    stroke-dasharray: 4 4;
}
svg.lcdiagram .caption {
    font-family: var(--primary-font);
    font-size: 12px;
    fill: var(--ink-soft);
    font-style: italic;
}

/* ---------- Showcase table ---------- */
table.showcase {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 1em 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}
table.showcase th,
table.showcase td {
    padding: 0.6rem 0.8rem;
    vertical-align: top;
    text-align: left;
}
table.showcase th {
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
table.showcase th:nth-child(1),
table.showcase td:nth-child(1) { width: 30%; }
table.showcase th:nth-child(2),
table.showcase td:nth-child(2) { width: 45%; }
table.showcase th:nth-child(3),
table.showcase td:nth-child(3) { width: 25%; white-space: nowrap; }
table.showcase em {
    color: var(--ink-soft);
    font-style: italic;
}

/* ---------- Print ---------- */
@media print {
    :root {
        --bg:           #ffffff;
        --paper:        #ffffff;
        --strip:        #ffffff;
        --ink:          #000000;
        --ink-soft:     #333333;
        --rule:         #999999;
        --rule-strong:  #000000;
        --accent:       #000000;
        --accent-deep:  #000000;
        --link-col:     #000000;
        --box-shadow:   none;
    }
    body {
        background: white !important;
        padding: 0;
    }
    .layout {
        display: block;
        max-width: none;
        padding: 0;
    }
    .site-header {
        position: static;
        height: auto;
        background: transparent;
        border-right: 0;
        border-bottom: 1px solid #000;
        padding: 0 0 1rem;
        margin-bottom: 1.5rem;
    }
    .content { display: block; }
    .page {
        max-width: none;
        padding: 0;
    }
    .float, .top-btn, .bot-btn, .mobile-toolbar {
        display: none !important;
    }
    h1, h2, h3, h4 {
        font-family: Palatino, 'CharisW', serif;
    }
    h2::before, h3::before {
        position: static;
        margin-right: 0.5em;
    }
    table, table tr, table tr td, table tr th {
        page-break-inside: avoid;
    }
    th.chart, td.chart, .questionbox, .tocbox {
        background: white;
        box-shadow: none;
    }
    .questionbox::before {
        background: white;
        color: #000;
    }
    a, a:visited {
        color: inherit !important;
        text-decoration: none !important;
    }
    .page > p:first-of-type::first-letter {
        color: #000;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    :root {
        --margin-w: 11rem;
        --content-w: 44rem;
    }
    .page { padding: 3rem 2rem 4rem; }
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
        max-width: 44rem;
        padding: 0 1.25rem;
    }
    .site-header {
        position: static;
        height: auto;
        background: transparent;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 1.5rem 0 1.2rem;
        overflow: visible;
        /* Override the desktop column-stack: the banner is now a
           horizontal row of [logo] [title + tagline]. */
        display: block;
        text-align: left;
    }
    .site-identity {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.9rem;
        margin-bottom: 0;
        width: auto;
    }
    .site-identity .logo, .logo {
        width: 2.2rem;
        margin: 0;
    }
    .site-tagline {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .content { grid-column: 1; }
    .page {
        padding: 2rem 0 3rem;
        max-width: none;
    }
    /* counters return inline so they don't sit off-canvas */
    h2::before, h3::before {
        position: static;
        margin-right: 0.55em;
    }
    .sidebar {
        margin: 1rem 0;
        padding: 0.9rem 0;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
    }

    /* ---------- Floating buttons → sticky bottom action bar ----------
       The sidebar has collapsed to a horizontal banner above the
       content, so the tray can't dock into it any more. The buttons
       become a sticky bar across the bottom of the viewport: Create
       fills the left/centre, ⇧⇩ take the right edge as 52 × 56 px
       tap targets. */
    body { padding-bottom: 72px; }

    .float,
    .top-btn,
    .bot-btn {
        bottom: 0;
        height: 56px;
        border-radius: 0;
        border-top: 1px solid var(--rule);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .float {
        left: 0;
        right: 104px;
        width: auto;
        padding: 0 1rem;
        background-color: var(--accent);
        color: var(--paper);
        font-size: 0.95rem;
    }

    .top-btn {
        right: 52px;
        left: auto;
        width: 52px;
        background: var(--mobile-toolbar-bg);
        border-left: 1px solid var(--rule);
        color: var(--ink-soft);
    }
    .bot-btn {
        right: 0;
        left: auto;
        width: 52px;
        background: var(--mobile-toolbar-bg);
        border-left: 1px solid var(--rule);
        color: var(--ink-soft);
    }

    body:not(:has(.float)) .top-btn,
    body:not(:has(.float)) .bot-btn {
        bottom: 0;
    }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .layout { padding: 0 1rem; }
    .page-title, h1 {
        font-size: 1.85rem;
        line-height: 1.15;
    }
    .page > p:first-of-type::first-letter {
        font-size: 3em;
    }
    div.dict { column-count: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}