/* manual.css - the look of the HTML manual's pages, loaded after
 * site.css on those pages only (layouts/partials/head.html).
 *
 * The pages are the manual's build output, unchanged: TeX4ht's class
 * names (chapterHead, sectionToc, td01, ...), its font classes
 * (ec-lmtt-10x-x-109 for code, ec-lmri-... for italics, ...), and the
 * manual's own classes for the house commands (file, code, directive,
 * option, envvar, msg, term, typed) and for notes and warnings. TeX4ht's
 * own stylesheet is not loaded, so every class used here starts with
 * no style at all.
 *
 * Rules taken from the approved mock-up, design/manual-mockup.html,
 * unless a comment says otherwise.
 */

/* ===== Colours used only here ===== */

:root {
  --rule: #b9b3a6;      /* table rules */
  --block-bg: #f7f5f0;  /* source listings */
  --note-bg: #faf6ef;   /* notes and warnings */
  --warn: #d23b2a;      /* the edge of a warning */
  --paper: #f6f4ef;     /* the panel behind a figure in dark mode */
}
/* The dark set, chosen as in site.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rule: #3a4766;
    --block-bg: #111a2e;
    --note-bg: #16203a;
  }
}
:root[data-theme="dark"] {
  --rule: #3a4766;
  --block-bg: #111a2e;
  --note-bg: #16203a;
}

/* ===== The bar under the header: the manual's title and its PDF ===== */

