/* Colors */

:root
{

  --primary-text:                 black;
  --secondary-text:               hsl(216, 15%, 40%);
  --tertiary-text:                hsl(216, 10%, 55%);

  --body-background:              hsl(216, 25%, 88%);
  --primary-background:           white;
  --secondary-background:         hsl(216, 25%, 94%);
  --tertiary-background:          hsl(216, 40%, 88%);
  --placeholder-background:       hsl(216, 15%, 60%);

  --highlight:                    hsl(26, 100%, 85%);

  --shadow:                       rgba(0, 0, 0, 0.15);

  --control-hover-text:           hsl(216, 15%, 10%);
  --control-active-text:          hsl(216, 15%, 60%);
  --control-highlight-text:       hsl(26, 95%, 50%);
  --control-disabled-text:        hsl(216, 15%, 75%);

  --control-overlay-background:   hsla(216, 25%, 90%, 0.6);

  --button-text:                  white;
  --button-default:               hsl(216, 80%, 40%);
  --button-default-active:        hsl(216, 80%, 30%);
  --button-delete:                hsl(345, 80%, 40%);
  --button-delete-active:         hsl(345, 80%, 30%);
  --button-cancel:                hsl(216, 10%, 65%);
  --button-cancel-active:         hsl(216, 10%, 55%);

  --video-background:             black;
  --audio-background:             var(--tertiary-background);
  --audio-waveform:               hsl(216, 15%, 65%);
}
:root
{
  --control-text:                 var(--secondary-text);
  --control-hover-background:     var(--secondary-background);
  --control-active-background:    var(--body-background);
  --control-border:               var(--control-active-text);
  --control-invalid-text:         var(--button-delete);
  --control-invalid-link-active:  var(--button-delete-active);
  --control-invalid-border:       var(--button-delete);

  --control-disabled-background:  var(--secondary-background);

  --overlay-background:           hsla(216, 10%, 50%, 0.6);

  --player-control-text:          white;
  --player-control-disabled-text: hsla(216, 15%, 90%, 0.4);
  --player-control-active-text:   hsl(216, 15%, 90%);

  --player-link-text:             hsl(216, 15%, 60%);
  --player-link-hover-text:       hsl(216, 15%, 90%);
  --player-link-active-text:      hsl(216, 15%, 40%);
}

/* SVG icons */

:root
{
  --checked-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"\
    viewBox="0 -960 960 960" width="24px" height="24px">\
    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');
  --back-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"\
    viewBox="0 -960 960 960" width="24px" height="24px">\
    <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>');
  --forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"\
    viewBox="0 -960 960 960" width="24px" height="24px">\
    <path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>');
}

/* Eased gradient (cubic-bezier(0, 0, 0.25, 1) on https://larsenwork.com/easing-gradients/) */

:root
{
  --player-overlay-gradient: rgba(0, 0, 0, 0.6) 0%,
                             rgba(0, 0, 0, 0.592) 0.3%,
                             rgba(0, 0, 0, 0.571) 1.4%,
                             rgba(0, 0, 0, 0.538) 3.2%,
                             rgba(0, 0, 0, 0.495) 5.8%,
                             rgba(0, 0, 0, 0.444) 9.3%,
                             rgba(0, 0, 0, 0.389) 13.6%,
                             rgba(0, 0, 0, 0.33) 18.9%,
                             rgba(0, 0, 0, 0.27) 25.1%,
                             rgba(0, 0, 0, 0.211) 32.4%,
                             rgba(0, 0, 0, 0.156) 40.7%,
                             rgba(0, 0, 0, 0.105) 50.2%,
                             rgba(0, 0, 0, 0.062) 60.8%,
                             rgba(0, 0, 0, 0.029) 72.6%,
                             rgba(0, 0, 0, 0.008) 85.7%,
                             rgba(0, 0, 0, 0) 100%;
}

/* Include padding and border in element width and height by default */

html
{
  box-sizing: border-box;
}
*, *::before, *::after
{
  box-sizing: inherit;
}

/* Shared base styling */

body,
html,
header,
h1, h2, h3,
p,
ul,
ol,
li,
img,
form,
fieldset,
legend,
input,
textarea,
button,
turbo-frame
{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: inherit;
  border: none;
}
h1
{
  font-size: 150%;
}
h2
{
  font-size: 125%;
}
li
{
  list-style-type: none;
}
button,
input[type=text],
input[type=url],
input[type=search],
textarea,
turbo-frame,
img,
svg
{
  display: block;
}
button,
input[type=text],
input[type=url],
input[type=search],
input[type=file],
textarea
{
  color: inherit;
  background: none;
  -webkit-appearance: none;
}
button
{
  border: none;
  -webkit-tap-highlight-color: transparent;
}
button,
label
{
  cursor: pointer
}
a
{
  color: var(--control-text);
}
a:active
{
  color: var(--control-active-text);
}

/* Make body fill viewport height */

body
{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > *
{
  flex: 0 0 auto;  /* Use 1 0 auto to fill remaining height. */
}

/* Font and other rules for the body element */

body
{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.25;
  color: var(--primary-text);
  background: var(--body-background);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
pre,
code,
kbd,
samp,
div.copyable
{
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
               "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  font-size: 87.5%;
}

/* Turbo progress bar color */

.turbo-progress-bar
{
  height: 2px;
  background: var(--button-default);
}

/* Main wraps the main content on the page. This currently includes the secondary menu. */

main
{
  background: var(--primary-background);
}

/* Content is grouped in sections. Mostly there’ll be only one. */

section
{
  padding: 1rem
           max(env(safe-area-inset-right), 1rem)
           1rem
           max(env(safe-area-inset-left), 1rem);
}
section > *:last-child
{
  margin-bottom: 0 !important;
}

/* “Plain” content that needs a constrained width */

section.plain
{
  max-width: 48rem;
}
/* Actions button bar */

ul.actions
{
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0;
}
ul.actions:not(.options)
{
  gap: 0.75rem;
}
ul.actions.options,
ul.actions.secondary
{
  font-size: 75%;
}
ul.actions.options
{
  justify-content: flex-end;
}
ul.actions.secondary
{
  margin: 0.5rem 0;
}
@media (max-width: 32rem)
{
  ul.actions
  {
    align-items: stretch;
  }
  ul.actions > li
  {
    flex: 1 1 auto;
  }
}
@media (max-width: 24rem)
{
  ul.actions:not(.options) > li:not(:nth-last-of-type(-n+2))
  {
    flex: 1 1 100%;
  }
}
ul.actions a,
ul.actions button
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  color: var(--button-text);
  background: var(--button-default);
  border: 1px solid var(--button-default);
  border-radius: 0.375rem;
  font-size: 87.5%;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
ul.actions button:disabled
{
  opacity: 0.25;
}
ul.actions a[href],
ul.actions button:not(:disabled)
{
  cursor: pointer;
}
ul.actions a[href]:active,
ul.actions button:not(:disabled):active
{
  color: var(--button-text);
  background: var(--button-default-active);
  border-color: var(--button-default-active);
}
ul.actions button.delete
{
  background: var(--button-delete);
  border-color: var(--button-delete);
}
ul.actions button.delete:not(:disabled):active
{
  background: var(--button-delete-active);
  border-color: var(--button-delete-active);
}
ul.actions a.cancel,
ul.actions button.cancel
{
  background: var(--button-cancel);
  border-color: var(--button-cancel);
}
ul.actions a.cancel[href]:active,
ul.actions button.cancel:not(:disabled):active
{
  background: var(--button-cancel-active);
  border-color: var(--button-cancel-active);
}
ul.actions.options li a,
ul.actions.secondary a,
ul.actions.secondary button
{
  color: var(--control-text);
  background: var(--control-hover-background);
  border-color: var(--control-border);
}
ul.actions.options li a:not([href])
{
  color: var(--control-highlight-text);
  background: inherit;
}
@media (hover: hover)
{
  ul.actions.options li a[href]:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
    border-color: var(--control-border);
  }
}
ul.actions.options li a[href]:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
  border-color: var(--control-border);
}
ul.actions.options li:not(:first-of-type) a
{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
ul.actions.options li:not(:last-of-type) a
{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
ul.actions.secondary a,
ul.actions.secondary button
{
  padding: 0.375rem 0.625rem;
}
ul.actions.secondary a:hover:not(:active),
ul.actions.secondary button:hover:not(:active)
{
  color: var(--button-text);
  background: var(--button-default);
  border: 1px solid var(--button-default);
}
ul.actions a > span:last-of-type
{
  display: none;
}
@media (max-width: 40rem)
{
  ul.actions a > span:last-of-type
  {
    display: block;
  }
  ul.actions a > span:first-of-type
  {
    display: none;
  }
}
ul.actions a svg,
ul.actions button svg
{
  width: 1.1875rem;
  height: 1.1875rem;
  margin: -0.5rem 0.25rem -0.5rem -0.25rem;
}
/* Art */

div.art
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary-text);
  background: var(--secondary-background);
}
div.art.video:has(img)
{
  background: black;
}
div.art.preview
{
  background: transparent;
}
div.art.video,
div.art.audio,
div.art.blank
{
  aspect-ratio: 16/9;
}
div.art.artwork,
div.art.preview
{
  aspect-ratio: 1;
}
div.art.artwork:after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 2px var(--shadow);
}
div.art.preview img
{
  transform: translateZ(0);  /* Prevents drop-shadow rendering issues in Safari */
  filter: drop-shadow(0 0 1.5px var(--shadow));
}
div.art svg
{
  height: 33.33%;
}
div.art img
{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
div.art.audio img
{
  background: var(--audio-background);
  object-fit: fill;
}
div.art.audio div.waveform
{
  width: 100%;
  height: 100%;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  background: var(--audio-waveform);
  background: linear-gradient(
    var(--audio-background),
    var(--audio-waveform),
    var(--audio-background)
  );
}
div.art div.duration
{
  position: absolute;
  right: 0.37rem;
  bottom: 0.375rem;
  padding: 0.0625rem 0.375rem;
  font-size: 75%;
  color: white;
  background: black;
  border: 1px solid black;
  box-shadow: 0 0 1px white,
              0 0 0.5rem rgba(0, 0, 0, 0.25);
}
/* Circular avatar containing profile photo or initials */

a:has(div.avatar)
{
  flex: 0 0 auto;
  text-decoration: none;
}
div.avatar
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max(2rem, min(10vw, 4em));
  height: max(2rem, min(10vw, 4em));
  border-radius: 50%;
  overflow: clip;
  background-color: var(--avatar-color, transparent);
}
#masthead div.avatar
{
  width: max(4rem, min(10vw, 6em));
  height: max(4rem, min(10vw, 6em));
}
#masthead dialog div.avatar
{
  width: max(12rem, min(min(20vw, 40vh), 24rem));
  height: max(12rem, min(min(20vw, 40vh), 24rem));
}
section:has(> .background) div.overlay > div.avatar
{
  z-index: 0;
  box-shadow: 0 0 6em rgba(0, 0, 0, 0.6);
}
div.avatar:has(img)
{
  background: var(--shadow);
}
div.avatar:has(img)::after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0.5rem var(--shadow);
}
div.avatar svg
{
  width: 100%;
  height: 100%;
}
div.avatar svg text
{
  fill: white;
}
div.avatar img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wrapper for avatar with button */

