/* Sticky box extension for Datenstrom Yellow */
/* The box keeps its place in the column of the page it was written in. While the reader scrolls through the part
   between [box] and [/box], the browser holds the box near the top of the screen with position: sticky, and when
   that part ends the box leaves with it. Nothing in stickybox.js writes a coordinate: the script only writes sizes -
   the two the reader chooses with the handle, --stickybox-want and --stickybox-body-high, and a few it measures on
   the page: the free space beside the column, the room taken by a panel the page pins over the head, the width of a
   moving picture - and every limit on them is applied here. A box can therefore never be drawn above [box], never
   leave the screen, and never carry its own button out of reach, because no rule here can put it anywhere a block
   of the page could not go.
   Without JavaScript, and before stickybox.js runs, the box is an ordinary block above the content it belongs to.

   Where each control stands, and why:
     the button that shuts the box   the top right corner, in both states, so the reader always finds it in one place
     the label of the reading        the top left corner, where reading starts
     the handle for the size         the bottom right corner of the whole box, under everything else - never between
                                     two parts of the box, which would put a control above the reading it belongs to
     "End"                           on the bottom edge of the reading, with room kept for it, so it covers no words
     the line with Play / Pause      the bottom row, so a shut box is still a box with a player in it
     the plain player of a recording at the top of the reading, and it stays there while the reading scrolls      */

.stickybox-group {
    /* the paper of a reading: warm, not white, and the head a shade deeper so the reader always sees where it is */
    --stickybox-ink: #2a2318;
    --stickybox-muted: #a8915e;
    --stickybox-quiet: #6a5525;
    --stickybox-paper: #fbf7ee;
    --stickybox-line: #e9dfc9;
    --stickybox-bar: #f5eedd;
    --stickybox-head: #efe3c6;
    --stickybox-accent: #b8942f;
    --stickybox-button: #c63729;
    --stickybox-button-dark: #b3261e;
    --stickybox-shadow: 0 1px 2px rgba(42, 35, 24, .06), 0 10px 28px rgba(42, 35, 24, .14);
    /* the numbers the reader changes with the handle; every limit on them is a few lines below */
    --stickybox-want: 100%;            /* the box starts exactly as wide as the column it stands in */
    --stickybox-max: 80vw;             /* the widest the reader may pull it, as a share of the screen */
    --stickybox-body-high: 50vh;
    --stickybox-body-max: 80vh;
    --stickybox-top: 5px;
    --stickybox-head-high: 40px;
    --stickybox-reach: 0px;
    --stickybox-pad: .5rem;            /* the margin of the reading at its sides */
    --stickybox-screen-width: 95%;     /* a moving picture on a wide screen; stickybox.js writes it in pixels */
    /* The width the box is really drawn at. The reader may only ever make the box WIDER than its column, never
       narrower: a reading squeezed into a few hundred pixels cannot be read, so the column is the floor. The ceiling
       is the share of the screen above, and is itself held inside the screen, because a page of this site may never
       be pushed sideways. Where the ceiling works out narrower than the column - a column that already fills the
       screen - clamp() returns the floor, and the box is simply as wide as its column. */
    --stickybox-wide: clamp(100%, var(--stickybox-want), var(--stickybox-roof));
    /* The widest the reader may pull it: the share of the screen set above, and never less than the column, because
       the column is also the floor. It is then held inside the free space the page leaves beside its column, and
       inside the screen itself, because a page of this site may never be pushed sideways. On a screen around a
       thousand pixels wide the column of this site is already wider than that share, so there the ceiling and the
       floor meet and the box is simply as wide as its column: on such a screen the page has no room to give it. */
    --stickybox-roof: min(max(var(--stickybox-max), 100%), calc(100% + 2 * var(--stickybox-reach)), calc(100vw - 1rem));
    position: relative;
}