.mbar { background: var(--band); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; }
.mbarin { display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; gap: 12px; }
.mtitle { color: var(--text); font-weight: 600; font-size: 14px; }
.pdf { font-size: 13px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.pdf:hover { color: var(--text); border-color: var(--muted);
  text-decoration: none; }

/* ===== The page ===== */

.manual { max-width: 740px; margin: 0 auto; padding: 24px 16px 48px;
  color: var(--body); font-size: 17px; line-height: 1.75; }
[lang="ja"] .manual { line-height: 1.95; font-size: 16.5px; }

/* Previous / contents / next, and the two cards at the bottom */
.chnav { display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; margin: 8px 0 40px; flex-wrap: wrap; }
.chnav a { color: var(--muted); }
.chnav a:hover { color: var(--text); }
.chnav .c { font-weight: 600; }
.chnav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 56px; }
.chnav2 .card { display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.chnav2 .card:hover { border-color: var(--muted); text-decoration: none; }
.chnav2 small { color: var(--muted); font-size: 13px; }
.chnav2 b { color: var(--text); }
.chnav2 .n { text-align: right; grid-column: 2; }

/* ===== Headings ===== */

.manual h1, .manual h2, .manual h3, .manual h4 { color: var(--text); }
.manual h2.chapterHead, .manual h2.appendixHead,
.manual h2.likechapterHead, .manual h1.partHead {
  font-size: clamp(30px, 4.2vw, 42px); line-height: 1.2; margin: 0 0 28px;
  letter-spacing: -.4px; }
[lang="ja"] .manual h2.chapterHead, [lang="ja"] .manual h2.appendixHead,
[lang="ja"] .manual h2.likechapterHead, [lang="ja"] .manual h1.partHead {
  letter-spacing: 0; line-height: 1.35; }
/* "Chapter 3", "Appendix A", "Part I": a small line above the title */
.manual h2 .titlemark, .manual h1.partHead .titlemark { display: block;
  font-size: 15px; color: var(--accent-text); font-weight: 700;
  letter-spacing: .6px; margin-bottom: 8px; }
.manual h2.chapterHead br, .manual h2.appendixHead br,
.manual h1.partHead .titlemark br { display: none; }
.manual h3.sectionHead, .manual h3.likesectionHead { font-size: 24px;
  line-height: 1.3; margin: 52px 0 16px; letter-spacing: -.2px; }
.manual h4.subsectionHead, .manual h4.likesubsectionHead { font-size: 19px;
  margin: 36px 0 12px; }
.manual h3 .titlemark, .manual h4 .titlemark { color: var(--muted);
  font-weight: 600; margin-right: .5em; }

/* ===== Text ===== */

.manual p { margin: 0 0 1.1em; }
/* TeX4ht leaves empty paragraphs around figures, tables and lists:
   they take no space. (Not in the mock-up.) */
.manual p:empty, .manual p.indent:has(> a:only-child:empty) { display: none; }
.manual ol, .manual ul { margin: 0 0 1.2em; padding-left: 1.4em; }
.manual li { margin-bottom: .5em; }
.manual li p { margin-bottom: .4em; }
.manual strong, .manual b { color: var(--text); font-weight: 700; }
.manual blockquote.quote { margin: 0 0 1.2em 1.4em; }
.manual div.center { text-align: center; }
.manual div.center div { text-align: left; }

/* TeX4ht's font classes. Only the kind of type is kept; the sizes
   TeX4ht gives them are not, so that code keeps its columns inside a
   listing. (The mock-up named three of them; this covers all.) */
.manual [class^="ec-lmtt"], .manual [class^="ec-lmtk"],
.manual [class^="ts1-lmtt"] { font-family: var(--mono); }
.manual [class^="ec-lmbx"], .manual [class^="ec-lmtk"] {
  font-weight: 700; color: var(--text); }
.manual [class^="ec-lmri"], .manual [class^="ec-lmtti"] { font-style: italic; }
[lang="ja"] .manual [class^="ec-lmri"] { font-style: normal; font-weight: 600; }

/* A term where it is defined: set in italics in the PDF, here in bold */
.manual .term [class^="ec-lmri"] { font-style: normal; font-weight: 600;
  color: var(--text); }

/* Names in running text: instructions, files, directives, options,
   environment variables, messages. (The mock-up had the first three.) */
.manual .code, .manual .file, .manual .directive, .manual .option,
.manual .envvar, .manual .msg { font-family: var(--mono); font-size: .88em;
  background: var(--code-bg); padding: .08em .35em; border-radius: 4px;
  white-space: nowrap; }
.manual .code span, .manual .file span, .manual .directive span,
.manual .option span, .manual .envvar span, .manual .msg span {
  font-family: inherit; }
/* A message is a sentence, often wider than a phone's screen: it wraps
   like the text around it (not in the mock-up) */
.manual .msg { white-space: normal; }
/* What the reader types, in running text */
.manual .typed { font-family: var(--mono); font-weight: 700;
  color: var(--text); }
/* Inside a table the names are already small enough */
.manual td .code, .manual td .file, .manual td .directive,
.manual td .option, .manual td .envvar, .manual td .msg { font-size: .95em; }
.manual a.url { word-break: break-all; }

/* ===== Listings and MSX-DOS sessions ===== */

.manual pre { font-family: var(--mono); font-size: 14px; line-height: 1.6;
  background: var(--block-bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 1.4em;
  overflow-x: auto; white-space: pre; color: var(--text); }
/* TeX4ht writes every listing character in black: let the theme decide */
.manual pre span[style*="color"] { color: inherit !important; }
/* A session is a listing with something the reader types in it: the
   same screen as on the home page. (The mock-up used the class
   "listings", which TeX4ht also gives to source listings.) */
.manual pre:has(.typed) { background: var(--term-bg); color: var(--term-text);
  border-color: var(--term-line); }
.manual pre .typed { color: #fff; font-weight: 700; }

/* ===== Figures ===== */

.manual figure { margin: 2em 0; text-align: center; }
.manual figure p { margin: 0; }
.manual figure.figure { overflow-x: auto; }
.manual figure img { max-width: 100%; height: auto; }
.manual figcaption, .manual .caption { font-size: 14px; color: var(--muted);
  margin-top: 10px; text-align: center; line-height: 1.55; }
.manual .caption .id { color: var(--text); font-weight: 700; }
/* The figures are drawn for white paper: in dark mode each one sits on
   a paper-coloured panel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .manual figure.figure img {
    background: var(--paper); padding: 18px; border-radius: 8px; }
}
:root[data-theme="dark"] .manual figure.figure img {
  background: var(--paper); padding: 18px; border-radius: 8px; }

/* ===== Tables ===== */

.manual div.table { margin: 2em 0; }
.manual div.table > p:first-child { margin: 0; }
.manual div.tabular, .manual div.longtable { overflow-x: auto; }
.manual table.tabular, .manual table.longtable { border-collapse: collapse;
  margin: 0 auto; font-size: 15px; line-height: 1.5; }
.manual table.tabular td, .manual table.longtable td { padding: 7px 16px;
  white-space: normal !important; vertical-align: top; }
/* TeX4ht's rules are hard-coded black, one rule per cell: recolour them */
.manual table.tabular, .manual table.tabular tr, .manual table.tabular td,
.manual table.longtable, .manual table.longtable tr,
.manual table.longtable td { border-color: var(--rule) !important; }
.manual table.tabular tr:first-child td { font-weight: 700; color: var(--text);
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.manual table.tabular tr:last-child td { border-bottom: 2px solid var(--rule); }
/* A longtable has its rules as rows with one empty cell across the
   table: above the heading, below it and at the end */
.manual table.longtable td[colspan]:empty { padding: 0;
  border-bottom: 1px solid var(--rule); }
.manual caption.longtable { font-size: 14px; color: var(--muted);
  padding-bottom: 10px; }

/* ===== Notes and warnings ===== */

.manual div.note, .manual div.warning { margin: 1.6em 0; padding: 14px 18px;
  background: var(--note-bg); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 6px; }
.manual div.warning { border-left-color: var(--warn); }
.manual div.note blockquote, .manual div.warning blockquote { margin: 0; }
.manual div.note p:last-child, .manual div.warning p:last-child {
  margin-bottom: 0; }

/* ===== Lists of terms ===== */

.manual dl.description { margin: 0 0 1.4em; }
.manual dt.description { color: var(--text); font-weight: 700;
  margin-top: .8em; }
.manual dd.description { margin: 0 0 0 1.4em; }

/* ===== Footnotes ===== */

.manual .footnote-mark sup { font-size: .72em; }
.manual div.footnotes { border-top: 1px solid var(--line); margin-top: 3em;
  padding-top: 1em; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ===== The title page, the contents and the index (not in the mock-up) ===== */

.manual .maketitle { text-align: center; margin: 24px 0 48px; }
.manual h2.titleHead { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.2;
  margin: 0 0 16px; }
.manual h2.titleHead .url { display: block; font-size: 16px;
  font-weight: 400; margin-top: 12px; }
.manual .maketitle .author, .manual .maketitle .date { color: var(--muted); }
.manual .tableofcontents, .manual .chapterTOCS { line-height: 1.9; }
.manual .partToc { display: inline-block; margin-top: 1.2em; font-weight: 700;
  color: var(--text); font-size: 1.1em; }
.manual .chapterToc, .manual .likechapterToc, .manual .appendixToc {
  display: inline-block; margin-top: .6em; font-weight: 700; }
.manual .sectionToc, .manual .likesectionToc { margin-left: 1.6em; }
.manual .subsectionToc, .manual .likesubsectionToc { margin-left: 3.2em;
  font-size: .94em; }
.manual .index-item { display: block; padding-left: 2em; text-indent: -2em; }
.manual .theindex { line-height: 1.6; }

/* ===== Narrow screens ===== */

@media (max-width: 560px) {
  .manual { font-size: 16px; }
  .manual pre { font-size: 12.5px; }
  .chnav2 { grid-template-columns: 1fr; }
  .chnav2 .n { grid-column: auto; }
  /* A wide figure keeps its drawn size, readable, and scrolls sideways
     in its frame (specs.md, section 5) */
  .manual figure.figure img { max-width: none; }
}