div.avatar-container
{
  position: relative;
  width: fit-content;
}
dialog div.avatar-container
{
  overflow: clip;
  margin: 1.5rem;
}
div.avatar-container > button
{
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
}
div.avatar-container > button > div
{
  position: absolute;
  left: 50%;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: -1.5rem 0 0 -1rem;
  padding: 0.3125rem;
  transform: rotate(-45deg);
  color: var(--control-text);
  background: var(--control-hover-background);
  border: 1px solid var(--control-border);
  border-radius: 1rem;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
div.avatar-container > button.add > div
{
  padding: 0.1875rem;
}
@media (hover: hover)
{
  div.avatar-container > button:hover > div
  {
    color: var(--control-hover-text);
  }
}
div.avatar-container > button:active > div
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}

/* Manage avatar dialog */

#manage-avatar-dialog form:first-child
{
  width: min-content;
  margin: 0 auto;
}
#manage-avatar-dialog div.field.file
{
  margin-top: 2rem;
}
#manage-avatar-dialog div.field.file label
{
  width: 100%;
  max-width: 16rem;
  margin: 0 auto;
}
#manage-avatar-dialog div.warning
{
  max-width: 28rem;
  margin: -1rem auto;
}
/* Top banner */

div.banner
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black;
}
div.banner + div.banner
{
  margin-top: 1px;
}
body > div.banner:first-child
{
  padding-top: env(safe-area-inset-top);
}
div.banner > p
{
  margin: 0.75rem
          1rem
          0.75rem
          max(env(safe-area-inset-left), 1rem);
}
div.banner > form
{
  align-self: stretch;
}
div.banner > p,
div.banner > p > a[href],
div.banner > form > button
{
  color: white;
}
div.banner > p > a[href]:active,
div.banner > form > button:active
{
  color: var(--control-active-text);
}
div.banner > form > button
{
  height: 100%;
}
div.banner > form > button svg
{
  width: 1.5rem;
  height: 100%;
  margin: 0
          max(env(safe-area-inset-right), 0.75rem)
          0
          0.75rem;
}
/* Channels overview */

#channels
{
  margin: 1rem 0 1.5rem 0;
}

#channels-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
}

/* Channel header */

#channel header div.art
{
  float: left;
  width: 4.625rem;
  margin: 0 1rem 0.5rem 0;
}
#channel header div.formatted.body
{
  clear: both;
}
#channel header > div
{
  display: flex;
  align-items: flex-start;
}
#channel header > div > div
{
  flex: 1;
}
#channel header > div > div.art
{
  flex: 0 0 min(max(10vw, 4.625rem), 12rem);
}
@media (max-width: 48rem)
{
  #channel header > div
  {
    display: block;
  }
}
/* List of choices, used for text tracks export format selection */

h1 + ul.choices
{
  margin-top: 1rem;
}
ul.choices
{
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0.375rem 0;
}
ul.choices a
{
  display: block;
  padding: 0.625rem 0.875rem;
  color: var(--control-text);
  background: var(--control-hover-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
ul.choices a:active
{
  background: var(--control-active-background);
}
ul.choices a h2
{
  font-size: 100%;
  color: var(--primary-text);
}
ul.choices a p
{
  color: var(--control-text);
  font-size: 87.5%;
}
ul.choices a h2 + p
{
  margin-top: 0.125rem;
}
/* Collections overview */

#collections
{
  margin: 1rem 0 1.5rem 0;
}

#collections-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
}

/* Collection items listing */

#collection-items-items
{
  margin: 1rem
          calc(-1 * max(env(safe-area-inset-right), 1rem))
          1rem
          calc(-1 * max(env(safe-area-inset-left), 1rem));
}
#collection-items-items > div
{
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  border-top: 1px solid var(--body-background);
  border-bottom: 1px solid var(--body-background);
  background: var(--primary-background);
}
#collection-items-items > div > div:first-child
{
  flex: 1 1 auto;
}
#collection-items-items > div.ghosted *
{
  visibility: hidden;
}
#collection-items-items > div.ghost
{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.8;
  pointer-events: none;
}
#collection-items-items > div + div
{
  margin-top: -1px;
}
#collection-items-items > div > div.menu
{
  margin: -0.5rem -0.5rem -0.5rem 0;
}
#collection-items-items > div > button.handle
{
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: -0.75rem;
  padding: 0 0.75rem;
  touch-action: none;
}
#collection-items.edit div.menu,
#collection-items:not(.edit) button.handle
{
  display: none;
}
#collection-items-items p.details + div.warning
{
  margin-top: 0.375rem;
}
#collection-items-items div.formatted
{
  margin: 0.5rem 0 0 0;
}

/* Collection item note dialog */

#collection-items-items dialog form
{
  max-width: 53.5rem;  /* Make max text width in trix editor match max width of formatted note */
}
/* Comments on video page */

#comments
{
  max-width: 52.5rem;
  margin: 1rem 0 0 0;
}
#comments > ul > li
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0;
}
#comments > ul > li > div
{
  flex: 1;
}
#comments > ul > li > form.delete
{
  margin: -0.5rem -0.5rem 0 -1rem;
}
#comments > ul > li h3 + div.formatted
{
  margin-top: 0.25rem;
}
/* Copyable text */

div.copyable
{
  display: flex;
  margin: 0.75rem 0;
  border-radius: 0.125rem;
  background: var(--secondary-background);
}
div.copyable p
{
  align-self: center;
  margin: 0;
  padding: 0.375rem 0 0.375rem 0.875rem;
  color: var(--secondary-text);
  word-break: break-all;
}
dialog.embed div.copyable p
{
  max-width: 36rem;
}
div.copyable button
{
  margin: 0 0 0 auto;
}
div.copyable button:disabled svg.copy,
div.copyable button:not(:disabled) svg.done
{
  display: none;
}
div.copyable button:disabled svg.done
{
  color: var(--control-highlight-text);
  animation: 0.6s ease-in 1.8s 1 fade-copy-done both;
}
@keyframes fade-copy-done
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}
/* Item details */