.stickybox-group .stickybox {
    position: relative;   /* the frame of the rail, the glow, "End" and the two corner controls */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--stickybox-wide);
    /* the box is centred on its column, so widening it reaches out on both sides by the same amount */
    margin: 0 0 1.25rem calc((100% - var(--stickybox-wide)) / 2);
    background: var(--stickybox-paper);
    border: 1px solid var(--stickybox-line);
    border-radius: 12px;
    color: var(--stickybox-ink);
    overflow: hidden;
}
.stickybox *, .stickybox *::before, .stickybox *::after { box-sizing: border-box; }
/* The box has its own paper colour, so it also decides the colour of the text on it. Without this the text keeps
   whatever colour the theme of the site gives it, which on this paper can end up unreadable. */
.stickybox .stickybox-body,
.stickybox .stickybox-body p, .stickybox .stickybox-body li, .stickybox .stickybox-body dt, .stickybox .stickybox-body dd,
.stickybox .stickybox-body h1, .stickybox .stickybox-body h2, .stickybox .stickybox-body h3,
.stickybox .stickybox-body h4, .stickybox .stickybox-body h5, .stickybox .stickybox-body h6,
.stickybox .stickybox-body blockquote, .stickybox .stickybox-body figcaption, .stickybox .stickybox-body caption,
.stickybox .stickybox-body th, .stickybox .stickybox-body td,
.stickybox .stickybox-body strong, .stickybox .stickybox-body b, .stickybox .stickybox-body em, .stickybox .stickybox-body i,
.stickybox .stickybox-body small, .stickybox .stickybox-body code, .stickybox .stickybox-body pre { color: var(--stickybox-ink); }
.stickybox .stickybox-body a { color: var(--stickybox-quiet); }
/* A theme often holds the lines of its text to a width of their own - a cap in em or ch on paragraphs, lists and
   headings - so a column of text stays easy to read. Inside the reading that cap would stop the words at the old
   width however wide the reader pulls the box. The reading has its own width, the reader chooses it with the
   handle, and every line of text follows it. */
.stickybox-group .stickybox .stickybox-body p,
.stickybox-group .stickybox .stickybox-body li,
.stickybox-group .stickybox .stickybox-body ul,
.stickybox-group .stickybox .stickybox-body ol,
.stickybox-group .stickybox .stickybox-body dl,
.stickybox-group .stickybox .stickybox-body dt,
.stickybox-group .stickybox .stickybox-body dd,
.stickybox-group .stickybox .stickybox-body h1,
.stickybox-group .stickybox .stickybox-body h2,
.stickybox-group .stickybox .stickybox-body h3,
.stickybox-group .stickybox .stickybox-body h4,
.stickybox-group .stickybox .stickybox-body h5,
.stickybox-group .stickybox .stickybox-body h6,
.stickybox-group .stickybox .stickybox-body blockquote,
.stickybox-group .stickybox .stickybox-body pre { max-width: none; }

/* ---------- what belongs to the reading stays with the reading ---------- */
/* A reading in a test is not there to be taken away: it is not selected, not copied, not dragged out, and the
   recording offers no button to save it. What a browser itself offers - its own menus, its own view of the page -
   is the browser's and no stylesheet or script can take it away; this takes away what belongs to the page. */
.stickybox-group .stickybox {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.stickybox-group .stickybox input, .stickybox-group .stickybox textarea, .stickybox-group .stickybox select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.stickybox-body img, .stickybox-body video, .stickybox-body canvas, .stickybox-body svg {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ---------- the head: the label of the reading, and the button that shuts it ---------- */
.stickybox-group .stickybox-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* The head is kept low: every pixel of it is a pixel of reading taken away. It is still taller than the 24 pixels
       a finger needs to hit what is in it. */
    min-height: 2rem;
    /* Room kept at the right for the button, which stands in the corner of the box rather than in this row. And at
       the left, room for whatever the page keeps pinned over that corner of the screen - a quiz keeps the time left
       there - so the first thing in the head, the label of the reading, is never hidden behind it. stickybox.js
       measures that and writes it here; where nothing is pinned there it is nothing. */
    padding: .2rem 4rem .2rem calc(.55rem + var(--stickybox-head-left, 0px));
    background: var(--stickybox-bar);
    border-bottom: 1px solid var(--stickybox-line);
}
/* what stands in the head - the words of the site, or in a quiz the numbers of its questions - starts at the left */
.stickybox-group .stickybox-bar > :not(.stickybox-toggle) {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--stickybox-quiet);
    font-size: .76rem;
    font-weight: 700;
}
/* The button that shuts the box stands in the top right corner of the box itself, in both states. It is taken out
   of the row for that: inside the row it drifted with whatever else the head held, and shut - where the label and
   the player stand side by side - it came to rest in the middle of the box. */
