/* MY HIGHLIGHTS (Oct 2026): the marked-up page on a book review. Travis's Kindle highlights retold,
   his own margin notes in handwriting, three sticky flags to keep three ideas, and a workbook.
   The markup between the HIGHLIGHTS markers on a review page is written by scripts/highlights/build.py;
   the behavior is assets/highlights.js. Colors come from main.css tokens plus the few below
   (a highlighter, a blue pen, three page flags, and two chart colors checked for color-blind readers). */

.hl, .hl-wb, .hl-tray, .hl-over, .hl-teaser {
  --hl-marker: #FFE66D;
  --hl-pen: #1F3A6B;
  --hl-bar: #B7791F;
  --hl-dot: #2F5FB3;
  --hl-f1: #FF7A8F;
  --hl-f2: #5AA9FF;
  --hl-f3: #4CCB8F;
  --hl-flag-ink: #1E1B16;
  --hl-shade: rgba(70, 48, 12, .22);
}
[data-theme="dark"] .hl, [data-theme="dark"] .hl-wb, [data-theme="dark"] .hl-tray, [data-theme="dark"] .hl-over, [data-theme="dark"] .hl-teaser {
  --hl-marker: rgba(255, 214, 64, .30);
  --hl-pen: #A9C1EE;
  --hl-bar: #B98A2B;
  --hl-dot: #5B8DE0;
  --hl-shade: rgba(0, 0, 0, .55);
}

/* The line under the intro that points down the page. */
.essay-content .hl-teaser { margin: 4px 0 22px; font-size: 17px; }
.essay-content .hl-teaser a { text-decoration: none; color: var(--ink); }
.hl-teaser mark, .hl-title mark {
  color: inherit;
  background: linear-gradient(var(--hl-marker), var(--hl-marker)) no-repeat 0 72% / 100% 58%;
  padding: 0 .16em;
  margin: 0 -.16em;
  border-radius: .5em .2em .6em .25em / .3em .6em .25em .5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl-teaser a span { text-decoration: underline; text-underline-offset: 3px; }
.hl-teaser a:hover span { color: var(--accent); }

.hl { margin: 0 0 8px; }
.hl-flagline { display: flex; align-items: flex-start; gap: 14px; }
.essay-content .hl-flagline { margin: 30px 0 0; }
.hl-flagline-flags { flex: none; display: flex; gap: 4px; padding-top: 5px; }
.hl-mini { display: block; width: 13px; height: 22px; border-radius: 2px; box-shadow: 0 1px 2px var(--hl-shade); }
.hl-mini:nth-child(1) { background: var(--hl-f1); transform: rotate(-4deg); }
.hl-mini:nth-child(2) { background: var(--hl-f2); transform: rotate(2deg); }
.hl-mini:nth-child(3) { background: var(--hl-f3); transform: rotate(-1deg); }

/* ── The chart: highlights (bars, up) and margin notes (dots, down) for each chapter ── */
.hl-chart { margin: 30px 0 0; }
.hl-chart figcaption { margin: 0 0 4px; }
.hl-chart figcaption strong { display: block; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--ink); }
.hl-chart figcaption span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.essay-content ul.hl-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.essay-content .hl-legend li { margin: 0; display: flex; align-items: center; gap: 7px; }
.hl-k { display: block; flex: none; }
.hl-k-bar { width: 9px; height: 13px; border-radius: 3px 3px 0 0; background: var(--hl-bar); }
.hl-k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl-dot); }
.hl-plot { position: relative; display: flex; gap: 9px; margin: 14px 0 0; padding: 0 0 0 22px; }
.hl-gl { position: absolute; left: 0; right: 0; top: calc(118px - var(--v) * var(--u, 4px)); border-top: 1px solid var(--line); pointer-events: none; }
.hl-gl b { position: absolute; left: 0; top: -8px; font-weight: 400; font-size: 11.5px; line-height: 1; color: var(--faint); background: var(--bg); padding: 2px 4px 2px 0; font-variant-numeric: tabular-nums; }
.hl-gl-0 { border-top-color: var(--faint); }
.hl-part { position: relative; flex: var(--n) 1 0; min-width: 0; display: flex; flex-direction: column; }
.hl-cols { display: flex; }
.hl-col { position: relative; flex: 1 1 0; min-width: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.hl-col-up { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 118px; }
.hl-bar { display: block; width: calc(100% - 3px); max-width: 24px; height: calc(var(--h) * var(--u, 4px)); border-radius: 4px 4px 0 0; background: var(--hl-bar); transition: filter .15s; }
.hl-val { display: block; font-size: 12px; line-height: 1; color: var(--muted); margin: 0 -6px 4px; font-variant-numeric: tabular-nums; }
.hl-col-down { display: flex; flex-direction: column; align-items: center; gap: 2px; height: calc(var(--dots, 6) * 8px + 9px); padding-top: 5px; box-sizing: border-box; }
.hl-col-down i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--hl-dot); }
.hl-col:hover .hl-bar, .hl-col:focus-visible .hl-bar, .hl-col.is-on .hl-bar { filter: brightness(1.18) saturate(1.1); }
.hl-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.hl-part-name { display: block; border-top: 1px solid var(--line); margin: 0 1px; padding-top: 6px; min-height: 22px; font-size: 12.5px; line-height: 1.2; color: var(--muted); text-align: center; white-space: nowrap; }
.hl-tip { position: absolute; z-index: 3; left: 0; top: 0; max-width: 230px; padding: 8px 12px; background: var(--ink); color: var(--bg); border-radius: 8px; font-size: 13.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px var(--hl-shade); }
.hl-tip b { display: block; font-weight: 700; }
.hl-tip[hidden] { display: none; }
.hl-chart-note { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; }
.essay-content .hl-chart-note { margin-bottom: 0; }
.hl-nums { margin: 10px 0 0; font-size: 14.5px; }
.hl-nums summary { cursor: pointer; color: var(--muted); width: fit-content; }
.hl-nums summary:hover { color: var(--accent); }
.hl-nums table { border-collapse: collapse; margin: 12px 0 0; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; }
.hl-nums th, .hl-nums td { text-align: right; padding: 5px 0 5px 14px; border-bottom: 1px solid var(--line); font-weight: 400; }
.hl-nums th:first-child, .hl-nums td:first-child { text-align: left; padding-left: 0; }
.hl-nums thead th { color: var(--muted); font-size: 13px; }

