/* gloss.css -- styles for the annotated ("gloss") articles: an original central text (#paper), glosses in its
   left (aside) and right (aside.rhs) margins, context above (#preamble) and below (#postamble), and a.tooltip
   words whose title is a short gloss.

   Provenance: the rules marked "2021" are the owner's own gloss rules from the afgarland theme stylesheet as
   captured by the Internet Archive on 2021-03-13 (site-audit/wayback/css/afgarland-6837a526.style.20210313005311.css,
   its last 70 lines). The later build (afgarland-3bbc03b6), which presumably styled aside.rhs and a.tooltip, is
   lost; those rules are new, written in the same idiom. Every rule is scoped to #paper, #preamble or #postamble so
   nothing else on a page changes. Dropped from 2021 because they never took effect: the invalid "left:-100" and
   "align:center", the SCSS-style .intext block, the misspelt selector "figurecaption" (matched nothing), and the
   empty "body {}".

   Mechanism: as in 2021, a margin gloss is absolutely positioned with top auto, so it stays at its own place in
   the text, and the text reserves the margin it sits in. Glosses on one side must therefore be at least their own
   height apart, or they overlap. Where #paper is too narrow for two margins (a container query on #paper), and in
   print, glosses run inline as light-blue notes. Plain CSS, no JS. */

/* new: #paper is a query container, so the layout follows the width the article actually gets (listing pages
   with sidebars, phones, print), not the window width. */
#paper { container-type: inline-size; }

/* 2021, adapted: the 200px start margin moved into the wide-layout rule below (it is reserved only when there
   is room for it). line-height is new: Garland's body sets a fixed 20.4px line-height, which the 14pt paper
   inherits; the h1 (31.7px) kept that 20.4px too, so its lines overlapped each other and the first line of text.
   overflow-wrap is new: long URLs (the print page spells them out)
   break instead of pushing a phone page sideways. */
#paper {
  font-family: Georgia, serif;
  font-size: 14pt;
  text-align: justify;
  line-height: 1.45;
  overflow-wrap: break-word;
}

/* 2021, adapted: "left" never applied (not positioned). New: padding, so text does not touch the blue edge, and
   line-height 1.45 as on #paper (Garland's fixed 20.4px is 1.09 times this 14pt, 18.67px, text). */
#preamble, #postamble {
  font-size: 14pt;
  background-color: lightblue;
  line-height: 1.45;
  padding: 0.3em 0.6em;
}
/* new: an empty frame (node 483's #postamble holds only a newline) gets no padding, so it draws no blue strip. */
#preamble:not(:has(*)), #postamble:not(:has(*)) { padding-block: 0; }
/* new: contain the preamble's floated image so #paper, a query container and therefore a formatting context,
   is not narrowed beside it. */
#preamble, #postamble { display: flow-root; }
#paper #postamble:has(*) { margin-top: 1em; }  /* new: on node 483 #postamble is nested inside #paper */

/* 2021, adapted: scoped under #paper (other pages, e.g. augmenting-cello.html, use p.Abstract/p.References in
   their biblio entries). */
#paper .Authors, #paper .Institution { text-align: center; }
#paper .References, #paper .ArticleBody, #paper .Abstract { text-align: justify; }

/* 2021, adapted: scoped; "align:center" (invalid) and "figurecaption" (matched nothing) dropped. */
#paper figure { text-align: center; }
#paper .dlcode { font-family: courier, monospace; }  /* 2021, adapted: scoped; generic fallback added */

/* 2021, adapted: scoped. max-width is new: an image wider than a narrow column would push the page sideways. */
#paper .i-left, #preamble .i-left, #postamble .i-left { float: left; margin: 15px; }
#paper .i-right, #preamble .i-right, #postamble .i-right { float: right; margin: 15px; }
#paper img, #preamble img, #postamble img { max-width: 100%; height: auto; }

/* 2021 */
#paper h1, #paper h2, #paper h3, #paper h4, #paper h5, #paper h6 {
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
}

/* new: Garland sets heading margins to 0, which runs section headings into the text. */
#paper h2, #paper h3, #paper h4 { margin: 0.8em 0 0.3em; }

/* 2021, adapted: <bl> is not an HTML element and renders inline, so the indent reached only its first line;
   display:block makes it the indented list the markup means. */
#paper dl, #paper ul, #paper bl, #paper pre { margin-inline-start: 30px; }
#paper bl { display: block; }
/* new: the parser closes the <p> before an <li> inside <bl>, which can leave an <li> directly in the section;
   give it the same indent. */
#paper section > li { margin-inline-start: 30px; }
/* new: code is never justified (#paper justifies its text), and long code lines wrap. Garland's style-l.css wraps
   pre too (print/483.html does not load it, so there this rule does the wrapping); where prism.css is loaded, its
   "white-space: pre !important" wins on screen and the pre scrolls in its own box. Paper cannot scroll, so in
   print the wrap is forced (see the print rules at the end). */
#paper pre { white-space: pre-wrap; text-align: start; }

/* 2021, adapted: scoped (the global rule restyled unrelated videos on listing pages). max-width is new, as for
   images above. */
#paper video, #preamble video, #postamble video { display: block; margin: auto; max-width: 100%; }

/* ---- Glosses ---------------------------------------------------------------------------------------------- */

/* 2021 look (light blue, 12pt; Georgia as #paper sets it); adapted for narrow widths and print: the gloss runs
   inline as a distinct note. flow-root keeps its blue box beside floats instead of under them. New: padding,
   line-height 1.35 (chosen by eye for the smaller type, not measured), and a side border that keeps left and
   right glosses distinct when inline. */
