::highlight(ifis-underlines) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:rgba(40,40,40,.58); }
.ifis-underline-line { position:absolute; z-index:2; height:1px; background:rgba(40,40,40,.58); pointer-events:none; }
.ifis-annotations { max-width:var(--layout-max,720px); margin:54px auto 18px; padding-top:18px; border-top:1px solid rgba(128,128,128,.22); }
.ifis-annotations[hidden] { display:none; }
.ifis-annotations__head { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; color:var(--text-muted,#666); font-size:.78rem; letter-spacing:.02em; }
.ifis-annotations__list { display:flex; flex-direction:column; }
.ifis-annotations__item { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:start; padding:0 0 15px; margin:0 0 15px; border-bottom:1px solid rgba(128,128,128,.14); }
.ifis-annotations__number { padding-top:2px; color:var(--text-muted,#777); font-size:.7rem; letter-spacing:.06em; }
.ifis-annotations__text,.ifis-annotations__delete { margin:0; border:0; background:transparent; font:inherit; cursor:pointer; }
.ifis-annotations__text { padding:0; color:inherit; font-size:.9rem; line-height:1.5; text-align:left; }
.ifis-annotations__text:hover { text-decoration:underline; text-underline-offset:.18em; }
.ifis-annotations__delete { padding:2px 0 2px 10px; color:var(--text-muted,#777); font-size:.72rem; }
@media (prefers-color-scheme:dark) { ::highlight(ifis-underlines) { text-decoration-color:rgba(235,235,235,.68); } .ifis-underline-line { background:rgba(235,235,235,.68); } }
@media (max-width:600px) { .ifis-annotations { margin-top:42px; } .ifis-annotations__item { grid-template-columns:24px 1fr; } .ifis-annotations__delete { grid-column:2; padding:4px 0 0; text-align:left; } }


/* Colored annotations: same palette as the reading marker */
::highlight(ifis-underline-ochre){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:#b87024}
::highlight(ifis-underline-blue){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:#587a96}
::highlight(ifis-underline-green){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:#66836a}
::highlight(ifis-underline-red){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:#a8665f}
::highlight(ifis-highlight-ochre){background:color-mix(in srgb,#b87024 22%,transparent)}
::highlight(ifis-highlight-blue){background:color-mix(in srgb,#587a96 22%,transparent)}
::highlight(ifis-highlight-green){background:color-mix(in srgb,#66836a 22%,transparent)}
::highlight(ifis-highlight-red){background:color-mix(in srgb,#a8665f 22%,transparent)}
.ifis-annotation-fallback{position:absolute;z-index:2;pointer-events:none;box-sizing:border-box}
.ifis-annotation-fallback.is-underline{border-bottom:1.5px solid var(--annotation-color)}
.ifis-annotation-fallback.is-highlight{background:color-mix(in srgb,var(--annotation-color) 22%,transparent);border-radius:2px}
.ifis-mark-picker{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px 0 2px;padding:7px 8px;border-radius:9px;background:rgba(128,128,128,.06)}
.ifis-mark-picker[hidden]{display:none}
.ifis-mark-picker__types{display:flex;gap:3px}
.ifis-mark-picker__type{border:0;background:transparent;color:var(--text-muted,#666);font:inherit;font-size:.72rem;padding:4px 6px;border-radius:5px;cursor:pointer}
.ifis-mark-picker__type.is-active{background:rgba(128,128,128,.12);color:var(--text-main,#222)}
.ifis-mark-picker__colors{display:flex;gap:7px;padding-left:4px;border-left:1px solid rgba(128,128,128,.16)}
.ifis-mark-picker__color{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:var(--swatch);opacity:.65;cursor:pointer}
.ifis-mark-picker__color:hover,.ifis-mark-picker__color.is-active{opacity:1;box-shadow:0 0 0 2px var(--bg,#fff),0 0 0 3px rgba(20,20,20,.18)}
@media(max-width:600px){.ifis-mark-picker{justify-content:space-between;margin:8px 0 0}.ifis-mark-picker__type{font-size:.7rem}}

/* Marking choices replace the secondary row in place instead of adding a row. */
.ifis-quote-dialog__secondary{position:relative}
.ifis-quote-dialog__secondary .ifis-mark-picker{position:absolute;z-index:3;inset:0;display:flex;margin:0;padding:0 6px;justify-content:flex-start;border-radius:0;background:var(--bg,#fff)}
.ifis-quote-dialog__secondary .ifis-mark-picker[hidden]{display:none}
.ifis-quote-dialog__secondary.is-marking>button{visibility:hidden}
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker{visibility:visible}

/* Keep all four annotation colours visible when the picker overlays the action row. */
.ifis-quote-dialog__secondary .ifis-mark-picker{gap:10px}
.ifis-quote-dialog__secondary .ifis-mark-picker__types{flex:0 0 auto}
.ifis-quote-dialog__secondary .ifis-mark-picker__colors{display:flex;flex:0 0 auto;gap:8px;min-width:82px}
.ifis-quote-dialog__secondary .ifis-mark-picker__color{display:block;flex:0 0 12px}
@media(max-width:600px){
  .ifis-quote-dialog__secondary .ifis-mark-picker{gap:6px;padding:0}
  .ifis-quote-dialog__secondary .ifis-mark-picker__type{padding-left:4px;padding-right:4px}
  .ifis-quote-dialog__secondary .ifis-mark-picker__colors{gap:6px;min-width:72px;padding-left:5px}
}

/* Picker row must span the complete secondary action width; otherwise the color buttons collapse. */
.ifis-quote-dialog__secondary .ifis-mark-picker{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  flex-wrap:nowrap;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__types{display:flex;flex:0 1 auto;min-width:0}
.ifis-quote-dialog__secondary .ifis-mark-picker__colors{
  display:flex!important;
  visibility:visible!important;
  width:auto!important;
  min-width:96px;
  margin-left:auto;
  overflow:visible;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__color{
  display:inline-block!important;
  visibility:visible!important;
  width:12px!important;
  min-width:12px;
  height:12px!important;
}

/* Color swatches: override the generic quote-dialog button sizing. */
.ifis-quote-dialog .ifis-mark-picker button.ifis-mark-picker__color{
  flex:0 0 14px!important;
  width:14px!important;
  min-width:14px!important;
  max-width:14px!important;
  height:14px!important;
  min-height:14px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--swatch)!important;
  font-size:0!important;
  line-height:0!important;
  appearance:none;
}
.ifis-quote-dialog .ifis-mark-picker__colors{
  grid-template-columns:none!important;
  flex:0 0 auto!important;
  gap:9px!important;
}

/* Compact marking row: short pointer travel and symmetrical active controls. */
.ifis-quote-dialog__secondary .ifis-mark-picker{
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0!important;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__types{
  gap:4px!important;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__type{
  box-sizing:border-box;
  padding:7px 10px!important;
  margin:0!important;
  border-radius:7px!important;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__colors{
  margin-left:2px!important;
  padding-left:10px!important;
  min-width:0!important;
  gap:8px!important;
}

/* Center the marking submenu as one compact group, matching the normal action rows. */
.ifis-quote-dialog__secondary .ifis-mark-picker{
  justify-content:center!important;
}
.ifis-quote-dialog__secondary .ifis-mark-picker__colors{
  margin-left:2px!important;
}
@media(max-width:600px){
  .ifis-quote-dialog__secondary .ifis-mark-picker{
    justify-content:center!important;
  }
}

/* Mobile marking submenu: centered, readable and compact. */
@media(max-width:600px){
  .ifis-quote-dialog__secondary .ifis-mark-picker{
    justify-content:center!important;
    gap:7px!important;
    padding:0!important;
  }
  .ifis-quote-dialog__secondary .ifis-mark-picker__types{
    gap:3px!important;
  }
  .ifis-quote-dialog__secondary .ifis-mark-picker__type{
    font-size:.82rem!important;
    padding:7px 6px!important;
  }
  .ifis-quote-dialog__secondary .ifis-mark-picker__colors{
    margin-left:0!important;
    padding-left:7px!important;
    gap:7px!important;
  }
  .ifis-quote-dialog .ifis-mark-picker button.ifis-mark-picker__color{
    width:13px!important;
    min-width:13px!important;
    max-width:13px!important;
    height:13px!important;
    min-height:13px!important;
    flex-basis:13px!important;
  }
}

.ifis-margin-mark-target{position:relative}
.ifis-margin-mark-target::before{
  content:"";
  position:absolute;
  top:.08em;
  bottom:.08em;
  left:-13px;
  width:3px;
  border-radius:2px;
  background:var(--ifis-margin-color);
  opacity:.9;
  pointer-events:none;
}
@media(max-width:600px){
  .ifis-margin-mark-target::before{left:-7px;width:3px}
}

/* Real iOS fallback: explicit DOM line, kept just inside the article text edge. */
.ifis-margin-mark{
  position:absolute;
  z-index:20;
  width:3px;
  border-radius:2px;
  pointer-events:none;
  opacity:.95;
}

.ifis-margin-options{display:inline-flex;align-items:center;gap:2px}
.ifis-margin-options[hidden]{display:none!important}
.ifis-quote-dialog .ifis-margin-option{
  width:24px!important;min-width:24px!important;height:28px!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:6px!important;background:transparent!important;color:var(--text-muted,#666)!important;
  font:600 1rem/1 sans-serif!important;letter-spacing:-.18em;cursor:pointer
}
.ifis-quote-dialog .ifis-margin-option.is-active{background:rgba(128,128,128,.12)!important;color:var(--text-main,#222)!important}

/* Randstrich details temporarily replace the sharing row. */
.ifis-margin-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:8px 12px;
  border-bottom:1px solid rgba(128,128,128,.18);
}
.ifis-margin-row[hidden]{display:none!important}
.ifis-margin-row .ifis-mark-picker__colors{display:flex!important;align-items:center;gap:9px!important;padding:0!important;margin:0!important}
.ifis-margin-row [data-mark-remove]{font-size:.9rem!important;padding:7px 8px!important}
@media(max-width:600px){
  .ifis-margin-row{gap:9px;min-height:54px;padding:7px 8px}
}

/* Options occupy exactly the sharing row instead of adding another visual row. */
.ifis-quote-dialog__share-row[hidden]{display:none!important}
.ifis-margin-row{margin:0!important}
.ifis-margin-options{gap:4px!important}
.ifis-quote-dialog .ifis-margin-option{letter-spacing:0!important;font-size:1.05rem!important}

/* Randstrich controls: three equal-width symbols; repeat click toggles double. */
.ifis-quote-dialog .ifis-margin-option{
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  font-family:Arial,sans-serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
  white-space:pre!important;
}
.ifis-quote-dialog .ifis-margin-option.is-double{font-weight:700!important}

/* Margin marks are independent fineliner strokes; they never affect text layout. */
.ifis-margin-mark{
  position:absolute!important;
  width:3px!important;
  min-width:3px!important;
  max-width:3px!important;
  border:0!important;
  border-radius:2px;
  pointer-events:none;
  opacity:.95;
  z-index:2;
}

.ifis-quote-dialog .ifis-mark-picker__delete-all{
  flex:0 0 auto!important;
  width:26px!important;min-width:26px!important;height:28px!important;
  padding:0!important;margin-left:3px!important;
  border:0!important;background:transparent!important;
  font-size:1rem!important;line-height:1!important;
  opacity:.65;cursor:pointer
}
.ifis-quote-dialog .ifis-mark-picker__delete-all:hover{opacity:1}

/* Randstrich controls: paragraph glyph, matching the visual language of the quote icon. */
.ifis-margin-glyph{position:relative;display:inline-block;width:24px;height:22px}
.ifis-margin-glyph i{position:absolute;display:block;height:2px;background:currentColor;border-radius:1px;left:6px}
.ifis-margin-glyph i:nth-child(1){top:5px;width:12px}
.ifis-margin-glyph i:nth-child(2){top:10px;width:9px}
.ifis-margin-glyph i:nth-child(3){top:15px;width:12px}
.ifis-margin-glyph::before,.ifis-margin-glyph::after{content:"";position:absolute;top:3px;height:16px;width:2px;background:currentColor;border-radius:1px}
.ifis-margin-glyph.is-left::before{left:1px}
.ifis-margin-glyph.is-left::after{display:none}
.ifis-margin-glyph.is-right::before{display:none}
.ifis-margin-glyph.is-right::after{right:1px}
.ifis-margin-glyph.is-both::before{left:1px}
.ifis-margin-glyph.is-both::after{right:1px}

/* Working Text: neue zweizeilige Markieroberfläche.
   Diese Regeln stehen bewusst am Ende von annotations.css, damit die alten
   Overlay-Regeln dieses Stylesheets die neue quote-tool-Struktur nicht mehr
   überschreiben. */
.ifis-quote-dialog__secondary.is-marking{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:42px 26px!important;
  align-content:center!important;
  row-gap:0!important;
  min-height:86px!important;
  padding:8px 0!important;
  overflow:visible!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-quote-dialog__outward{
  display:none!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker{
  grid-column:1!important;
  grid-row:1!important;
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker[hidden]{
  display:none!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__types{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__labels,
.ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__tools{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-margin-row{
  grid-column:1!important;
  grid-row:2!important;
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  min-width:0!important;
  height:26px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.ifis-quote-dialog__secondary.is-marking:not(.has-mark-tool) .ifis-margin-row>*{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.ifis-quote-dialog__secondary.is-marking.has-mark-tool .ifis-margin-row>*{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.ifis-quote-dialog__secondary.is-marking .ifis-margin-options[hidden],
.ifis-quote-dialog__secondary.is-marking .ifis-margin-row [data-mark-remove][hidden]{
  display:none!important;
}

@media(max-width:600px){
  .ifis-quote-dialog__secondary.is-marking{
    grid-template-rows:34px 22px!important;
    min-height:70px!important;
    padding:7px 0!important;
  }
  .ifis-quote-dialog__secondary.is-marking .ifis-mark-picker,
  .ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__types,
  .ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__labels,
  .ifis-quote-dialog__secondary.is-marking .ifis-mark-picker__tools{
    height:34px!important;
    min-height:34px!important;
  }
  .ifis-quote-dialog__secondary.is-marking .ifis-margin-row{
    height:22px!important;
    min-height:22px!important;
  }
}

/* Kleiner Abstand zwischen Randstrich-Optionen und Farbauswahl */
.ifis-quote-dialog__secondary.is-marking.has-mark-tool .ifis-margin-options:not([hidden]){
  margin-right:6px!important;
}

/* Teilen ersetzt Zitieren/Diskutieren/Teilen direkt in derselben Aktionszeile. */
.ifis-quote-dialog__secondary.is-sharing{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:86px!important;
  padding:14px 8px!important;
  border-top:1px solid var(--line,#e5e5e5)!important;
  border-bottom:1px solid var(--line,#e5e5e5)!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__outward{
  display:none!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  align-items:center!important;
  justify-items:center!important;
  width:100%!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  border:0!important;
  background:transparent!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  margin:0!important;
  padding:4px 2px!important;
  text-align:center!important;
  white-space:nowrap!important;
}

@media(max-width:600px){
  .ifis-quote-dialog__secondary.is-sharing{
    min-height:70px!important;
    padding:8px 0!important;
  }
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
    min-height:32px!important;
    padding:3px 1px!important;
    font-size:.68rem!important;
  }
}

/* Share-Menü: gleiche Typografie und gleichmäßige Abstände */
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row{
  grid-template-columns:repeat(6,1fr)!important;
  column-gap:0!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
  font:inherit!important;
  font-size:.9rem!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  padding:4px 6px!important;
}
@media(max-width:600px){
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
    font-size:.76rem!important;
    padding:3px 2px!important;
  }
}

/* Share-Menü: kompakte, gleichmäßige Aktionsgruppe.
   Jede Trefferfläche ist deutlich breiter als die Beschriftung. */
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
  flex:0 0 128px!important;
  width:128px!important;
  min-width:128px!important;
  max-width:128px!important;
  min-height:44px!important;
  padding:8px 14px!important;
  border-radius:10px!important;
  color:var(--text-muted,#666)!important;
  font:inherit!important;
  font-size:.9rem!important;
  font-weight:400!important;
  line-height:1.2!important;
  transition:background-color .12s ease!important;
}
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button:hover,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a:hover,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button:focus-visible,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a:focus-visible,
.ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row .is-hovered{
  background:rgba(0,0,0,.055)!important;
  color:var(--text-muted,#666)!important;
  outline:none!important;
}
@media(max-width:600px){
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row{
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a{
    flex:1 1 calc(33.333% - 6px)!important;
    width:auto!important;
    min-width:calc(33.333% - 6px)!important;
    max-width:none!important;
    min-height:36px!important;
    padding:6px 10px!important;
    font-size:.76rem!important;
  }
}
@media(prefers-color-scheme:dark){
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button:hover,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a:hover,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row button:focus-visible,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row a:focus-visible,
  .ifis-quote-dialog__secondary.is-sharing .ifis-quote-dialog__share-row .is-hovered{
    background:rgba(255,255,255,.08)!important;
    color:#aeb2b5!important;
  }
}