.details
{
  margin: 0.125rem 0;
  font-size: 87.5%;
}
.details:first-child
{
  margin-top: 0;
}
.details:last-child
{
  margin-bottom: 0;
}
.details,
.details a
{
  color: var(--tertiary-text);
}
.details span
{
  white-space: nowrap;
}
span.badge,
.details span.explicit
{
  display: inline-block;
  vertical-align: bottom;
  font-size: 75%;
  line-height: 1;
}
span.badge
{
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.25rem;
  background: var(--tertiary-text);
  color: var(--primary-background);
}
.details span.explicit
{
  position: relative;
  padding: 0.125rem 0.1875rem;
  border: 1px solid currentcolor;
  border-radius: 0.125rem;
}
.details span.explicit::before
{
  content: 'E';
}
.details span.explicit > span
{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1; /* Hide behind badge, but keep it available for copy-paste selection */
  color: transparent;
}
span.badge + span,
.details span.explicit + span
{
  margin-left: 0.1875rem;
}
@media (hover: hover)
{
  .details a:hover
  {
    color: var(--primary-text);
  }
}
.details a:active
{
  color: var(--secondary-text);
}
header .details
{
  margin: 0.5rem 0;
}
header .details + .details
{
  margin-top: -0.25rem;
}
/* Modal dialog */

dialog
{
  position: fixed;
  padding: 0;
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  box-shadow: 0 0 1rem var(--shadow);
  font-size: 1rem;
  text-shadow: none;
}
dialog div.dialog-container
{
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
  max-height: calc(100svh - 4rem);
}
dialog div.dialog-container > div.body
{
  flex: 0 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.75rem;
  padding: 1rem 1.25rem;
}
dialog div.dialog-container > ul.actions
{
  flex: 0 0 auto;
  flex-direction: row-reverse;
  margin: 0;
  padding: 1.25rem 1.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--body-background);
}
dialog div.body > h1
{
  font-size: 125%;
  color: var(--secondary-text);
  overflow-wrap: anywhere;
}
dialog div.body > h2
{
  margin: 1rem 0 0.375rem;
  color: var(--secondary-text);
  font-weight: bold;
  font-size: 100%;
}
dialog div.body > p
{
  max-width: 36rem;
}
dialog div.body > h1,
dialog div.body > p
{
  margin: 0.75rem 0;
}
dialog div.body > *:first-child
{
  margin-top: 0;
}
dialog div.body > *:last-child
{
  margin-bottom: 0;
}
dialog div.body > p
{
  color: var(--primary-text);
  overflow-wrap: anywhere;
}
dialog div.field input[type=text],
dialog div.field input[type=url]
{
  width: min(calc(100vw - 7.5rem), 36rem);
}
dialog::backdrop
{
  background-color: rgba(0, 0, 0, 0.25);
}
/* Documents on channel or video page */

#documents
{
  margin: 1rem 0 0 0;
}
#documents > ul
{
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}
#documents > ul > li
{
  display: flex;
}
#documents > ul > li:target
{
  outline: 0.25rem solid var(--highlight);
  outline-offset: 0.25rem;
}
#documents > ul > li > div.menu
{
  margin: -0.25rem -0.5rem 0 auto;
}
#documents > ul > li > a
{
  color: var(--primary-text);
  text-decoration: none;
}
#documents > ul > li > a h2
{
  font-size: 100%;
  overflow-wrap: anywhere;
}
@media (hover: hover)
{
  #documents > ul > li > a:hover h2
  {
    text-decoration: underline;
  }
}
/* History events */

table.events
{
  margin: 1rem 0;
  border-collapse: collapse;
}
table.events thead th
{
  color: var(--secondary-text);
  font-weight: normal;
}
table.events tbody
{
  border-top: 1px solid var(--body-background);
  border-bottom: 1px solid var(--body-background);
}
table.events th,
table.events td
{
  padding: 0.25rem 0.375rem;
  text-align: left;
  vertical-align: top;
}
table.events tr:first-child td
{
  padding-top: 0.5rem;
}
table.events tr:last-child td
{
  padding-bottom: 0.5rem;
}
table.events th:first-child,
table.events td:first-child
{
  padding-left: 0;
}
table.events th:last-child,
table.events td:last-child
{
  padding-right: 0;
}
table.events td a:not(:hover):not(:active)
{
  color: var(--primary-text);
  text-decoration: none;
}
table.events td a:hover
{
  text-decoration: underline;
}
table.events tbody tr + tr td.created_at,
table.events tbody tr + tr td.video,
table.events tbody tr + tr td.profile
{
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
table.events tbody tr + tr td:has(a:hover)
{
  opacity: 1;
  transition: opacity 0.1s ease-in;
}

table.events .created_at,
table.events .video,
table.events .profile,
table.events .video a,
table.events .profile a
{
  white-space: nowrap;
}
table.events .video,
table.events .profile,
table.events .video a,
table.events .profile a
{
  text-overflow: ellipsis;
  overflow: hidden;
}
table.events .video,
table.events .profile
{
  max-width: 12rem;
}
table.events .profile
{
  text-align: right;
}

table.events tr:target
{
 outline: 0.25rem solid var(--highlight);
 outline-offset: 0.25rem;
}
/* Page footer */

footer
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
  font-size: 87.5%;
}
footer ul
{
  display: flex;
}
footer li a
{
  display: block;
  padding: 0.5rem 0.375rem;
}
footer li:first-child a
{
  padding-left: 1rem;
}
footer li:last-child a
{
  padding-right: 1rem;
}
@media (max-width: 32rem)
{
  footer ul
  {
    flex-direction: column;
  }
  footer li a
  {
    padding: 0.0625rem 1rem;
  }
  footer li:first-child a
  {
    padding-top: 0.5rem;
  }
  footer li:last-child a
  {
    padding-bottom: 0.5rem;
  }
}
footer p
{
  padding: 0.5rem 1rem;
}
footer,
footer a[href]
{
  color: var(--control-text);
  text-decoration: none;
}
@media (hover: hover)
{
  footer a[href]:hover
  {
    color: var(--control-hover-text);
    text-decoration: underline;
  }
}
footer a[href]:active
{
  color: var(--control-active-text);
  text-decoration: underline;
}
/* Formatted content */

.formatted
{
  overflow-wrap: anywhere;
}
.formatted.body
{
  margin: 0.5rem 0;
  max-width: 52.5rem;
}

.formatted p,
.formatted h1,
.formatted h2,
.formatted h3,
.formatted ul,
.formatted ol,
.formatted pre,
.formatted blockquote
{
  margin: 1rem 0;
}
.formatted > *:first-child
{
  margin-top: 0;
}
.formatted > *:last-child
{
  margin-bottom: 0;
}
.formatted pre:first-child,
.formatted blockquote:first-child
{
  margin-top: 0.5rem;
}
.formatted pre:last-child,
.formatted blockquote:last-child
{
  margin-bottom: 0.5rem;
}

.formatted.trix-content h1,
.formatted h2,
.formatted h3
{
  font-size: 100%;
  font-weight: bold;
}
.formatted ul,
.formatted ol
{
  padding: 0 0 0 2.5rem;
}
.formatted ul li
{
  list-style-type: disc;
}
.formatted ol li
{
  list-style-type: decimal;
}
.formatted pre
{
  padding: 0.25rem 0.5rem;
  font-size: 87.5%;
  white-space: pre-wrap;
  border-radius: 0.125rem;
  color: var(--secondary-text);
  background: var(--secondary-background);
}
.formatted blockquote
{
  margin-left: 1.375rem;
  padding-left: 0.75rem;
  border-left: 0.375rem solid var(--tertiary-background);
  color: var(--secondary-text);
}
/* Forms */

form .hidden
{
  display: none !important;
}

/* Fieldsets group related form fields in separate sections */

fieldset
{
  margin: 0.25rem 0;
}
fieldset:first-child
{
  margin-top: 0;
}
fieldset:last-child
{
  margin-bottom: 0;
}
fieldset p.label
{
  margin: 0.375rem 0;
}
fieldset.invalid p.label
{
  color: var(--control-invalid-text);
}

/* Form fields */