/* ── The sheet: one long page of the book, marked up ── */
.hl-sheet {
  position: relative;
  container: hlsheet / inline-size;
  margin: 34px 0 0;
  padding: 4px 30px 30px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line), 0 10px 0 -5px var(--card), 0 10px 0 -4px var(--line), 0 22px 34px -22px var(--hl-shade);
}
.hl-sheet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, var(--hl-shade), transparent); opacity: .22; border-radius: 3px 0 0 3px; pointer-events: none; }
.essay-content h3.hl-run { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; font-family: 'Lora', serif; font-style: italic; font-weight: 400; font-size: 15.5px; line-height: 1.2; color: var(--muted); }
.hl-run::before, .hl-run::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.hl-entry { position: relative; padding: 26px 0 4px; scroll-margin-top: 90px; }
.essay-content h4.hl-title { margin: 0 62px 9px 0; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 21px; line-height: 1.32; color: var(--ink); }
.essay-content .hl-text { margin: 0 0 8px; font-size: 17.5px; line-height: 1.6; }
.essay-content blockquote.hl-quote { margin: 0 0 8px; padding: 0; border: 0; font-style: italic; font-size: 18.5px; line-height: 1.55; color: var(--body-ink); }
.hl-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 14.5px; color: var(--muted); }
.essay-content .hl-ref { margin: 0; font-size: 13.5px; font-style: italic; color: var(--faint); }
.hl-side { margin: 12px 0 0; padding-left: 34px; position: relative; }
.hl-side::before { content: ''; position: absolute; left: 2px; top: -6px; width: 26px; height: 30px; background: var(--hl-pen); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 26C13 25 7 18 6 4'/%3E%3Cpath d='M1.5 10L6 3.5l5.5 5.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 26C13 25 7 18 6 4'/%3E%3Cpath d='M1.5 10L6 3.5l5.5 5.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.essay-content .hl-note { margin: 0; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--hl-pen); transform: rotate(var(--tilt, -1.2deg)); transform-origin: 0 50%; overflow-wrap: anywhere; }
.essay-content .hl-note.is-long { font-size: 22.5px; line-height: 1.14; }
.essay-content .hl-see { display: inline-block; margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-underline-offset: 3px; }
.essay-content .hl-see:hover { color: var(--accent); }