#paper aside {
  display: flow-root;
  background-color: lightblue;
  font-size: 12pt;
  line-height: 1.35;
  text-align: left;
  font-family: Georgia, serif;
  margin: 0.5em 0;
  padding: 0.3em 0.6em;
  border-left: 4px solid steelblue;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
#paper aside.rhs { text-align: right; border-left: 0; border-right: 4px solid steelblue; }  /* new: right side */
#paper aside img { max-width: 100%; height: auto; }  /* new: an image never overflows its gloss */
/* new: inline glosses are also indented from the opposite side, so a left gloss hangs left and a right gloss
   hangs right (the wide rule's margin: 0 resets this). */
#paper aside { margin-inline-end: 25%; }
#paper aside.rhs { margin-inline-start: 25%; margin-inline-end: 0; }
@container (max-width: 480px) {
  #paper aside { margin-inline-end: 1.5em; }
  #paper aside.rhs { margin-inline-start: 1.5em; margin-inline-end: 0; }
}

/* Wide screens only: two margins beside a central column of readable length. (Print always runs glosses
   inline: an absolute box cannot be kept from splitting across pages.) */
@media screen {
  @container (min-width: 880px) {
    /* 2021, adapted: the 200px start margin now reserved on both sides (new: the right one holds aside.rhs), on
       the column rather than on #paper; the column is capped at a readable line length and centred. The column
       is the containing block of the glosses, so left:0 / right:0 are its margins. */
    #paper > * {
      position: relative;
      box-sizing: content-box;
      max-width: 40em;
      padding-inline: 200px;
      margin-inline: auto;
    }
    /* 2021, adapted: position:absolute; left:0; width:180px; right-aligned; top stays auto (the gloss's place in
       the text). New: margin and border reset from the inline form; padding 0.3em 0.5em inside the 180px
       (border-box), so the text measure is about 164px and does not touch the blue edge. */
    #paper aside {
      position: absolute;
      left: 0;
      width: 180px;
      margin: 0;
      text-align: right;
      border: 0;
      padding: 0.3em 0.5em;
    }
    /* new: the mirror image for the right margin. */
    #paper aside.rhs { left: auto; right: 0; text-align: left; border: 0; margin: 0; }
  }
}

/* 2021, adapted for phones: justified lines of ~30 characters open wide gaps between words; below about 560px
   of column the paper is set ragged-right. */
@container (max-width: 560px) {
  #paper .References, #paper .ArticleBody, #paper .Abstract { text-align: start; }
}

/* ---- Tooltip glosses ---------------------------------------------------------------------------------------- */

/* new: a.tooltip carries a short gloss in its title; a dotted underline marks the word (longhands: the
   "underline dotted" shorthand is recent in Safari). color: inherit, because the word is a gloss, not a link
   (its href is "#" on the articles, and on print/484.html "../print/484", the print page itself); the underline
   alone marks it.
   By default (touch screens, narrow columns, print) the gloss runs inline after the word, in parentheses, on
   the gloss blue. inline-block stops the word's underline running through the note. The same form holds on
   hover and focus, so nothing reflows under the pointer. */
#paper a.tooltip { position: relative; text-decoration-line: underline; text-decoration-style: dotted; color: inherit; }
#paper a.tooltip::after,
#paper a.tooltip:hover::after,
#paper a.tooltip:focus::after {
  content: "(" attr(title) ")";
  display: inline-block;
  position: static;
  margin-inline-start: 0.25em;
  padding: 0 0.3em;
  background-color: lightblue;
  font-size: 12pt;
  line-height: 1.2;
  text-align: left;
  color: #000;
}
/* new: each tooltip word wraps its text in <span title="some">, so the browser's own tooltip said "some". With
   the span transparent to the pointer, the word's own title (the gloss) is what the browser shows. */
#paper a.tooltip [title] { pointer-events: none; }
/* new: wherever the gloss is shown inline (touch screens, narrow columns), a click or tap has nothing to reveal
   and would only follow the link, back to the top of the page. So the word ignores the pointer there; the popup
   rules below turn it back on. Keyboard focus still reaches the word. */
#paper a.tooltip { pointer-events: none; }
/* new: an unbreakable inline note in a justified line opens wide word gaps; set those paragraphs ragged. */
#paper :is(p, li, dd):has(a.tooltip) { text-align: start; }

/* new: with a mouse and room for margins, the gloss is hidden until hover or keyboard focus, then shows below
   the word as a small gloss box. max-width 11em (176px + 16px padding) stays inside the 200px right margin, so
   a word at the end of a line never pushes the box off the page. */
@media screen and (hover: hover) {
  @container (min-width: 880px) {
    #paper :is(p, li, dd):has(a.tooltip) { text-align: justify; }  /* new: no inline note here, so justify again */
    #paper a.tooltip { pointer-events: auto; }  /* new: the pointer must reach the word to show the popup */
    #paper a.tooltip::after,
    #paper a.tooltip:hover::after,
    #paper a.tooltip:focus::after {
      content: attr(title);
      position: absolute;
      left: 0;
      top: 100%;
      z-index: 10;
      width: max-content;
      max-width: 11em;
      margin: 0;
      padding: 0.2em 0.5em;
      line-height: 1.35;
    }
    #paper a.tooltip::after { display: none; }
    #paper a.tooltip:hover::after, #paper a.tooltip:focus::after { display: block; }
  }
}

/* new: in print a gloss is never split across pages (glosses are inline blocks in print), and code lines wrap:
   prism.css sets "white-space: pre !important", which on paper cut "pressure" to "p" on the OSC paper. A token
   longer than the line breaks too (prism sets word-wrap: normal); no current page has one, so that part is
   untested. */
@media print {
  #paper aside { break-inside: avoid; }
  #paper pre, #paper pre code { white-space: pre-wrap !important; overflow-wrap: anywhere !important; }
}