div.field
{
  margin: 0.375rem 0;
}
div.field.inline
{
  display: flex;
  gap: 1rem;
}
div.field label
{
  display: block;
  width: fit-content;
  color: var(--secondary-text);
}
div.field label:has(+ input[type=text]),
div.field label:has(+ input[type=email]),
div.field label:has(+ input[type=url]),
div.field label:has(+ input[type=search]),
div.field label:has(+ textarea),
div.field label:has(+ trix-toolbar)
{
  margin: 0 0 0.25rem 0;
  font-size: 87.5%;
}
div.field.invalid label:has(+ input[type=text]),
div.field.invalid label:has(+ input[type=email]),
div.field.invalid label:has(+ input[type=url]),
div.field.invalid label:has(+ input[type=search]),
div.field.invalid label:has(+ textarea),
div.field.invalid label:has(+ trix-toolbar)
{
  color: var(--control-invalid-text);
}
div.field label.checkbox,
div.field label.radio
{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--primary-text);
}
div.field.inline label.checkbox:not(:has(input:checked)),
div.field.inline label.radio:not(:has(input:checked))
{
  color: var(--secondary-text);
}
div.field label.checkbox p:not(:first-child),
div.field label.radio p:not(:first-child)
{
  color: var(--tertiary-text);
}
div.field label.checkbox > div,
div.field label.radio > div
{
  min-height: 1.25em;  /* Matches line height. */
}
div.field label.checkbox > div:first-child,
div.field label.radio > div:first-child
{
  display: flex;
  align-items: center;
}
div.field label.checkbox > div:first-child > input,
div.field label.radio > div:first-child > input
{
  display: block;
}
div.field select
{
  margin: 0.25rem 0;
}
div.field input[type=text],
div.field input[type=email],
div.field input[type=url],
div.field input[type=search],
textarea,
div.field trix-editor
{
  border: 1px solid var(--control-border);
}
div.field.invalid input[type=text],
div.field.invalid input[type=email],
div.field.invalid input[type=url],
div.field.invalid input[type=search],
div.field.invalid textarea,
div.field.invalid trix-editor
{
  border-color: var(--control-invalid-text);
}
div.field input[type=text],
div.field input[type=email],
div.field input[type=url],
div.field textarea,
div.field trix-editor
{
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
}
div.field input[type=search]
{
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: 1rem;
}
div.field label:has(+ input[type=text]:disabled),
div.field label:has(+ input[type=email]:disabled),
div.field label:has(+ input[type=url]:disabled),
div.field label:has(+ input[type=search]:disabled),
div.field label:has(+ textarea:disabled),
div.field label.checkbox:has(input:disabled) *,
div.field label.radio:has(input:disabled) *
{
  color: var(--control-disabled-text);
}
div.field input[type=text]:disabled,
div.field input[type=email]:disabled,
div.field input[type=url]:disabled,
div.field input[type=search]:disabled,
div.field textarea:disabled
{
  background: var(--control-disabled-background);
}

/* Plain section styling */

.plain div.field input[type=text],
.plain div.field input[type=email],
.plain div.field input[type=url],
.plain div.field input[type=search]
{
  width: 100%;
}

/* File upload form field */

div.field.file
{
  position: relative;
}
div.field.file label
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0 1rem;
  color: var(--control-text);
  background: var(--control-hover-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  font-size: 87.5%;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover)
{
  div.field.file label:hover
  {
    color: var(--control-hover-text);
  }
}
div.field.file label:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
  border-color: var(--control-border);
}
div.field.file label > div
{
  padding: 0.5rem 0;
}
div.field.file input[type=file]
{
  position: absolute;
  inset: 0;
  visibility: hidden;
}
div.field.file label svg.circular-progress
{
  width: 1.25rem;
  height: 1.25rem;
}

/* Textarea and Trix rich text editor */

div.field textarea,
div.field trix-editor
{
  width: 100%;
  min-height: 10rem;
}
div.field textarea.small,
div.field trix-editor.small
{
  min-height: 5rem;
}
div.field ::placeholder,
div.field trix-editor:empty:not(:focus)::before
{
  color: var(--tertiary-text);
}

trix-toolbar
{
  position: sticky;
  top: 0;
  margin: 0 -1rem;
  padding: 0;
}
dialog trix-toolbar
{
  position: static;
}
div.field:not(.below_top) trix-toolbar
{
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
div.field:not(.below_top) trix-toolbar::before
{
  z-index: 1;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--primary-background);
  opacity: 0.75;
}
trix-toolbar div.buttons
{
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  overflow-y: auto;
}
trix-toolbar div.buttons > div
{
  display: flex;
}
@media (max-width: 32rem)
{
  trix-toolbar div.buttons button
  {
    padding: 0.25rem;
  }
}
trix-toolbar div.buttons button.icon.trix-active
{
  color: var(--control-highlight-text);
}
trix-toolbar div.dialogs
{
  visibility: hidden;
}
trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid
{
  border-color: var(--control-invalid-border);
  background: inherit;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection
{
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection
{
  background: none;
}
/* Headers */

div.headers h1,
div.headers h2
{
  overflow-wrap: anywhere;
}
div.headers h1 a
{
  color: var(--control-highlight-text);
}
div.headers h1 a:active
{
  opacity: 0.8;
}
div.headers h2
{
  color: var(--secondary-text);
}
div.headers h2 a
{
  color: var(--control-text);
  text-decoration: none;
}
@media (hover: hover)
{
  div.headers h2 a:hover
  {
    text-decoration: underline;
  }
}
div.headers h2 a:active
{
  color: var(--control-active-text);
}
div.headers h2 a.back
{
  position: relative;
  display: inline-block;
  padding-left: 1.25rem;
}
div.headers h2 a.back:before
{
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: 1.5rem;
  height: 100%;
  background: var(--control-text);
  -webkit-mask: var(--back-icon) no-repeat 50% 50%;
  mask: var(--back-icon) no-repeat 50% 50%;
}
div.headers h2 a.back:active:before
{
  background: var(--control-active-text);
}
/* Icon button */

button.icon
{
  padding: 0.5rem;
  color: var(--control-text);
}
button.icon:disabled
{
  color: var(--control-disabled-text);
  cursor: default;
}
@media (hover: hover)
{
  button.icon:not(:disabled):hover
  {
    color: var(--control-hover-text);
  }
}
button.icon:not(:disabled):active
{
  color: var(--control-active-text);
}
button.icon svg
{
  width: 1.5rem;
  height: 1.5rem;
}

/* Wrapper for title with top-right icon button */

div.title-with-button
{
  display: flex;
  align-items: flex-start;
  overflow-wrap: anywhere;
}
div.title-with-button div.button
{
  flex: 0;
  margin: -0.25rem -0.5rem -0.5rem auto;
}
/* Impersonation controls for admins */

#impersonate
{
  z-index: 9;
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: var(--control-overlay-background);
  border: 1px solid var(--control-border);
  color: var(--primary-text);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}
#impersonate form
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
}
#impersonate span,
#impersonate button
{
  font-size: 75%;
  line-height: 1;
}
#impersonate span
{
  display: block;
  padding: 0.375rem 0.375rem 0.375rem 0.625rem;
}
#impersonate button
{
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--button-default);
  color: var(--button-text);
  white-space: nowrap;
}
#impersonate button:active
{
  background: var(--button-default-active);
}
@media (max-width: 24rem)
{
  #impersonate form
  {
    flex-direction: column;
  }
  #impersonate span
  {
    padding: 0.125rem;
  }
  #impersonate button
  {
    width: 100%;
  }
}
/* Pending channel collaborator invitations */

#invitations
{
  padding: 0;
}
nav.secondary + #invitations
{
  margin-top: -1px;
}
#invitations > div
{
  display: flex;
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  color: var(--secondary-text);
  background: var(--tertiary-background);
}
#invitations > div.accept_all
{
  background: var(--secondary-background);
}
nav.primary + #invitations > div,
#invitations > div + div
{
  margin-top: 1px;
}
#invitations p
{
  flex: 1;
  margin: 0;
}
#invitations > div > ul.actions
{
  flex-direction: row-reverse;
  margin: 0 0 0 1rem;
}
@media (max-width: 48rem)
{
  #invitations > div
  {
    display: block;
  }
  #invitations > div > ul.actions
  {
    flex-direction: row;
    margin: 0.75rem 0 0 0;
  }
}
/* Shared styling for channels, videos, collection items, results, and trash entries overviews */

.items > div,
.items > div > *
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.items > div
{
  justify-content: space-between;
}
.items > div > a,
#collection-items-items > div > div > div > a
{
  color: var(--primary-text);
  text-decoration: none;
}
.items div.art
{
  flex: 0 0 auto;
  width: min(max(10vw, 3rem), 9rem);
}
.items h2
{
  overflow-wrap: anywhere;
}
.items h2.missing
{
  font-weight: bold;
}
#videos-items.items h2,
.items p.description
{
  margin: 0.5rem 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 100%;
}
@media (hover: hover)
{
  .items a[href]:hover h2
  {
    text-decoration: underline;
  }
}
/* License icons, used in the player and on the home masthead video */

div.license
{
  margin: 0 0 0 auto;
  padding: 0.375rem 0.5rem;
  pointer-events: auto;
}
div.license a
{
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
}
div.license svg
{
  width: 1.25rem;
  height: 1.25rem;
}
@media (max-width: 48rem)
{
  div.license svg
  {
    width: 0.875rem;
    height: 0.875rem;
  }
}
div.license circle
{
  fill: var(--overlay-background) !important;
}
div.license path
{
  fill: var(--player-control-text);
}
/* Infinite scroll pagination link and loading animation */

