/* Author formatting is also rendered in student materials and saved snapshots. */
.editor-ink-black{--editor-ink:#172536;color:var(--editor-ink)}
.editor-ink-red{--editor-ink:#bb3030;color:var(--editor-ink)}
.editor-ink-orange{--editor-ink:#b85c00;color:var(--editor-ink)}
.editor-ink-yellow{--editor-ink:#8a7000;color:var(--editor-ink)}
.editor-ink-green{--editor-ink:#257044;color:var(--editor-ink)}
.editor-ink-cyan{--editor-ink:#087e8b;color:var(--editor-ink)}
.editor-ink-blue{--editor-ink:#275aa8;color:var(--editor-ink)}
.editor-ink-violet{--editor-ink:#7944a0;color:var(--editor-ink)}
.editor-size-12{font-size:12px}
.editor-size-14{font-size:14px}
.editor-size-16{font-size:16px}
.editor-size-18{font-size:18px}
.editor-size-20{font-size:20px}
.editor-size-24{font-size:24px}
.editor-size-28{font-size:28px}
.editor-size-32{font-size:32px}
.taskEditor{
  margin-top:14px;
}

/* Adjacent BR selectors ignore intervening text nodes; preserve source paragraphs. */
.taskEditor .editableText br{
  display:revert!important;
}

.editorToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  margin-bottom:14px;
}

.editorGroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Syntax tools occupy the second row in every text editor. */
.editorToolbar > .editorGroup:has([data-editor-action="mark"]){
  order:1;
  flex-basis:100%;
}

.editorToolbar button{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

.editorToolbar button:hover,
.editorToolbar button.active{
  background:#111;
  color:#fff;
}

.taskEditor .editorToolbar button:is([data-editor-action="undo"], [data-editor-action="eraser"]){
  border-color:#d3dde7;
  background:#eef3f7;
  color:#53677b;
}

.taskEditor .editorToolbar button[data-editor-action="undo"]{
  margin-inline-start:6px;
}

.taskEditor .editorToolbar button:is([data-editor-action="undo"], [data-editor-action="eraser"]):hover:not(:disabled){
  border-color:#aebfce;
  background:#e1eaf2;
  color:#304e6b;
}

.taskEditor .editorToolbar button[data-editor-action="eraser"].active{
  border-color:#315d8f;
  background:#315d8f;
  color:#fff;
}

.taskEditor .editorToolbar button[data-editor-action="clear"]{
  border-color:#ebd4d4;
  background:#fcf1f1;
  color:#995757;
}

.taskEditor .editorToolbar button[data-editor-action="clear"]:hover:not(:disabled){
  border-color:#d8aaaa;
  background:#f7e3e3;
  color:#823d3d;
}

.fillBtn{
  width:34px;
  height:34px;
  padding:0 !important;
}

.fillBtn.red{ background:var(--c-red, #ffd6d6); }
.fillBtn.orange{ background:var(--c-orange, #ffe3c7); }
.fillBtn.yellow{ background:var(--c-yellow, #fff2b3); }
.fillBtn.green{ background:var(--c-green, #d7f3df); }
.fillBtn.cyan{ background:var(--c-cyan, #d6f3ff); }
.fillBtn.blue{ background:var(--c-blue, #d8e6ff); }
.fillBtn.violet{ background:var(--c-violet, #eadcff); }

.taskEditor .qText{
  margin-top:0;
}

.editableText{
  outline:none;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  background:#fff;
  min-height:auto;
}

.mark{
  background-repeat:repeat-x;
  background-position:0 100%;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding-bottom:6px;
}

.m-subj{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Cline x1='0' y1='4' x2='20' y2='4' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");
}

.m-pred{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="8"%3E%3Cline x1="0" y1="3" x2="20" y2="3" stroke="%23111111" stroke-width="2"/%3E%3Cline x1="0" y1="6" x2="20" y2="6" stroke="%23111111" stroke-width="2"/%3E%3C/svg%3E');
  padding-bottom:8px;
}

.m-attr{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="7"%3E%3Cpath d="M0 4 Q4 1 9 4 T18 4" fill="none" stroke="%232a6bd6" stroke-width="2"/%3E%3C/svg%3E');
}

.m-pril{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="7"%3E%3Cpath d="M0 4 Q4 1 9 4 T18 4" fill="none" stroke="%23d6802a" stroke-width="2"/%3E%3C/svg%3E');
}

.m-obj{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="6"%3E%3Cline x1="0" y1="4" x2="18" y2="4" stroke="%236a3bd2" stroke-width="2" stroke-dasharray="5 4"/%3E%3C/svg%3E');
}

.m-adv{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="22" height="6"%3E%3Cline x1="0" y1="4" x2="22" y2="4" stroke="%232c8a4a" stroke-width="2" stroke-dasharray="6 3 1 3" stroke-linecap="round"/%3E%3C/svg%3E');
}

.union{
  display:inline-block;
  border:1px solid #111;
  border-radius:999px;
  padding:0 8px 1px;
  line-height:1.2;
}

.fill{
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  border-radius:6px;
  padding:0 2px;
}

.f-red{ background-color:var(--c-red, #ffd6d6); }
.f-orange{ background-color:var(--c-orange, #ffe3c7); }
.f-yellow{ background-color:var(--c-yellow, #fff2b3); }
.f-green{ background-color:var(--c-green, #d7f3df); }
.f-cyan{ background-color:var(--c-cyan, #d6f3ff); }
.f-blue{ background-color:var(--c-blue, #d8e6ff); }
.f-violet{ background-color:var(--c-violet, #eadcff); }

.bold{
  font-weight:700;
}

.italic{
  font-style:italic;
}

.underline{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

@media (max-width:700px){
  .taskEditor{
    margin-top:10px;
  }

  .editorToolbar{
    gap:8px;
    padding:8px;
    border-radius:12px;
    margin-bottom:10px;
  }

  .editorGroup{
    gap:6px;
    width:100%;
  }

  .editorToolbar button{
    min-height:32px;
    border-radius:8px;
    padding:6px 8px;
    font-size:12px;
  }

  .fillBtn{
    width:29px;
    height:29px;
  }

  .editableText{
    padding:12px;
    border-radius:12px;
  }
}

@media (max-width:420px){
  .editorToolbar{
    gap:7px;
    padding:7px;
  }

  .editorGroup{
    gap:5px;
  }

  .editorToolbar button{
    min-height:30px;
    padding:5px 7px;
    font-size:11px;
  }

  .fillBtn{
    width:27px;
    height:27px;
  }
}

/* Keep the original button text as its accessible name, but use compact
   monochrome icons on phones. Existing actions and desktop labels are unchanged. */
@media (max-width:700px){
  .taskEditor .editorToolbar button:is([data-editor-action="undo"], [data-editor-action="eraser"], [data-editor-action="clear"]){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    box-sizing:border-box;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:10px;
    font-size:0!important;
    line-height:0;
  }
  .taskEditor .editorToolbar button:is([data-editor-action="undo"], [data-editor-action="eraser"], [data-editor-action="clear"])::before{
    content:"";
    display:block;
    width:22px;
    height:22px;
    flex:none;
    background:currentColor;
    -webkit-mask:var(--editor-action-icon) center / contain no-repeat;
    mask:var(--editor-action-icon) center / contain no-repeat;
  }
  .taskEditor .editorToolbar button[data-editor-action="undo"]{
    --editor-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 4 9l5 5M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
  }
  .taskEditor .editorToolbar button[data-editor-action="eraser"]{
    --editor-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 3 6 6a2 2 0 0 1 0 3l-8 8H7l-4-4a2 2 0 0 1 0-3l9-10a2 2 0 0 1 3 0ZM8 8l9 9M12 20h9'/%3E%3C/svg%3E");
  }
  .taskEditor .editorToolbar button[data-editor-action="clear"]{
    --editor-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7'/%3E%3C/svg%3E");
  }
}