.stickybox-group .stickybox-toggle {
    position: absolute;
    top: .25rem;
    right: .4rem;
    z-index: 6;
    min-width: 2.9rem;
    min-height: 1.5rem;
    margin: 0;
    padding: 0 .55rem;
    border: 1px solid var(--stickybox-button-dark);
    border-radius: 999px;
    background: var(--stickybox-button);
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.stickybox-group .stickybox-toggle[hidden] { display: none !important; }
.stickybox-group .stickybox-toggle:hover { background: var(--stickybox-button-dark); }
.stickybox-toggle:focus-visible, .stickybox-resize:focus-visible, .stickybox-line-play:focus-visible,
.stickybox-player-play:focus-visible {
    outline: 3px solid var(--stickybox-accent);
    outline-offset: 2px;
}

/* ---------- the content of the box ---------- */
.stickybox .stickybox-body {
    flex: 1 1 auto;
    padding: .55rem var(--stickybox-pad);
    max-height: min(var(--stickybox-body-high), var(--stickybox-body-max));
    overflow: auto;
    /* The reading keeps the scrolling to itself, in both directions. The box is an area of its own: a page that
       moved underneath instead would carry the reading away while the reader was still in it. stickybox.js sends
       every wheel over the head, the foot and the margins of the box here as well, so the whole box scrolls as one.
       The page is scrolled from outside the box, or with the scroll bar and the keys of the page. */
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--stickybox-line) transparent;
    /* a reading is read, so the text is given the size and the spacing of a reading, never squeezed to fit */
    font-size: 1rem;
    line-height: 1.65;
}
/* room kept at the foot of the reading for "End", so that badge never stands over a word of it */
.stickybox.is-scrollable > .stickybox-body { padding-bottom: 2.1rem; }
.stickybox .stickybox-body[hidden] { display: none !important; }
.stickybox-body > :first-child { margin-top: 0; }
.stickybox-body > :last-child { margin-bottom: 0; }
/* ---------- a recording among other content: the plain player ---------- */
/* stickybox.js puts the player of the browser away - it offers a bar to jump through the recording, a menu with its
   speed and a button to save it - and puts this one in its place: Play / Pause, a line that shows how far the
   recording has run, and the time. The line only shows; nothing in it can be pressed. While the reading scrolls,
   the player at the top of it stays at the top, so Play / Pause is always at hand. */