/* A page flag: the dashed outline is where one would go; pressed, it is stuck on in its color. */
.hl-flag { display: none; }
.hl-js .hl-flag {
  display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  position: absolute; top: 24px; right: -40px; width: 70px; height: 34px; padding: 0 0 0 10px; margin: 0;
  border: 1.5px dashed var(--faint); border-radius: 3px; background: var(--card); color: var(--muted);
  font: 600 13px/1 'Lora', serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), border-color .15s, color .15s;
}
.hl-flag:hover { border-color: var(--accent); color: var(--ink); }
.hl-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hl-flag b { display: none; font: 700 17px/1 'Playfair Display', serif; }
.hl-flag.is-on { transform-origin: 100% 50%; border: 0; color: var(--hl-flag-ink); background: var(--fc); background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 62%, var(--card)) 0 34%, var(--fc) 34%); transform: rotate(-2.2deg); box-shadow: 0 2px 5px var(--hl-shade); }
.hl-flag.is-on span { display: none; }
.hl-flag.is-on b { display: block; margin-left: 30px; }
.hl-flag[data-n="1"], .hl-chip[data-n="1"] { --fc: var(--hl-f1); }
.hl-flag[data-n="2"], .hl-chip[data-n="2"] { --fc: var(--hl-f2); }
.hl-flag[data-n="3"], .hl-chip[data-n="3"] { --fc: var(--hl-f3); }
.hl-flag.is-new { animation: hl-stick .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hl-stick { from { transform: translate(-8px, -14px) rotate(-10deg) scale(1.12); opacity: .4; } to { transform: rotate(-2.2deg); opacity: 1; } }
.hl-friend { display: inline-block; margin: 0 0 8px; padding: 2px 9px; border: 1.5px solid var(--hl-pen); border-radius: 3px; font-size: 12.5px; font-weight: 600; color: var(--hl-pen); transform: rotate(-1deg); }
.hl-entry.is-pulse .hl-title mark { animation: hl-pulse 1.1s ease 2; }
@keyframes hl-pulse { 50% { background-size: 100% 96%; } }

/* The highlighter draws its stroke as each idea comes into view (script on, motion allowed). */
.hl-js .hl-entry:not(.is-seen) .hl-title mark { background-size: 0% 58%; }
.hl-js .hl-entry .hl-title mark { transition: background-size .55s cubic-bezier(.2, .7, .2, 1) .08s; }

@container hlsheet (min-width: 600px) {
  .hl-entry { display: grid; grid-template-columns: minmax(0, 1fr) 208px; column-gap: 30px; align-items: start; padding-right: 44px; }
  .essay-content h4.hl-title { margin-right: 0; }
  .hl-main { grid-column: 1; }
  .hl-side { grid-column: 2; margin: 2px 0 0; padding-left: 0; padding-top: 4px; }
  .hl-side::before { left: -30px; top: 10px; transform: rotate(-62deg); }
  .hl-entry.is-wide .hl-side { grid-column: 1; margin-top: 14px; padding-left: 34px; }
  .hl-entry.is-wide .hl-side::before { left: 2px; top: -6px; transform: none; }
  .hl-js .hl-flag { right: -42px; }
}

/* ── Your three: the result, and what a friend sent ── */
.hl-after { margin: 26px 0 0; font-size: 15.5px; color: var(--muted); }
.hl-yours, .hl-from { display: none; }
.hl-js .hl-yours { display: block; overflow: hidden; margin: 34px 0 0; padding: 24px 26px 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.essay-content .hl-yours h3, .essay-content .hl-from h3 { margin: 0 0 6px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); }
.hl-yours-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hl-stamp { display: none; flex: none; transform-origin: 100% 50%; margin: 2px 2px 0 0; padding: 6px 10px 4px; border: 2.5px solid currentColor; border-radius: 4px; color: #B4392C; opacity: .86; font: 800 12.5px/1.1 'Playfair Display', serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: rotate(5deg); }
[data-theme="dark"] .hl-stamp { color: #E58A7D; }
.hl-yours.is-done .hl-stamp { display: block; }
.hl-yours.is-stamped .hl-stamp { animation: hl-stamp .42s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
@keyframes hl-stamp { from { transform: rotate(-4deg) scale(1.9); opacity: 0; } 60% { opacity: .95; } to { transform: rotate(5deg) scale(1); opacity: .86; } }
.essay-content .hl-yours-sub { margin: 0; font-size: 16px; color: var(--muted); }
.essay-content ol.hl-picks { list-style: none; margin: 18px 0 0; padding: 0; }
.essay-content .hl-picks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.hl-chip { display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; margin-top: 2px; border-radius: 3px; background: var(--fc, var(--line)); color: var(--hl-flag-ink); font: 700 16px/1 'Playfair Display', serif; transform: rotate(-2deg); box-shadow: 0 1px 3px var(--hl-shade); }
.hl-chip.is-empty { background: none; border: 1.5px dashed var(--faint); box-shadow: none; color: var(--faint); }
.hl-picks a { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.hl-picks a:hover { color: var(--accent); }
.hl-picks span.hl-pick-line { display: block; margin-top: 3px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.hl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.hl-btn { padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 600 15px/1.2 'Lora', serif; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.hl-btn:hover { background: var(--ink); color: var(--bg); }
.hl-btn:active { transform: scale(.97); }
.hl-btn:focus-visible, .hl-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hl-btn-main { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.hl-btn-main:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.hl-link { padding: 6px 2px; border: 0; background: none; color: var(--muted); font: 400 15px/1.2 'Lora', serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hl-link:hover { color: var(--accent); }
.hl-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.hl-name input { flex: 0 1 200px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 400 16px/1.3 'Lora', serif; }
.hl-name input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hl-said { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.essay-content .hl-said { margin-bottom: 0; }
.hl-said:empty { display: none; }
.hl-sub { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.is-subscribed .hl-sub { display: none; }
.hl-js .hl-from.is-on { display: block; margin: 26px 0 0; padding: 22px 24px; border: 1.5px solid var(--hl-pen); border-radius: 3px; background: var(--card); }
.hl-from .hl-chip { background: none; border: 1.5px solid var(--hl-pen); color: var(--hl-pen); box-shadow: none; }

/* The strip that follows you down the page while you choose. */
.hl-tray { position: fixed; z-index: 40; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; box-sizing: border-box; padding: 9px 10px 9px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -8px var(--hl-shade), 0 2px 6px var(--hl-shade); font-family: 'Lora', serif; font-size: 15px; color: var(--ink); transform: translateY(160%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s; visibility: hidden; }
.hl-tray.is-on { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.hl-tray-flags { display: flex; gap: 4px; flex: none; }
.hl-tray-flags i { display: block; width: 12px; height: 20px; border-radius: 2px; border: 1.5px dashed var(--faint); box-sizing: border-box; }
.hl-tray-flags i.is-on { border: 0; box-shadow: 0 1px 2px var(--hl-shade); }
.hl-tray-flags i:nth-child(1).is-on { background: var(--hl-f1); }
.hl-tray-flags i:nth-child(2).is-on { background: var(--hl-f2); }
.hl-tray-flags i:nth-child(3).is-on { background: var(--hl-f3); }
.hl-tray.is-done .hl-tray-flags i { animation: hl-wave .5s ease both; }
.hl-tray.is-done .hl-tray-flags i:nth-child(2) { animation-delay: .08s; }
.hl-tray.is-done .hl-tray-flags i:nth-child(3) { animation-delay: .16s; }
@keyframes hl-wave { 40% { transform: translateY(-7px) rotate(-8deg); } }
.hl-tray-text { white-space: nowrap; padding-right: 6px; }
.hl-tray .hl-btn { padding: 9px 16px; font-size: 14.5px; white-space: nowrap; }
.hl-tray .hl-btn[hidden] { display: none; }

/* Out of flags: the trade-off. */
.hl-over { position: fixed; z-index: 180; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 14, 6, .55); }
.hl-dialog { width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow: auto; padding: 26px 26px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); font-family: 'Lora', serif; color: var(--body-ink); }
.hl-dialog h3 { margin: 0 0 8px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 25px; line-height: 1.2; color: var(--ink); }
.hl-dialog p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.55; }
.hl-swap { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 600 16.5px/1.3 'Playfair Display', serif; text-align: left; cursor: pointer; }
.hl-swap em { font: 400 14px/1.2 'Lora', serif; font-style: normal; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hl-swap:hover em, .hl-swap:focus-visible em { color: var(--accent); }
.hl-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hl-dialog .hl-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── The workbook ── */
.hl-wb { margin: 0 0 8px; }
.essay-content ol.hl-wb-list { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: wb; }
.essay-content .hl-wb-list > li { position: relative; margin: 0 0 30px; padding: 0 0 0 46px; counter-increment: wb; }
.hl-wb-list > li::before { content: counter(wb); position: absolute; left: 0; top: -3px; width: 34px; font: 600 30px/1.1 'Playfair Display', serif; color: var(--accent); text-align: left; }
.essay-content h3.hl-wb-title { margin: 0 0 6px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); }
.essay-content .hl-wb-q { margin: 0 0 6px; font-size: 17.5px; line-height: 1.6; }
.hl-wb-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.essay-content .hl-wb-meta .hl-ref { margin: 0; }
.essay-content .hl-wb-meta .hl-note { font-size: 23px; }
.hl-wb textarea { display: block; width: 100%; min-height: 94px; margin: 0; padding: 1px 14px 0; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: 3px; background: var(--card) linear-gradient(transparent 30px, var(--line) 30px, var(--line) 31px, transparent 31px) 0 0 / 100% 31px local; color: var(--ink); font: 400 17px/31px 'Lora', serif; }
.hl-wb textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hl-wb textarea::placeholder { color: var(--faint); font-style: italic; }
.hl-wb-foot { display: none; }
.hl-js .hl-wb-foot { display: block; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.hl-wb-count { margin: 0; font-size: 15.5px; color: var(--muted); }
.essay-content .hl-wb-count { margin-bottom: 0; }

.hl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 720px) {
  .hl-sheet { margin-left: -6px; margin-right: -6px; padding: 2px 16px 24px 20px; }
  .hl-js .hl-flag { right: -24px; top: 22px; width: 66px; height: 36px; }
  .essay-content .hl-text { font-size: 17.5px; line-height: 1.62; }
  .essay-content .hl-note { font-size: 25px; }
  .essay-content .hl-note.is-long { font-size: 22px; }
  .hl-plot { gap: 6px; padding-left: 20px; }
  .hl-part-name { font-size: 11.5px; }
  .hl-js .hl-yours { padding: 20px 18px 22px; }
  .hl-js .hl-from.is-on { padding: 18px; }
  .essay-content .hl-wb-list > li { padding-left: 0; }
  .hl-wb-list > li::before { position: static; display: block; width: auto; margin: 0 0 2px; font-size: 26px; }
  .hl-tray { font-size: 14.5px; gap: 10px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-js .hl-entry .hl-title mark { transition: none; }
  .hl-js .hl-entry:not(.is-seen) .hl-title mark { background-size: 100% 58%; }
  .hl-flag, .hl-tray, .hl-btn, .hl-bar { transition: none; }
  .hl-flag.is-new, .hl-entry.is-pulse .hl-title mark, .hl-yours.is-stamped .hl-stamp, .hl-tray.is-done .hl-tray-flags i { animation: none; }
}
@media print {
  .hl-tray, .hl-flag, .hl-yours, .hl-from, .hl-wb-foot { display: none !important; }
}