/* honeypot: visually hidden, still in tab order skip via tabindex=-1 */
.fb-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
/* School Launch · lesson markup mode */
.sl-markup-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 12px;
}
body.sl-markup-on #content.sl-markup-on [data-sl-block]{
  position:relative;
  outline:1px dashed transparent;
  border-radius:4px;
  padding-right:4.5rem;
  transition:outline-color .15s, background-color .15s;
}
body.sl-markup-on #content.sl-markup-on [data-sl-block]:hover,
body.sl-markup-on #content.sl-markup-on [data-sl-block]:focus-within{
  outline-color:var(--brass);
  background:color-mix(in srgb, var(--brass-soft) 28%, transparent);
}
#content [data-sl-block].sl-marked{
  background:color-mix(in srgb, var(--brass-soft) 35%, var(--paper));
  outline:1px solid var(--brass);
  border-radius:4px;
}
#content [data-sl-block].sl-flash{
  outline:3px solid var(--focus);
}
.sl-mark-badge{
  position:absolute;
  top:4px;
  left:-2px;
  transform:translateX(-110%);
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--forge);
  color:var(--forge-ink);
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
@media (max-width:860px){
  .sl-mark-badge{transform:none;left:auto;right:4px}
  body.sl-markup-on #content.sl-markup-on [data-sl-block]{padding-right:0;padding-top:1.6rem}
}
.sl-mark-affordance{
  position:absolute;
  top:4px;
  right:4px;
  min-height:32px;
  padding:4px 8px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--forge);
  font:600 12px var(--sans);
  cursor:pointer;
  z-index:2;
  opacity:.85;
}
.sl-mark-affordance:hover,
.sl-mark-affordance:focus-visible{opacity:1;border-color:var(--forge)}

.sl-markup-editor{
  position:absolute;
  z-index:40;
  width:min(340px, calc(100vw - 24px));
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 8px 28px rgba(31,27,22,.18);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sl-ed-loc{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sl-ed-quote{margin:0;padding:8px 10px;border-left:3px solid var(--brass);background:var(--linen);font-family:var(--serif);font-size:15px;white-space:pre-wrap}
.sl-ed-text{width:100%;min-height:72px;resize:vertical;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:16px/1.45 var(--sans);background:var(--paper);color:var(--ink)}
.sl-ed-actions{display:flex;flex-wrap:wrap;gap:8px}

.sl-markup-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(380px,100vw);
  height:100%;
  z-index:50;
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:-8px 0 28px rgba(31,27,22,.12);
  padding:16px;
  display:none;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  overscroll-behavior:contain;
}
.sl-markup-panel.is-open{display:flex}
.sl-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl-panel-title{margin:0;font-family:var(--serif);font-size:22px;color:var(--forge)}
.sl-panel-help{margin:0;font-size:14px;color:var(--muted);line-height:1.4}
.sl-panel-list{display:flex;flex-direction:column;gap:10px;flex:1}
.sl-panel-empty{margin:0;color:var(--muted);font-size:15px}
.sl-note-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--linen);display:flex;flex-direction:column;gap:6px}
.sl-note-meta{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.sl-note-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--forge);color:var(--forge-ink);font-size:12px;margin-right:4px}
.sl-note-card blockquote{margin:0;padding:6px 10px;border-left:3px solid var(--brass);background:var(--paper);font-family:var(--serif);font-size:14.5px;white-space:pre-wrap}
.sl-note-text{margin:0;font-size:15px;line-height:1.4}
.sl-note-actions{display:flex;flex-wrap:wrap;gap:6px}
.sl-overall,.sl-name,.sl-reply{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:16px/1.45 var(--sans);background:var(--ground);color:var(--ink)}
.sl-panel-actions{display:flex;flex-direction:column;gap:8px}
.sl-panel-actions .btn{width:100%}

@media (max-width:700px){
  .sl-markup-panel{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:min(72vh,640px);
    border-left:0;
    border-top:1px solid var(--line);
    border-radius:12px 12px 0 0;
    box-shadow:0 -8px 28px rgba(31,27,22,.14);
  }
}

/* Fallback when color-mix unsupported */
@supports not (background: color-mix(in srgb, white 50%, black)){
  body.sl-markup-on #content.sl-markup-on [data-sl-block]:hover{background:var(--linen)}
  #content [data-sl-block].sl-marked{background:var(--linen)}
}