.stickybox-body audio.stickybox-quiet { display: none !important; }
.stickybox-body audio { display: block; width: 100%; }
.stickybox-group .stickybox-player {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .6rem;
    padding: .25rem .6rem .25rem .3rem;
    border: 1px solid var(--stickybox-line);
    border-radius: 999px;
    background: var(--stickybox-bar);
    color: var(--stickybox-quiet);
}
.stickybox-body > .stickybox-player:first-child,
.stickybox-body > :first-child:has(> .stickybox-player) {
    position: sticky;
    top: 0;
    z-index: 1;
    /* a ring of paper round it, so the words scrolling past are never seen at its rounded ends */
    box-shadow: 0 0 0 .4rem var(--stickybox-paper);
}
.stickybox-body > :first-child:has(> .stickybox-player) { background: var(--stickybox-paper); }
.stickybox-group .stickybox-player-play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stickybox-button-dark);
    border-radius: 50%;
    background: var(--stickybox-button);
    color: #fff;
    font: inherit;
    font-size: .74rem;
    line-height: 1;
    cursor: pointer;
}
.stickybox-group .stickybox-player-play:hover { background: var(--stickybox-button-dark); }
.stickybox-group .stickybox-player-track {
    flex: 1 1 auto;
    min-width: 2rem;
    height: .32rem;
    border-radius: 999px;
    background: rgba(106, 85, 37, .18);
    overflow: hidden;
    pointer-events: none;
}
.stickybox-group .stickybox-player-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--stickybox-accent);
}
.stickybox-group .stickybox-player-time {
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A picture, a moving picture, an embedded player and a diagram all follow the width of the box. */
.stickybox-body img, .stickybox-body video, .stickybox-body canvas, .stickybox-body svg, .stickybox-body iframe { max-width: 100%; }
.stickybox-body img, .stickybox-body canvas { height: auto; }
.stickybox-body table { max-width: 100%; }
.stickybox-body pre.mermaid { overflow: auto; }
.stickybox-body pre.mermaid svg { max-width: 100%; height: auto; }

/* ---------- moving pictures: always 16 to 9, sized for the device ---------- */
/* Its height always comes from its width. An iframe has no shape of its own: left alone it takes the 150 pixels a
   browser gives it, and a player inside it then paints black bands to fill a shape that is not 16 to 9. A recording
   whose own picture is not 16 to 9 is shown whole inside that shape, never cut: what is left over is black.
   On a tablet, a laptop, a television the picture is 95% as wide as the box is when it first opens, written in
   pixels by stickybox.js, and stays that wide when the reader widens the box - the words around it widen instead.
   The selectors carry [data-stickybox], which every box has, so they are stronger than the ones a quiz uses for
   its own players - (0,5,0) against (0,4,1) - and the rule is the same in a page and in a quiz. */
.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-screen,
.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-frame {
    display: block;
    box-sizing: border-box;
    width: var(--stickybox-screen-width);
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: 0;
    background: #000;
}
.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-screen { object-fit: contain; }
/* On a telephone - in its own view and in the desktop view of a site alike - everything in the reading, words,
   players and pictures, is as wide as the box less two pixels at each side: a telephone has no width to spare. Held
   sideways, the screen is low, so a moving picture is made narrower until its height fits the screen, and stands
   in the middle; stickybox.js writes that width. */
.stickybox-group.stickybox-phone { --stickybox-pad: 2px; }
.stickybox-group.stickybox-phone[data-stickybox] .stickybox .stickybox-body .stickybox-screen,
.stickybox-group.stickybox-phone[data-stickybox] .stickybox .stickybox-body .stickybox-frame {
    width: min(100%, var(--stickybox-screen-cap, 100%));
}
/* An embedded page that is not a player - a widget, a map, a form - is left the shape its author gave it, which
   stickybox.js writes on it, and only its width follows the box. */
.stickybox-body iframe:not(.stickybox-screen) {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}
.stickybox-body iframe:not(.stickybox-screen):not([data-stickybox-shape]) { aspect-ratio: 16 / 9; }

/* A page often wraps a player in a box of its own and gives that box the shape, by way of a padding below it, with
   the player laid over it from corner to corner. There the player has no size of its own to give, so the shape is
   written on the wrapper, by the rules above, and the player is left to fill it. stickybox.js finds such a wrapper
   and marks it. */
.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-frame { position: relative; overflow: hidden; }
.stickybox-group.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-frame > .stickybox-screen,
.stickybox-group.stickybox-group[data-stickybox] .stickybox .stickybox-body .stickybox-frame > * > .stickybox-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
}

/* ---------- the one scroll bar of the content, with "End" and the glow at its edges ---------- */
/* where the system draws its own scroll bar over the content, that one is hidden and this one shows the whole time */
.stickybox.has-rail > .stickybox-body { scrollbar-width: none; }
.stickybox.has-rail > .stickybox-body::-webkit-scrollbar { display: none; }
.stickybox-rail {
    position: absolute;
    right: 2px;
    display: none;
    width: 4px;
    border-radius: 2px;
    background: rgba(106, 85, 37, .14);
    pointer-events: none;
}
.stickybox.has-rail .stickybox-rail { display: block; }
/* on a telephone the margin of the reading is two pixels, and the rail runs in that margin, over nothing */
.stickybox-group.stickybox-phone .stickybox-rail { right: 0; width: 2px; }
.stickybox-group.stickybox-phone .stickybox-thumb { width: 2px; }
.stickybox-thumb {
    position: absolute;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--stickybox-muted);
    opacity: .55;
}
.stickybox.is-bump-start .stickybox-thumb, .stickybox.is-bump-end .stickybox-thumb { opacity: .9; }
.stickybox-glow {
    position: absolute;
    left: 1px;
    right: 1px;
    height: 1.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}