a.load-more
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 0.5rem 0;
  color: var(--control-text);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  text-align: center;
  text-decoration: none;
  cursor: default;
}
a[href].load-more
{
  border-color: var(--control-border);
  cursor: pointer;
}
a.load-more div
{
  padding: 0.5rem 1rem;
}
a.load-more svg
{
  width: 2.5rem;
  height: 2.5rem;
}
a:not([href]).load-more div,
a[href].load-more svg
{
  display: none;
}
@media (hover: hover)
{
  a[href].load-more:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
}
a[href].load-more:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}
/* Masthead */

#masthead
{
  position: relative;
  padding: 0;
  overflow: clip;
  background-color: var(--placeholder-background);
  font-size: max(100%, min(min(3vw, 3vh), 200%));  /* Bigger heading and avatar on large viewport */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#masthead > .background
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
#masthead:has(> .background) div.gradient-top,
#masthead:has(> .background) div.gradient-bottom
{
  position: absolute;
  left: 0;
  right: 0;
  height: min(8em, 50%);
}
#masthead:has(> .background) div.gradient-top
{
  top: 0;
  background: linear-gradient(var(--player-overlay-gradient));
}
#masthead:has(> .background) div.gradient-bottom
{
  bottom: 0;
  background: linear-gradient(to top, var(--player-overlay-gradient));
}
#masthead div.overlay
{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(min(35vw, 35vh), 12rem);
  padding: 1.5rem
           max(env(safe-area-inset-right), 2rem)
           1.5rem
           max(env(safe-area-inset-left), 2rem);
  color: white;
}
#masthead.home div.overlay
{
  min-height: max(min(50vw, 50vh), 12rem);
}
@media (max-width: 48rem)
{
  #masthead div.overlay
  {
    padding: 1rem
             max(env(safe-area-inset-right), 1rem)
             1rem
             max(env(safe-area-inset-left), 1rem);
  }
}
#masthead:has(> .background) div.overlay
{
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5),
               0 0 0.5rem rgba(0, 0, 0, 0.25);
}
#masthead.home div.overlay
{
  justify-content: space-between;
}
#masthead.home div.overlay > div
{
  display: flex;
  justify-content: space-between;
}
#masthead div.overlay > *
{
  z-index: 1;
}
#masthead div.headers:not(:first-child)
{
  margin-top: 0.5em;
}
#masthead div.headers *
{
  line-height: 1;
  color: white;
}
#masthead div.headers h2
{
  font-size: 100%;
}
#masthead div.license
{
  margin: -0.5rem -0.75rem 0 0;
}
#masthead ul.benefits
{
  flex: 1 0 auto;
  position: relative;
}
#masthead ul.benefits li
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 26em;  /* Results in nice breaks across two lines for all benefits in both languages */
  line-height: 1.1;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
#masthead ul.benefits li.current
{
  opacity: 1;
}
#masthead div.controls
{
  margin: 0 -0.75rem -0.5rem 0;
}
#masthead div.controls
{
  color: white;
}
@media (hover: hover)
{
  #masthead:hover div.controls
  {
    transition: opacity 0.15s ease-in;
  }
  #masthead:not(.paused):not(:hover) div.controls
  {
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }
}
#masthead div.overlay p
{
  font-size: 1rem;  /* Don’t scale additional text such as the profile email address */
}
#masthead div.overlay p:not(:first-child)
{
  margin-top: 0.25rem;
}
#masthead div.overlay p a
{
  color: white;
  text-decoration: none;
}
@media (hover: hover)
{
  #masthead div.overlay p a[href]:hover
  {
    text-decoration: underline;
  }
}
/* List of menu items */

ul.menu-items
{
  margin: 0.75rem
          calc(-1 * max(env(safe-area-inset-right), 1rem))
          0.75rem
          calc(-1 * max(env(safe-area-inset-left), 1rem));
}
dialog ul.menu-items
{
  margin: 1.5rem -1.25rem;
}
dialog ul.menu-items.last
{
  margin-bottom: 0;
}
h2 + ul.menu-items
{
  margin-top: 0.25rem;
}

