/* Annotation layer styles for pdf.js — the interactive overlay that makes link
 * annotations clickable and draws annotation chrome (borders, popups, widgets).
 *
 * SOURCE: the `.annotationLayer` block extracted verbatim from
 *   https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/web/pdf_viewer.css
 * i.e. the exact version of pdfjs-dist vendored in this folder. Same rules as
 * pdf_textlayer.css: do NOT hand-tune, re-extract when upgrading pdfjs-dist.
 *
 * The layer itself is pointer-events:none and only its <section> children take
 * pointer events, so text selection in the text layer underneath keeps working.
 * Sizing/rotation come from --total-scale-factor + --scale-round-x/y, which the
 * page container defines (see .viewer-page in css/style.css).
 *
 * Contains only data: URIs — no external assets to fetch (checked), so it stays
 * consistent with the app running fully offline.
 */
.annotationLayer{
  color-scheme:only light;

  --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --annotation-unfocused-field-filter:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pdfjsFillableField' x='0%' y='0%' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='rgb(0,54,255)' flood-opacity='0.13' result='f'/><feComposite in='f' in2='SourceGraphic' operator='over'/></filter></svg>#pdfjsFillableField");
  --input-focus-border-color:Highlight;
  --input-focus-outline:1px solid Canvas;
  --input-unfocused-border-color:transparent;
  --input-disabled-border-color:transparent;
  --input-hover-border-color:black;
  --link-outline:none;

  @media screen and (forced-colors: active){
    --input-focus-border-color:CanvasText;
    --input-unfocused-border-color:ActiveText;
    --input-disabled-border-color:GrayText;
    --input-hover-border-color:Highlight;
    --link-outline:1.5px solid LinkText;

    .textWidgetAnnotation :is(input, textarea):required,
    .choiceWidgetAnnotation select:required,
    .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
      outline:1.5px solid selectedItem;
    }

    .linkAnnotation{
      outline:var(--link-outline);

      &:hover{
        backdrop-filter:var(--hcm-highlight-filter);
      }

      & > a:hover{
        opacity:0 !important;
        background:none !important;
        box-shadow:none;
      }
    }

    .popupAnnotation .popup{
      outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important;
      background-color:ButtonFace !important;
      color:ButtonText !important;
    }

    .highlightArea:hover::after{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      backdrop-filter:var(--hcm-highlight-filter);
      content:"";
      pointer-events:none;
    }

    .popupAnnotation.focused .popup{
      outline:calc(3px * var(--total-scale-factor)) solid Highlight !important;
    }
  }

  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  transform-origin:0 0;

  &[data-main-rotation="90"] .norotate{
    transform:rotate(270deg) translateX(-100%);
  }
  &[data-main-rotation="180"] .norotate{
    transform:rotate(180deg) translate(-100%, -100%);
  }
  &[data-main-rotation="270"] .norotate{
    transform:rotate(90deg) translateY(-100%);
  }

  &.disabled{
    section,
    .popup{
      pointer-events:none;
    }
  }

  .annotationContent{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;

    &.freetext{
      background:transparent;
      border:none;
      inset:0;
      overflow:visible;
      white-space:nowrap;
      font:10px sans-serif;
      line-height:1.35;
    }
  }

  section{
    position:absolute;
    text-align:initial;
    pointer-events:auto;
    box-sizing:border-box;
    transform-origin:0 0;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;

    &:has(div.annotationContent){
      canvas.annotationContent{
        display:none;
      }
    }

    .overlaidText{
      position:absolute;
      top:0;
      left:0;
      width:0;
      height:0;
      display:inline-block;
      overflow:hidden;
    }
  }
  .hasOwnCanvas:not(.sandboxModified) :is(input, textarea){
    display:none;
  }

  .hasOwnCanvas.sandboxModified canvas.annotationContent{
    display:none;
  }

  .textLayer.selecting ~ & section{
    pointer-events:none;
  }

  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
    position:absolute;
    font-size:1em;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
    > a:hover{
    opacity:0.2;
    background-color:rgb(255 255 0);
  }

  .linkAnnotation.hasBorder:hover{
    background-color:rgb(255 255 0 / 0.2);
  }

  .hasBorder{
    background-size:100% 100%;
  }

  .textAnnotation img{
    position:absolute;
    cursor:pointer;
    width:100%;
    height:100%;
    top:0;
    left:0;
  }

  .textWidgetAnnotation :is(input, textarea),
  .choiceWidgetAnnotation select,
  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
    background-image:var(--annotation-unfocused-field-background);
    border:2px solid var(--input-unfocused-border-color);
    box-sizing:border-box;
    font:calc(9px * var(--total-scale-factor)) sans-serif;
    height:100%;
    margin:0;
    vertical-align:top;
    width:100%;
  }

  .textWidgetAnnotation :is(input, textarea):required,
  .choiceWidgetAnnotation select:required,
  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
    outline:1.5px solid red;
  }

  .choiceWidgetAnnotation select option{
    padding:0;
  }

  .textWidgetAnnotation textarea{
    resize:none;
  }

  .textWidgetAnnotation :is(input, textarea)[disabled],
  .choiceWidgetAnnotation select[disabled],
  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
    background:none;
    border:2px solid var(--input-disabled-border-color);
    cursor:not-allowed;
  }

  .textWidgetAnnotation :is(input, textarea):hover,
  .choiceWidgetAnnotation select:hover,
  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
    border:2px solid var(--input-hover-border-color);
  }
  .textWidgetAnnotation :is(input, textarea):hover,
  .choiceWidgetAnnotation select:hover,
  .buttonWidgetAnnotation.checkBox input:hover{
    border-radius:2px;
  }

  .textWidgetAnnotation :is(input, textarea):focus,
  .choiceWidgetAnnotation select:focus{
    background:none;
    border:2px solid var(--input-focus-border-color);
    border-radius:2px;
    outline:var(--input-focus-outline);
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
    background-image:none;
    background-color:transparent;
  }

  .buttonWidgetAnnotation.checkBox :focus{
    border:2px solid var(--input-focus-border-color);
    border-radius:2px;
    outline:var(--input-focus-outline);
  }

  .buttonWidgetAnnotation.radioButton :focus{
    border:2px solid var(--input-focus-border-color);
    outline:var(--input-focus-outline);
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton){
    [data-canvas-name]{
      filter:var(--annotation-unfocused-field-filter);
    }

    &:focus-within [data-canvas-name]{
      filter:none;
    }

    [data-canvas-name="checked"]{
      &:has(~ input:checked){
        display:block;
      }

      &:has(~ input:not(:checked)){
        display:none;
      }
    }

    [data-canvas-name="unchecked"]{
      &:has(~ input:checked){
        display:none;
      }

      &:has(~ input:not(:checked)){
        display:block;
      }
    }
  }

  .textWidgetAnnotation input.comb{
    --comb-width:0px;
    --comb-letter-spacing:calc(var(--comb-width) - 1ch);

    font-family:monospace;
    letter-spacing:var(--comb-letter-spacing);
    overflow-x:hidden;
    padding:0;
    text-indent:calc(
      var(--comb-offset, 0) * var(--comb-width) + var(--comb-letter-spacing) / 2
    );
  }

  .textWidgetAnnotation input.comb:focus{
    background-image:repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--comb-width) - 1px),
      var(--input-focus-border-color) calc(var(--comb-width) - 1px)
        var(--comb-width)
    );
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton):has(
      [data-canvas-name="checked"]
    )
    input:checked,
  .buttonWidgetAnnotation:is(.checkBox, .radioButton):has(
      [data-canvas-name="unchecked"]
    )
    input:not(:checked){
    background-image:none;
  }

  .fileAttachmentAnnotation .popupTriggerArea{
    height:100%;
    width:100%;
  }

  .mediaAnnotation{
    pointer-events:auto;

    .mediaContent{
      width:100%;
    }

    video.mediaContent{
      height:100%;
      -o-object-fit:contain;
         object-fit:contain;
    }

    audio.mediaContent{
      position:absolute;
      bottom:0;
    }

    .mediaPlayButton{
      height:100%;
      width:100%;
      margin:0;
      padding:0;
      border:none;
      cursor:pointer;
      background-color:transparent;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(0,0,0,0.55)'/%3E%3Cpath d='M40 32 L70 50 L40 68 Z' fill='white'/%3E%3C/svg%3E");
      background-position:center;
      background-repeat:no-repeat;
      background-size:calc(48px * var(--total-scale-factor));

      &:hover{
        background-color:rgba(255 255 255 / 0.1);
      }
    }
  }

  .popupAnnotation{
    position:absolute;
    font-size:calc(9px * var(--total-scale-factor));
    pointer-events:none;
    width:-moz-max-content;
    width:max-content;
    max-width:45%;
    height:auto;
  }

  .popup{
    background-color:rgb(255 255 153);
    color:black;
    box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136);
    border-radius:calc(2px * var(--total-scale-factor));
    outline:1.5px solid rgb(255 255 74);
    padding:calc(6px * var(--total-scale-factor));
    cursor:pointer;
    font:message-box;
    white-space:normal;
    word-wrap:break-word;
    pointer-events:auto;
    -webkit-user-select:text;
       -moz-user-select:text;
            user-select:text;
  }

  .popupAnnotation.focused .popup{
    outline-width:3px;
  }

  .popup *{
    font-size:calc(9px * var(--total-scale-factor));
  }

  .popup > .header{
    display:inline-block;
  }

  .popup > .header > .title{
    display:inline;
    font-weight:bold;
  }

  .popup > .header .popupDate{
    display:inline-block;
    margin-left:calc(5px * var(--total-scale-factor));
    width:-moz-fit-content;
    width:fit-content;
  }

  .popupContent{
    border-top:1px solid rgb(51 51 51);
    margin-top:calc(2px * var(--total-scale-factor));
    padding-top:calc(2px * var(--total-scale-factor));
  }

  .richText > *{
    white-space:pre-wrap;
    font-size:calc(9px * var(--total-scale-factor));
  }

  .popupTriggerArea{
    cursor:pointer;

    &:hover{
      backdrop-filter:var(--hcm-highlight-filter);
    }
  }

  section svg{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
  }

  .annotationTextContent{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    color:transparent;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    pointer-events:none;

    span{
      width:100%;
      display:inline-block;
    }
  }

  svg.quadrilateralsContainer{
    contain:strict;
    width:0;
    height:0;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
  }
}

:root{
  --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --xfa-focus-outline:auto;
}

@media screen and (forced-colors: active){
  :root{
    --xfa-focus-outline:2px solid CanvasText;
  }
  .xfaLayer *:required{
    outline:1.5px solid selectedItem;
  }
}