.stickybox-glow-start { background: linear-gradient(rgba(106, 85, 37, .3), rgba(106, 85, 37, 0)); }
.stickybox-glow-end { background: linear-gradient(rgba(106, 85, 37, 0), rgba(106, 85, 37, .3)); }
.stickybox.is-bump-start .stickybox-glow-start,
.stickybox.is-bump-end .stickybox-glow-end { opacity: 1; transition: opacity .08s; }
/* "End" sits on the bottom edge of the reading, in the middle, and the reading keeps room for it above */
.stickybox-end {
    position: absolute;
    left: 50%;
    bottom: calc(var(--stickybox-foot, 0px) + 3px);
    z-index: 3;
    display: none;
    margin: 0;
    padding: .05rem .6rem;
    border: 1px solid var(--stickybox-line);
    border-radius: 999px;
    background: var(--stickybox-bar);
    color: var(--stickybox-quiet);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}
.stickybox.is-end .stickybox-end { display: block; }
.stickybox.is-bump-end .stickybox-end { border-color: var(--stickybox-accent); color: var(--stickybox-accent); }

/* ---------- the line that takes the place of a player out of reach ---------- */
/* It is the bottom row of the box, so it is there both when the content has scrolled past the player and when the
   reader has shut the box: a shut box inside its own part of the page goes on playing, and this line stops and
   starts it. Room is kept at its right for the handle, which stands in the corner below it. */
.stickybox-group .stickybox-line {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: .55rem;
    min-height: 2rem;
    padding: .2rem 2.7rem .2rem .55rem;
    border-top: 1px solid var(--stickybox-line);
    background: var(--stickybox-bar);
    color: var(--stickybox-quiet);
    font-size: .82rem;
}
.stickybox.has-line .stickybox-line { display: flex; }
.stickybox-group .stickybox-line-play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stickybox-line);
    border-radius: 50%;
    background: var(--stickybox-paper);
    color: var(--stickybox-ink);
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
.stickybox-line-dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--stickybox-accent); opacity: 0; }
.stickybox-line.is-playing .stickybox-line-dot { opacity: 1; }
.stickybox-line-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- the handle that changes the size ---------- */
/* It stands in the bottom right corner of the whole box, under every other part of it. Put between two parts - above
   the line of the player, as it was - a control for the size of the box ends up over the reading it changes, and the
   player of the reading ends up below the handle. A corner control belongs in the corner. */