ul.menu-items > li + li.separate
{
  border-top: 1px solid var(--control-border);
}
ul.menu-items > li > a,
ul.menu-items > li > button,
ul.menu-items > li > form > button,
ul.menu-items > li > label
{
  display: block;
  width: 100%;
  padding: 0.9375rem 1.25rem 0.875rem 1.25rem;
  font-size: 87.5%;
  color: var(--control-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.menu-items > li > a:not([href]),
ul.menu-items > li > button:disabled,
ul.menu-items > li > form > button:disabled
{
  color: var(--control-disabled-text);
  cursor: default;
}
ul.menu-items > li > a:has(div)
{
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
ul.menu-items > li > a:has(div) > div:first-child
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.menu-items > li > a svg,
ul.menu-items > li > button svg,
ul.menu-items > li > form > button svg
{
  display: inline-block;
  vertical-align: bottom;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.5rem 0.25rem -0.25rem -0.25rem;
}
ul.menu-items > li > label,
ul.menu-items:has(a.current) > li > a
{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
ul.menu-items > li > label > input[type=radio],
ul.menu-items:has(a.current) > li > a:before
{
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 0 -0.5rem;
}
ul.menu-items > li > label > input[type=radio]
{
  -webkit-appearance: none;
  appearance: none;
}
ul.menu-items:has(a.current) > li > a:before
{
  content: '';
}
ul.menu-items > li > label > input[type=radio]:checked,
ul.menu-items:has(a.current) > li > a.current:before
{
  background: var(--control-text);
  -webkit-mask: var(--checked-icon) no-repeat 50% 50%;
  mask: var(--checked-icon) no-repeat 50% 50%;
}
ul.menu-items > li > label > input[type=radio]:focus,
ul.menu-items > li > label > input[type=radio]:active
{
  outline: none;
}
@media (hover: hover)
{
  ul.menu-items:not(:focus-within) > li > a[href]:hover,
  ul.menu-items:not(:focus-within) > li > button:not(:disabled):hover,
  ul.menu-items:not(:focus-within) > li > form > button:not(:disabled):hover,
  ul.menu-items:not(:focus-within) > li > label:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
  ul.menu-items:not(:focus-within) > li > label:hover > input[type=radio]:checked,
  ul.menu-items:has(a.current) > li > a.current:hover:before
  {
    background: var(--control-hover-text);
  }
}
ul.menu-items > li > a:focus,
ul.menu-items > li > button:focus,
ul.menu-items > li > form > button:focus,
ul.menu-items > li > label:has(input:focus)
{
  color: var(--control-hover-text);
  background: var(--control-hover-background);
  outline: none;
}
ul.menu-items > li > label:hover > input[type=radio]:checked,
ul.menu-items:has(a.current) > li > a.current:hover:before
{
  background: var(--control-hover-text);
}
ul.menu-items > li > a[href]:active,
ul.menu-items > li > button:not(:disabled):active,
ul.menu-items > li > form > button:not(:disabled):active,
ul.menu-items > li > label:active
{
  color: var(--control-active-text) !important;
  background: var(--control-active-background) !important;
}
ul.menu-items > li > label:active > input[type=radio]:checked,
ul.menu-items:has(a.current) > li > a.current:active:before
{
  background: var(--control-active-text) !important;
}

ul.menu-items > li:has(form.delete)
{
  position: relative;
}
ul.menu-items > li:has(form.delete) a
{
  padding-right: 3rem;
}
ul.menu-items > li:has(form.delete) form.delete
{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.menu-items > li:has(form.delete) form.delete button.icon
{
  padding: 0 0.75rem;
}

/* Wrapper for title with top-right dropdown menu in page header */

div.title-with-menu
{
  display: flex;
  align-items: flex-start;
  overflow-wrap: anywhere;
}
div.title-with-menu div.menu
{
  flex: 0;
  margin: -0.25rem -0.5rem -0.5rem auto;
}

/* Dropdown menu */

div.menu
{
  position: relative;
}
div.menu-anchor
{
  position: absolute;
  inset: 0.625rem;
  pointer-events: none;
}
div.menu-container
{
  z-index: 9;
  position: absolute;
}
div.menu.open div.menu-container
{
  --max-width: calc(var(--container-width) - 1rem);  /* Defined inline. */
  --max-height: calc(var(--container-height) - 1rem);  /* Defined inline. */
  width: var(--max-width);
  height: var(--max-height);
}
div.menu-anchor:not(.right) div.menu-container
{
  right: 100%;
}
div.menu-anchor.right div.menu-container
{
  left: 100%;
}
div.menu-anchor:not(.bottom) div.menu-container
{
  bottom: 100%;
}
div.menu-anchor.bottom div.menu-container
{
  top: 100%;
}
div.menu-wrapper
{
  z-index: 1;
  position: absolute;
  max-width: var(--max-width);
  max-height: var(--max-height);
  margin: 0;
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  box-shadow: 0 0 1rem var(--shadow);
  overflow: clip;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
  pointer-events: auto;
}
div.menu-wrapper > ul.menu-items
{
  max-width: calc(var(--max-width) - 2px);
  max-height: calc(var(--max-height) - 2px);
  margin: 0;
  overflow: auto;
}
/* Workaround for a Safari issue. See menu_controller.js for details. */
div.menu.appearing div.menu-wrapper > ul.menu-items
{
  overflow: hidden;
}
div.menu-anchor:not(.right) div.menu-wrapper
{
  right: 0;
}
div.menu-anchor.right div.menu-wrapper
{
  left: 0;
}
div.menu-anchor:not(.bottom) div.menu-wrapper
{
  bottom: 0;
}
div.menu-anchor.bottom div.menu-wrapper
{
  top: 0;
}
div.menu-anchor:not(.right):not(.bottom) div.menu-wrapper
{
  transform-origin: right bottom;
}
div.menu-anchor:not(.right).bottom div.menu-wrapper
{
  transform-origin: right top;
}
div.menu-anchor.right:not(.bottom) div.menu-wrapper
{
  transform-origin: left bottom;
}
div.menu-anchor.right.bottom div.menu-wrapper
{
  transform-origin: left top;
}
div.menu:not(.open) div.menu-wrapper
{
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1);
  visibility: hidden;
  transition: none;
}
/* Full-height message for error pages */

#message
{
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#message > div
{
  max-width: 42rem;
  padding: 1rem 0 3rem 0;
}
#message svg
{
  height: 3.5rem;
  margin: 0 auto;
  fill: var(--secondary-text);
}
#message svg + h1,
#message h1 + p,
#message p + p
{
  margin-top: 1rem;
}
#message p
{
  color: var(--secondary-text);
}
/* Primary navigation */

nav.primary
{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body > nav.primary:first-child
{
  padding-top: env(safe-area-inset-top);
}
nav.primary > ul
{
  display: flex;
}
nav.primary > ul > li
{
  display: flex;
  align-items: stretch;
  position: relative;
}
nav.primary > ul > li:first-child
{
  flex: 1 1 auto;
  min-width: 4rem;
  overflow: hidden;
}
nav.primary > ul > li:not(:first-child)
{
  flex: 0 0 auto;
}
nav.primary a,
nav.primary button
{
  color: var(--control-text);
}
nav.primary a
{
  display: inline-flex;
  max-width: 100%;
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
}
nav.primary div.menu
{
  display: flex;
  align-items: stretch;
}
nav.primary button
{
  padding: 0 0.75rem;
}
nav.primary li:first-child a
{
  padding-left: max(env(safe-area-inset-left), 1rem);
}
nav.primary li:last-child a
{
  padding-right: max(env(safe-area-inset-right), 1rem);
}
@media (max-width: 48rem)
{
  nav.primary li:not(:first-child) a
  {
    padding-left: 0.75rem;
  }
  nav.primary li:not(:first-child):not(:last-child) a
  {
    padding-right: 0.75rem;
  }
}
nav.primary label input:checked + span
{
  color: var(--control-highlight-text);
}
@media (hover: hover)
{
  nav.primary a:hover,
  nav.primary label:hover,
  nav.primary button:hover
  {
    color: var(--control-hover-text);
  }
}
nav.primary a:active,
nav.primary label:active,
nav.primary button:active
{
  color: var(--control-active-text);
}
nav.primary svg
{
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}
nav.primary span
{
  display: block;
  min-height: 1.5rem;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav.primary svg + span
{
  margin: 0 0 0 0.75rem;
}
@media (max-width: 48rem)
{
  nav.primary svg + span
  {
    display: none;
  }
}

/* Secondary navigation */

nav.secondary
{
  display: flex;
  align-items: flex-start;
  background: var(--primary-background);
  border-bottom: 1px solid var(--body-background);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
nav.secondary > div
{
  flex: 1 1 auto;
}
nav.secondary li a,
nav.secondary li button
{
  display: block;
  padding: 0.5rem 1rem;
  min-height: 1.5rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}
nav.secondary a,
nav.secondary button
{
  color: var(--control-text);
}
nav.secondary > button
{
  display: none;
}
nav.secondary > div,
nav.secondary ul,
nav.secondary li
{
  display: flex;
}
nav.secondary ul + ul
{
  border-left: 1px solid var(--body-background);
}
nav.secondary li.current a,
nav.secondary li.current button
{
  color: var(--control-highlight-text);
}
@media (max-width: 48rem)
{
  nav.secondary > button
  {
    display: block;
    padding: 0.5rem 0.75rem;
  }
  nav.secondary > div,
  nav.secondary ul,
  nav.secondary li
  {
    display: block;
  }
  nav.secondary > div
  {
    overflow: hidden;
  }
  nav.secondary ul + ul
  {
    border-left: none;
  }
  nav.secondary.expanded ul + ul
  {
    border-top: 1px solid var(--body-background);
  }
  nav.secondary:not(.expanded) li:not(.current)
  {
    display: none;
  }
  nav.secondary li a,
  nav.secondary li button
  {
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav.secondary li.current a,
  nav.secondary li.current button
  {
    color: var(--control-text);
    pointer-events: none;
  }
  nav.secondary.expanded li.current a,
  nav.secondary.expanded li.current button
  {
    color: var(--control-highlight-text);
  }
}
@media (hover: hover)
{
  nav.secondary li a:hover,
  nav.secondary button:hover
  {
    color: var(--control-hover-text);
  }
}
nav.secondary li a:active,
nav.secondary button:active
{
  color: var(--control-active-text);
}
nav.secondary svg
{
  width: 1.5rem;
  height: 1.5rem;
}
/* Flash notice */

section.notice
{
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  color: var(--secondary-text);
  background: var(--tertiary-background);
}
section.notice:first-child
{
 margin-top: 1px;
}
nav.secondary + section.notice
{
  margin-top: -1px;
}
/* Notifications */

#notifications
{
  z-index: 2;
  position: fixed;
  inset: auto
         max(env(safe-area-inset-right), 0.75rem)
         max(env(safe-area-inset-bottom), 0.75rem)
         max(env(safe-area-inset-left), 0.75rem);
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
#notifications li
{
  flex: 1 0 auto;
  max-width: 100%;
  border-radius: 0.375rem;
  background: var(--control-overlay-background);
  border: 1px solid var(--control-border);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  transform-origin: bottom center;
  animation: notification-appear .1s ease-out;
  pointer-events: auto;
}
@keyframes notification-appear {
  from
  {
    transform: scale(0.5);
    opacity: 0;
  }
}
#notifications li.disappear,
#notifications li.open
{
  opacity: 0;
  transition: transform .3s ease-in, opacity .15s ease-in;
}
#notifications li.disappear
{
  transform: translate(-100%);
}
#notifications li.open
{
  transform: translate(100%);
}
#notifications li a
{
  padding: 0.75rem 1rem;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
#notifications li a span
{
  display: block;
}
#notifications li a span:first-child
{
  font-size: 87.5%;
  color: var(--tertiary-text);
}
#notifications li a span:last-child
{
  position: relative;
  margin: 0.25rem -0.25rem 0 0;
  padding-right: 1.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover)
{
  #notifications li a:hover span:last-child
  {
    text-decoration: underline;
  }
}
#notifications li a span:last-child:after
{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 100%;
  background: var(--control-text);
  -webkit-mask: var(--forward-icon) no-repeat 50% 50%;
  mask: var(--forward-icon) no-repeat 50% 50%;
}
#notifications li a:active span:last-child:after
{
  background: var(--control-active-text);
}
/* Homepage organizations grid */

#organizations
{
  background: var(--primary-background);
  padding: 1rem
           max(calc(env(safe-area-inset-right) - 1.5rem), 0rem)
           1rem
           max(calc(env(safe-area-inset-left) - 1.5rem), 0rem);
}
#organizations ul
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
#organizations li
{
  width: 50%;
}
@media (min-width: 32rem)
{
  #organizations li
  {
    width: 33.33%;
  }
}
@media (min-width: 48rem)
{
  #organizations li
  {
    width: 25%;
  }
}
@media (min-width: 64rem)
{
  #organizations li
  {
    width: 20%;
  }
}
@media (min-width: 80rem)
{
  #organizations li
  {
    width: 16.66%;
  }
}
@media (min-width: 96rem)
{
  #organizations li
  {
    width: 14.28%;
  }
}
@media (min-width: 112rem)
{
  #organizations li
  {
    width: 12.5%;
  }
}
@media (min-width: 128rem)
{
  #organizations li
  {
    width: 11.11%;
  }
}
@media (min-width: 144rem)
{
  #organizations li
  {
    width: 10%;
  }
}
#organizations li a
{
  display: block;
  padding: 1rem;
  transform: scale(1);
}
@media (min-width: 32rem)
{
  #organizations li a
  {
    padding: 1rem 2rem;
  }
}
#organizations img
{
  width: 100%;
  transition: all 0.05s ease-in;
}
@media (hover: hover)
{
  #organizations li a:hover img
  {
    transform: scale(1.15);
    transition: all 0.1s ease-in;
  }
}
/* Video and audio player */

div.player
{
  position: relative;
  padding: 0 
           env(safe-area-inset-left, 0)
           0
           env(safe-area-inset-right, 0);
  background: var(--video-player-background);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
div.player.sticky
{
  z-index: 1;
  position: sticky;
  top: 0;
}
div.player.embedded
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
div.player.video
{
  background: var(--video-background);
}
div.player.audio
{
  background: var(--audio-background);
}
div.player:fullscreen
{
  width: 100%;
  height: 100%;
}
div.player:-webkit-full-screen
{
  width: 100%;
  height: 100%;
}
div.player > div
{
  position: relative;
  height: 100%;  /* Needed for fullscreen. */
  pointer-events: none;  /* Use player as direct target for events outside chrome elements. */
}
div.player div.screen
{
  display: block;
}
div.player.video div.screen
{
  margin: 0 auto;
  aspect-ratio: 16/9;  /* Overridden with the video aspect ratio using inline styling. */
  min-height: 8rem;
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100svh - 7.5rem);
}
div.player.sticky.video div.screen
{
  max-height: 50vh;
  max-height: 50svh;
}
div.player.video div.screen > video
{
  width: 100%;
  height: 100%;
}
div.player.video div.screen[style] > video
{
  object-fit: cover;  /* Container size matches video aspect ratio, cover fit prevents 1px gaps. */
}
div.player.embedded.video div.screen > video,
div.player.video:fullscreen div.screen > video
{
  position: absolute;  /* The div.screen container is ignored in fullscreen, and when embedded. */
  left: 0;
  top: 0;
  object-fit: contain;
}
div.player.video:-webkit-full-screen div.screen > video
{
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
}
div.player.video div.message
{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 150%;
  color: white;
  pointer-events: auto;
}
div.player.video div.message a
{
  color: var(--player-link-text);
}
@media (hover: hover)
{
  div.player.video div.message a:hover
  {
    color: var(--player-link-hover-text);
  }
}
div.player.video div.message a:active
{
  color: var(--player-link-active-text);
}
div.player.audio div.screen
{
  position: relative;
  margin: 0 1rem;
  min-height: 8rem;
  height: calc(40vh);
  height: calc(40svh);
}
div.player.embedded.audio div.screen
{
  height: 100%;
}
div.player.audio div.screen div.waveform
{
  position: absolute;
  inset: 1rem 0 3.5rem 0;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  background: var(--audio-waveform);
  background: linear-gradient(
    var(--audio-background),
    var(--audio-waveform),
    var(--audio-background)
  );
}
div.player.audio div.screen div.waveform > div
{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--control-highlight-text);
}
div.player div.overlay,
div.player div.gradient-top,
div.player div.gradient-bottom,
div.player div.progress,
div.player div.controls,
div.player div.cues
{
  position: absolute;
  left: 0;
  right: 0;
}
div.player div.overlay
{
  top: 0;
  bottom: 0;
  color: var(--player-control-text);
  background: rgba(0, 0, 0, 0.05);
  transition: opacity 0.15s ease-in;
}
div.player.hiding div.overlay
{
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
div.player.hidden div.overlay
{
  display: none;
}
div.player.video div.gradient-top
{
  top: 0;
  height: min(6rem, 25%);
  background: linear-gradient(var(--player-overlay-gradient));
  opacity: 0.25;
}
div.player.video:has(div.title) div.gradient-top
{
  height: max(12rem, 25%);
  opacity: 0.5; 
}
div.player div.gradient-bottom
{
  bottom: 0;
  height: min(24rem, 75%);
  background: linear-gradient(to top, var(--player-overlay-gradient));
}
div.player.audio div.gradient-bottom
{
  opacity: 0.5;
}
div.player div.title-and-license
{
  position: relative;
  display: flex;
}
div.player:has(button.autoplay-unmute:not(.hidden)) div.overlay div.title
{
  margin-top: 4rem;
}
@media (max-width: 40rem), (max-height: 16rem) {
  div.player:has(button.autoplay-unmute:not(.hidden)) div.overlay div.title
  {
    display: none;
  }
}
div.player div.title a
{
  display: inline-block;
  padding: 0.5rem 1rem;
  max-width: 100%;
  color: var(--player-control-text);
  text-decoration: none;
  pointer-events: auto;
}
div.player div.title a:hover
{
  text-decoration: underline;
}
div.player div.title h1,
div.player div.title h2
{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
div.player div.title h2
{
  -webkit-line-clamp: 1;
}
@media (max-width: 48rem), (max-height: 16rem)
{
  div.player div.title h1
  {
    font-size: 125%;
  }
  div.player div.title h2
  {
    font-size: 100%;
  }
}
div.player div.controls
{
  display: flex;
  bottom: 0;
  padding: 0 0.5rem;
}
div.player div.controls > div,
div.player div.controls div.menu
{
  display: flex;
}
div.player div.controls > div.primary
{
  flex: 0;
}
div.player div.controls > div.secondary
{
  flex: 1;
  pointer-events: auto;
}
div.controls button.control,
div.controls div.position
{
  display: flex;
  align-items: center;
  font-size: 87.5%;
  line-height: 1;
  text-align: left;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  transform: scale3d(1, 1, 1);
  transition: transform 0.05s ease-out, color 0.1s ease-in-out;
}
div.controls button.control
{
  color: inherit !important;
}
div.controls button.control > div,
div.controls div.position > div
{
  margin: 0 0.5rem;
}
div.controls button.control:not(.position):not(:disabled):active
{
  transform: scale3d(0.9, 0.9, 0.9);
}
div.controls button.control:disabled
{
  color: var(--player-control-disabled-text) !important;
  cursor: default;
}
div.controls button.control.active
{
  color: var(--control-highlight-text) !important;
}
div.controls button.control:not(:disabled):active,
div.player div.title a:active
{
  color: var(--player-control-active-text) !important;
}
div.controls button.control.hidden
{
  display: none;
}
div.controls button.control svg.hidden
{
  display: none;
}
div.controls button.control.position,
div.controls div.position
{
  margin: 0 auto 0 0.25rem;
  transition: none;
}
@media (max-width: 28rem)
{
  div.controls button.control.position span:not(.position)
  {
    display: none;
  }
}
@media (max-width: 40rem)
{
  div.player div.controls
  {
    top: 0;
    flex-direction: column;
  }
  div.player div.controls > div.primary
  {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  div.player div.controls > div.secondary
  {
    flex: 0;
  }
  div.player div.controls > div.primary button.control.back
  {
    order: -1;
  }
  div.player div.controls > div.primary button.control.play
  {
    margin: -1.5rem 0;
    padding: 1.5rem;
  }
  div.player div.controls > div.primary button.control svg
  {
    width: 3rem;
    height: 3rem;
  }
}
div.player div.progress
{
  bottom: 2.5rem;
  padding: 0 1rem;
}
div.player div.progress > div
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 1em;
  cursor: pointer;
  pointer-events: auto;
}
div.player div.progress > div > div
{
  position: relative;
  height: 0.25rem;
  background: var(--overlay-background);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.15s ease-in;
}
@media (hover: hover)
{
  div.player div.progress:hover > div > div
  {
    height: 0.625rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
  }
  div.player.audio div.progress:hover > div > div
  {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.125);
  }
}
body.scrubbing
{
  user-select: none;
  -webkit-user-select: none;
}
body.scrubbing div.player div.progress > div > div
{
  height: 0.625rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}
body.scrubbing div.player.audio div.progress > div > div
{
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.125);
}
div.player div.progress > div > div > div
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--player-control-text);
}

div.player button.autoplay-unmute
{
  position: absolute;
  left: 0;
  top: 0;
  padding: 1rem;
  pointer-events: auto;
  cursor: default;
}
div.player button.autoplay-unmute.hidden
{
  display: none;
}
div.player button.autoplay-unmute div
{
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  width: auto;
  padding: 0.675rem;
  color: var(--control-text);
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  white-space: nowrap;
  box-shadow: 0 0 1rem var(--shadow);
  cursor: pointer;
}
@media (hover: hover)
{
  div.player button.autoplay-unmute div:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
}
div.player button.autoplay-unmute:active div
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}
div.player button.autoplay-unmute div span
{
  padding-right: 0.25rem;
}
div.player button.autoplay-unmute svg
{
  width: 1.5rem;
  height: 1.5rem;
}

div.player div.indicator
{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2.5rem;
  opacity: 0;
}
div.player.hidden div.indicator
{
  opacity: 1;
}
div.player div.indicator > div
{
  width: 5rem;
  height: 5rem;
  padding: 1rem;
  border-radius: 2.5rem;
  background: var(--player-control-text);
  opacity: 0;
}
div.player.paused div.indicator svg.play,
div.player:not(.paused) div.indicator svg.pause
{
  display: none;
}
div.player.playing div.indicator > div
{
  animation: ease-out 0.3s 1 fade-indicator-play both;
}
@keyframes fade-indicator-play
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}
div.player.paused div.indicator > div
{
  animation: ease-out 0.3s 1 fade-indicator-pause both;
}
@keyframes fade-indicator-pause
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}
div.player div.cues
{
  top: 0;
  bottom: 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5em;
  padding: 1em;
  overflow: hidden;
  color: white;
  text-align: center;
  line-height: 1.1;
  font-size: max(min(1.75vw, 3.5vh, 2.5rem), 0.5rem);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
div.player.hidden div.cues
{
  bottom: 0;
}
div.player div.cues p
{
  padding: 0.375em 0.75em;
  white-space: pre-line;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.5em;
}
/* Poll */

#poll ul.options
{
  margin: 1rem 0;
}
#poll ul.options li
{
  margin: 0.75rem 0;
}
#poll ul.options li p
{
  margin: 0.25rem 0;
  color: var(--secondary-text);
}
#poll ul.options li p span
{
  color: var(--tertiary-text);
}
#poll ul.options li div.bar
{
  width: 100%;
  height: 0.75rem;
  max-width: 48rem;
  background: var(--secondary-background);
  border-radius: 0.375rem;
}
#poll ul.options li div.bar > div
{
  width: max(0.75rem, var(--width));
  height: 100%;
  background: var(--button-default);
  border-radius: 0.375rem;
}
#poll p.total
{
  color: var(--tertiary-text);
}
/* Progress indicators */

svg.circular-progress
{
  --progress: 0;
  --size: 24px;
  --stroke-width: 2px;
  --half-size: calc(var(--size) / 2);
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
}
svg.circular-progress.small
{
  --stroke-width: 3px;
}
svg.circular-progress circle
{
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  stroke-linecap: round;
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  fill: none;
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  transition: stroke-dasharray 0.3s linear;
}
svg.circular-progress.indeterminate circle
{
  --dash: calc((12.5 * var(--circumference)) / 100);
  animation: indeterminate-spin 1.2s linear 0.3s infinite backwards;
}
@keyframes indeterminate-spin {
  from
  {
    transform: scaleX(-1) rotate(-90deg);
  } 
  to
  {
    transform: scaleX(-1) rotate(-450deg);
  } 
}
/* Roles */

#roles div.search
{
  margin: 1rem 0 1.5rem 0
}
#roles div.search p.help
{
    max-width: max-content;
    margin: 1rem auto 0 auto;
    color: var(--secondary-text);
}

/* Collaborator roles listing */

#collaborators-items
{
  margin: 1rem
          calc(-1 * max(env(safe-area-inset-right), 1rem))
          1rem
          calc(-1 * max(env(safe-area-inset-left), 1rem));
}
#collaborators-items > div
{
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  border-top: 1px solid var(--body-background);
  border-bottom: 1px solid var(--body-background);
  background: var(--primary-background);
}
#collaborators-items > div > div
{
  display: block
}
#collaborators-items > div + div
{
  margin-top: -1px;
}
#collaborators-items > div > div.menu
{
  margin: -0.5rem -0.5rem -0.5rem 0;
}

#collaborators-items div.field.inline
{
  margin: 0.5rem 0 0 0;
}
/* Search field */

#search div.field input[type=search]
{
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}
#search p.help
{
  max-width: max-content;
  margin: 1rem auto 0 auto;
  color: var(--secondary-text);
}

/* Results listing */

#results
{
  margin: 1rem 0 1.5rem 0;
}

#results-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(48rem, 100%), 1fr));
  gap: 1.5rem;
}
#results-items em
{
  display: inline-block;
  margin: 0 -0.25rem -0.0625rem -0.25rem;
  padding: 0 0.25rem 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
  background: var(--highlight);
  font-style: normal;
  mix-blend-mode: darken;
}
#results-items p.excerpt
{
  margin: 0.5rem 0 0 0;
  overflow-wrap: anywhere;
}
/* Temporary inline note about a recent change */

@font-face {
  font-family: 'temporary_note_script';
  src: url(/assets/caveat-ec8cc5dcd0da03533d323e7a05d7654c0e9c989387198ded2f214475e227762f.woff2) format('woff2');
}

p.temporary_note
{
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-left: 0.5em;
  font: 1.25rem/0.8  temporary_note_script;
  color: var(--secondary-text);
}
p.temporary_note svg
{
  position: relative;
  top: 0.25em;
  height: 1em;
  width: 2em;
  transition: transform 0.2s ease-in-out;
}

@media (min-width: 96rem)
{
  p.temporary_note svg
  {
    transform: rotate(10deg);
  }
}
@media (min-width: 64rem)
{
  p.temporary_note svg
  {
    transform: rotate(10deg);
  }
}
@media (max-width: 32rem)
{
  p.temporary_note svg
  {
    transform: rotate(-16deg);
  }
}
@media (max-width: 24rem)
{
  p.temporary_note svg
  {
    transform: rotate(-32deg);
  }
}
/* Text tracks */

#text-track-processing-jobs:has(p)
{
  margin: 1rem 0;
}

#text-tracks
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}
#text-tracks:has(li)
{
  margin: 1.5rem 0;
}
#text-tracks > li
{
  display: flex;
  align-items: flex-start;
}
#text-tracks > li > div:first-child
{
  flex: 1 1 auto;
}
#text-tracks > li > div:first-child h2
{
  font-size: 100%;
}
#text-tracks > li > div:first-child p
{
  font-size: 87.5%;
  color: var(--tertiary-text);
}
#text-tracks > li > form ul
{
  margin: -0.125em 0 0 1rem;
}
#text-tracks > li > div.menu
{
  margin: -0.5rem 0 0 0;
}
/* Immediate toggle */

div.toggle
{
  width: fit-content;
  margin: 1rem 0 1rem auto;
  padding: 0;
  font-size: 75%;
  user-select: none;
  -webkit-user-select: none;
}
div.toggle div.field
{
  margin: 0;
}
div.toggle div.field label
{
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--control-overlay-background);
  border: 1px solid var(--control-border);
}
@media (hover: hover)
{
  div.toggle div.field label:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
}
div.toggle div.field label:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}
/* API access tokens */

#tokens ul.tokens
{
  max-width: 52.5rem;
  margin: 1rem 0;
}
#tokens ul.tokens > li
{
  display: flex;
}
#tokens ul.tokens > li + li
{
  margin-top: 0.5rem;
}
#tokens h2
{
  font-size: 100%;
}
#tokens form.delete
{
  margin: -0.5rem -0.5rem 0 auto;
}
/* Transcript view */

#transcript div.segments
{
  display: table;
  margin-top: 1rem;
}
#transcript div.segments a
{
  display: table-row;
  text-decoration: none;
}
#transcript div.segments a.active
{
  color: var(--primary-text);
}
#transcript div.segments a > *
{
  display: table-cell;
  padding: 0.125rem 0;
}
#transcript div.segments a > div
{
  position: relative;
  padding: 0 0.75rem;
}
#transcript div.segments a > p
{
  white-space: pre-line;
}
#transcript div.segments a.active > div:before
{
  content: '';
  position: absolute;
  left: 0;
  top: 0.8125rem;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 0;
  border-radius: 0.25rem;
  background: currentcolor;
}

#transcript div.toggle
{
  z-index: 1;
  position: sticky;
  bottom: 0.75rem;
  margin: 0.5rem -.25rem 0 auto;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}
/* Recently deleted items */

#trash p.help
{
  margin: 1rem 0 0 0;
}

#trash-entries-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
  margin: 1rem 0 1.5rem 0;
}
#trash-entries-items > div:target > div
{
  outline: 0.25rem solid var(--highlight);
  outline-offset: 0.25rem;
}
/* Video overview */

#videos
{
  margin: 1rem 0 1.5rem 0;
}

#videos-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: 1.5rem;
}
#videos-items > div,
#videos-items > div > a
{
  display: block;
}
#videos-items div.art
{
  width: 100%;
}
/* Warning with icon */

div.warning
{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  color: var(--secondary-text);
}
div.warning:first-child
{
  margin-top: 0;
}
div.warning:last-child
{
  margin-bottom: 0;
}
div.warning svg
{
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}

/* Validation error warning */

div.warning.invalid,
div.warning.invalid a
{
  color: var(--control-invalid-text);
}
div.warning.invalid a:active
{
  color: var(--control-invalid-link-active);
}