.stickybox-group .stickybox-resize {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 7;
    width: 2.3rem;
    height: 2.3rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 0 11px 0;
    background: none;
    cursor: nwse-resize;
    touch-action: none;
}
.stickybox-resize::before {
    content: "";
    position: absolute;
    right: .42rem;
    bottom: .42rem;
    width: 1.05rem;
    height: 1.05rem;
    background: repeating-linear-gradient(135deg, var(--stickybox-muted) 0 2px, transparent 2px 5px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: .8;
}
.stickybox-resize:hover::before { opacity: 1; }
.stickybox-resize[hidden] { display: none !important; }
/* on a telephone the width is fixed, so the handle changes the height only */
.stickybox-group.stickybox-tall > .stickybox > .stickybox-resize { cursor: ns-resize; }

/* ---------- the box held near the top of the screen ---------- */
/* This is the whole of it: the browser decides where the box is drawn, from the one line below. */
html.stickybox-ready .stickybox-group[data-stickybox] > .stickybox {
    position: sticky;
    top: var(--stickybox-top);
    z-index: 60;
    box-shadow: var(--stickybox-shadow);
}
html.stickybox-ready .stickybox-group[data-stickybox] > .stickybox > .stickybox-resize { display: block; }

/* Shut: the head stays and nothing else. The content is gone from the page, a player inside the part of the page
   the box belongs to goes on playing, and the head is a shade deeper than the open box so the reader keeps seeing
   where the reading is. The label, the player and the button stand side by side in one row of 40 px. */
.stickybox.is-shut {
    flex-direction: row;
    align-items: stretch;
    min-height: var(--stickybox-head-high);
    max-height: var(--stickybox-head-high);
}
.stickybox.is-shut > .stickybox-body { display: none; }
.stickybox.is-shut > .stickybox-resize { display: none !important; }
.stickybox.is-shut > .stickybox-bar {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: .55rem;
    padding-left: calc(.55rem + var(--stickybox-head-left, 0px));
    border-bottom: 0;
    background: var(--stickybox-head);
}
.stickybox.is-shut:not(.has-line) > .stickybox-bar { padding-right: 4rem; }
.stickybox.is-shut.has-line > .stickybox-line {
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 4rem;
    border-top: 0;
    border-left: 1px solid var(--stickybox-line);
    background: var(--stickybox-head);
}
.stickybox.is-shut > .stickybox-bar > .stickybox-toggle { top: 50%; transform: translateY(-50%); }
.stickybox.is-shut > .stickybox-rail, .stickybox.is-shut > .stickybox-glow, .stickybox.is-shut > .stickybox-end { display: none; }
/* A reading that is one recording and nothing else is only this head, for good: there is nothing in it to open or
   to size, so it has no button to open it and no handle. Its line holds Play / Pause and nothing else - no time,
   nothing to jump with: the recording is heard as it runs. */
.stickybox.is-sound.is-shut > .stickybox-bar { padding-right: .55rem; }
.stickybox.is-sound.is-shut.has-line > .stickybox-line { padding-right: .55rem; border-left: 0; }
.stickybox.is-sound .stickybox-line-dot, .stickybox.is-sound .stickybox-line-status { display: none; }
.stickybox.is-sound .stickybox-line-play {
    border-color: var(--stickybox-button-dark);
    background: var(--stickybox-button);
    color: #fff;
}

/* On a telephone the box is a fixed share of the screen: it is almost the whole screen already, so there is nothing
   to gain by pulling it sideways, and the handle changes its height alone. */
@media (max-width: 700px) {
    .stickybox-group {
        --stickybox-wide: min(95vw, calc(100% + 2 * var(--stickybox-reach)), calc(100vw - 1rem));
    }
    .stickybox-group .stickybox-bar { padding-right: 3.9rem; }
}

/* Before stickybox.js runs, and where it never runs, the box is an ordinary block: its content is all there and the
   buttons that would do nothing are not drawn. */
html:not(.stickybox-ready) .stickybox-group[data-stickybox] .stickybox-toggle,
html:not(.stickybox-ready) .stickybox-group[data-stickybox] .stickybox-resize { display: none !important; }
/* a box with nothing under it to hold above is an ordinary block: changing its size means nothing there, and its
   content has no height limit, so it needs no scroll area of its own either */
.stickybox-alone > .stickybox { position: relative; width: auto; margin-left: 0; box-shadow: none; }
.stickybox-alone > .stickybox .stickybox-resize { display: none !important; }
.stickybox-alone > .stickybox > .stickybox-body { max-height: none; overflow: visible; }

/* While an answer is being typed the box stops being held on the screen: on a telephone the keyboard takes half the
   screen, and a box held above it would stand over the very field the words are going into. */
html.stickybox-off .stickybox-group[data-stickybox] > .stickybox { position: relative; top: auto; box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
    .stickybox-toggle { transition: background-color .15s; }
}
@media print { /* a box held on the screen has no place on paper */
    html.stickybox-ready .stickybox-group[data-stickybox] > .stickybox {
        position: static !important;
        width: auto !important;
        margin-left: 0 !important;
        box-shadow: none;
    }
    .stickybox-bar, .stickybox-resize, .stickybox-rail, .stickybox-glow, .stickybox-end, .stickybox-line { display: none !important; }
    .stickybox-body { max-height: none !important; overflow: visible !important; padding-bottom: .9rem !important; }
    .stickybox-player { display: none !important; }   /* nothing plays on paper */
    .stickybox-body > :first-child:has(> .stickybox-player) { position: static; box-shadow: none; }
    .stickybox.is-shut > .stickybox-body { display: block !important; }
}