body {
  height: 100vh;
  display: flex; flex-direction: column;
}
body.popup { width: 380px; height: 600px; min-height: 0; }
/* Narrowest width: 320px. Below this, story names and plot points get cramped,
   so the panel stops shrinking and scrolls sideways instead of squashing.
   320px matches Chrome's own side-panel minimum and the usual small-screen baseline. */
html, body { min-width: 320px; }

.top {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 12px 6px;
}
.story-picker { position: relative; flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; }
.story-picker select {
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  border: none; background: transparent;
  font-family: var(--serif); font-size: calc(21px * var(--fs)); line-height: 1.2;
  padding: 2px 22px 2px 2px; border-radius: 6px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.story-picker select:hover { background-color: var(--accent-soft); }
.story-picker select option { font-family: var(--sans); font-size: calc(14px * var(--fs)); background: var(--surface); }

.menu {
  position: absolute; top: 36px; right: 0; z-index: 20;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 10px 30px #0002;
}
.menu button {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 7px 10px; border-radius: 6px;
}
.menu button:hover { background: var(--accent-soft); }
.menu .danger { color: var(--accent); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }

.tabs {
  display: flex; gap: 18px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  border: 0; background: none; padding: 8px 0 9px; margin-bottom: -1px;
  color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

main { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; }

/* progress */
.progress { margin-bottom: 10px; }
.progress-text { font-size: calc(13px * var(--fs)); color: var(--muted); }
.progress-text strong { color: var(--ink); font-size: calc(15px * var(--fs)); }
.bar { height: 6px; background: var(--band); border-radius: 99px; margin: 6px 0 10px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--done); border-radius: 99px; transition: width .3s ease; }
.filters { display: inline-flex; background: var(--band); border-radius: 8px; padding: 2px; }
.filters button {
  border: 0; background: none; padding: 3px 10px; border-radius: 6px; font-size: calc(12.5px * var(--fs)); color: var(--muted);
}
.filters button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #0001; }

/* items */
.items { list-style: none; margin: 0; padding: 0; }
.item {
  display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) auto; align-items: start; gap: 6px;
  padding: 4px 4px 4px 0; border-radius: 8px;
  position: relative;
}
.item:hover { background: var(--accent-soft); }
.item.dragging { opacity: .4; }
.item.drop-above::before, .item.drop-below::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 2px;
}
.item.drop-above::before { top: -1px; }
.item.drop-below::after { bottom: -1px; }

.grip {
  cursor: grab; color: var(--line-strong); padding-top: 3px; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s;
}
.item:hover .grip, .item:focus-within .grip { opacity: 1; }
.grip svg { width: 10px; height: 14px; }
.item .grip { padding-top: 4px; } /* handle level with the 18px box (box centre = 2px margin + 9px) */

.check {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.check:checked { background: var(--done); border-color: var(--done); }
.check:checked::after {
  content: ""; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.text {
  font-family: var(--serif); font-size: calc(15px * var(--fs)); line-height: 1.32;
  padding: 1px 2px; border-radius: 4px; outline: none; overflow-wrap: break-word; word-break: normal;
  min-width: 0; min-height: 1.35em;
}
.text:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.item.done .text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.note-wrap { grid-column: 3 / 5; position: relative; }
.note {
  display: block; font-size: calc(12.5px * var(--fs)); line-height: 1.45; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  padding: 5px 8px; resize: none; overflow: hidden; width: 100%;
}
.note-left { display: block; text-align: right; font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.note-left.at-limit { color: var(--accent); }
.note:focus { outline: none; border-color: var(--accent); }
.item-actions { display: flex; opacity: 0; transition: opacity .15s; }
.item:hover .item-actions, .item:focus-within .item-actions { opacity: 1; }
.item-actions .icon-btn { width: 24px; height: 24px; }
.item-actions .icon-btn svg { width: 14px; height: 14px; }
.item-actions .has-note { color: var(--accent); }
.has-note-flag .item-actions { opacity: 1; }

.heading {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: center;
  margin-top: 14px; padding: 3px 4px 3px 0; position: relative; border-radius: 8px;
}
.heading:first-child { margin-top: 0; }
.heading .text {
  font-size: calc(12px * var(--fs)); font-family: var(--sans); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.heading .count { font-size: calc(11.5px * var(--fs)); color: var(--muted); margin-right: 4px; }
.heading:hover { background: var(--accent-soft); }
.heading.dragging { opacity: .4; }
.heading.drop-above::before, .heading.drop-below::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent);
}
.heading.drop-above::before { top: -1px; }
.heading.drop-below::after { bottom: -1px; }
.heading:hover .grip { opacity: 1; }
.heading .item-actions { grid-column: 3; }
.heading:hover .item-actions { opacity: 1; }

.empty { color: var(--muted); font-family: var(--serif); font-style: italic; }

/* The add box sits right under the last plot point and moves down as the list grows.
   Once the list is taller than the panel, it sticks to the bottom so it's always reachable. */
.add {
  position: sticky; bottom: -16px; z-index: 2;
  display: flex; gap: 6px; margin: 6px -14px -16px; padding: 10px 14px 14px;
  background: var(--bg);
}
.add.stuck { border-top: 1px solid var(--line); }
.add input {
  flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); padding: 7px 10px;
}
.add input:focus { outline: none; border-color: var(--accent); }


/* dialog */
.dlg-backdrop {
  position: fixed; inset: 0; background: #0005; display: grid; place-items: center; z-index: 80; padding: 16px; /* above the pop-out (70) */
}
.dlg {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 16px; width: 100%; max-width: 320px; box-shadow: 0 20px 50px #0004;
}
.dlg h2 { font: 18px var(--serif); margin: 0 0 10px; }
.dlg p { margin: 0 0 12px; color: var(--muted); }
.dlg input { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: var(--bg); margin-bottom: 12px; }
.dlg .row { display: flex; justify-content: flex-end; gap: 6px; }

.toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 7px 14px; border-radius: 4px; font-size: calc(13px * var(--fs));
  z-index: 85; display: flex; gap: 10px; align-items: center; /* above the pop-out and dialogs */
}
.toast button { background: none; border: 0; color: var(--bg); text-decoration: underline; padding: 0; }

/* appearance buttons + popovers */
.ap-btns, .ap-btns-extra { display: flex; gap: 2px; flex-shrink: 0; }
.ap-trigger[aria-expanded="true"] { background: var(--accent-soft); color: var(--ink); }
.ap-trigger .aa { font-size: calc(14px * var(--fs)); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.ap-pop {
  position: fixed; z-index: 40; width: 280px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 4px 12px 12px; box-shadow: 0 12px 32px #0003;
}
.ap-label { font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.seg-ctl { display: flex; background: var(--band); border-radius: 8px; padding: 2px; }
.seg-ctl button { flex: 1; border: 0; background: none; padding: 5px 0; border-radius: 6px; color: var(--muted); font-size: calc(13px * var(--fs)); }
.seg-ctl button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #0001; }
.pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pal { display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 6px 0 4px; border-radius: 8px; font-size: calc(10.5px * var(--fs)); color: var(--muted); }
.pal:hover { background: var(--accent-soft); }
.pal .sw {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  box-shadow: inset 0 0 0 1px #0002;
}
.pal[aria-pressed="true"] { color: var(--ink); }
.pal[aria-pressed="true"] .sw { box-shadow: inset 0 0 0 1px #0002, 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.font-list { display: grid; gap: 5px; }
.font-opt {
  display: grid; gap: 0; text-align: left; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.font-opt:hover { border-color: var(--line-strong); }
.font-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fo-name { font-size: calc(12px * var(--fs)); color: var(--muted); }
.fo-sample { font-size: min(calc(17px * var(--fs)), 18.5px); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make the selected segment visible in every theme (surface can be close to band in dark themes) */
.seg-ctl button.on, .filters button.on { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ap-pop .seg-ctl { background: var(--bg); }


/* Roadmap tab (the wide timeline) */
#viewFull { margin: -12px -14px -16px; display: flex; flex-direction: column; min-height: 100%; }
.full-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.full-bar .spacer { flex: 1; }
.full-bar .seg { display: inline-flex; background: var(--band); border-radius: 8px; padding: 2px; }
.full-bar .seg button { border: 0; background: none; padding: 3px 9px; border-radius: 6px; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.full-bar .seg button.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.full-stage { overflow: auto; padding: 12px; flex: 0 1 auto; min-height: 0; }
.full-stage svg { display: block; border-radius: 10px; }
.full-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0 14px 12px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.full-hint .btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: calc(12.5px * var(--fs)); color: var(--ink); }
.full-hint .btn svg { width: 14px; height: 14px; }

/* The line under the Roadmap layout buttons that says what the chosen layout shows.
   Grey italic in each theme's own muted colour (4.5:1 or more on its background). */
.layout-note { margin: 0; padding: 8px 14px 0; font-style: italic; font-size: calc(12.5px * var(--fs)); line-height: 1.45; color: var(--muted); color: color-mix(in oklab, var(--muted) 82%, var(--ink)); max-width: 70ch; }
.po-note { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface); max-width: none; }
.studio-note { padding: 8px 20px; border-bottom: 1px solid var(--line); max-width: none; }
@media (max-width: 340px) { .layout-note { padding: 8px 10px 0; } }

/* Suggest-to-developer form */
.dlg.suggest { max-width: 340px; }
.dlg.suggest > p { font-size: calc(13px * var(--fs)); }
.sg-field { display: block; margin-bottom: 10px; }
.sg-top { display: flex; justify-content: space-between; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.sg-count { font-weight: 400; font-variant-numeric: tabular-nums; }
.dlg.suggest input, .dlg.suggest textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: var(--bg); margin: 0;
}
.dlg.suggest textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.dlg.suggest input:focus, .dlg.suggest textarea:focus { outline: none; border-color: var(--accent); }
.sg-opt { font-weight: 400; }
.sg-hint { display: block; margin-top: 4px; font-size: calc(12px * var(--fs)); line-height: 1.4; color: var(--muted); }
.dlg.suggest input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sg-error { color: var(--accent) !important; font-size: calc(12.5px * var(--fs)); margin: 0 0 10px !important; }
.btn:disabled { opacity: .6; cursor: default; }

/* "Plotypus button opens" setting in the ⋯ menu */
.menu-label { font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 2px; }
.menu [role="menuitemradio"] { display: flex; align-items: center; gap: 8px; }
.menu [role="menuitemradio"]::before { content: ""; width: 14px; flex-shrink: 0; text-align: center; color: var(--accent); font-weight: 700; }
.menu [role="menuitemradio"][aria-checked="true"]::before { content: "✓"; }

/* Sync across devices sheet */
.dlg.sync-sheet { max-width: 360px; max-height: calc(100% - 16px); overflow-y: auto; padding: 14px 16px 16px; }
.sy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sy-head h2 { margin: 0; }
.dlg .sy-lede { margin: 4px 0 14px; font-size: calc(13.5px * var(--fs)); line-height: 1.45; }
.sy-label { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sy-field { position: relative; }
.dlg .sy-field input {
  margin: 0; padding: 11px 44px 11px 12px; font: 600 calc(15px * var(--fs)) ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .05em; text-transform: uppercase; background: var(--band); border-color: var(--line);
}
.dlg .sy-field input::placeholder { text-transform: none; letter-spacing: .03em; font-weight: 400; color: var(--muted); opacity: .7; }
.dlg .sy-field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.dlg .sy-field input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sy-field .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.dlg .sy-status { margin: 8px 0 14px; font-size: calc(13px * var(--fs)); color: var(--muted); line-height: 1.4; min-height: 1.4em; }
.dlg .sy-status.bad { color: var(--accent); }
.sy-wide { display: block; width: 100%; padding: 11px 12px; font-weight: 600; margin-bottom: 8px; }
.sy-link {
  display: block; margin: 4px auto 0; padding: 6px 10px; border: 0; background: none; border-radius: 6px;
  color: var(--muted); font-weight: 600; font-size: calc(13.5px * var(--fs));
}
.sy-link:hover { color: var(--ink); background: var(--accent-soft); }
.dlg .sy-fine { margin: 14px 0 0; font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--muted); }
.sy-browser { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: calc(13px * var(--fs)); }
.sy-browser small { display: block; color: var(--muted); font-size: calc(12px * var(--fs)); line-height: 1.45; margin-top: 2px; }
.sy-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.sy-switch input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 2px 0 0;
  width: 36px; height: 20px; border-radius: 99px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s;
}
.sy-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.sy-switch input:checked { background: var(--accent); }
.sy-switch input:checked::after { transform: translateX(16px); }
.sy-switch input:disabled { opacity: .45; cursor: default; }

/* Text size slider in the Aa popover (fixed sizes, so it doesn't jump while dragging) */
.size-row { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.size-row .sz-a { color: var(--muted); line-height: 1; font-weight: 600; }
.size-row .sz-a.small { font-size: 12px; }
.size-row .sz-a.big { font-size: 19px; }
.size-track { position: relative; flex: 1; height: 28px; display: flex; align-items: center; }
.size-ticks { position: absolute; left: 9px; right: 9px; top: 50%; height: 0; display: flex; justify-content: space-between; pointer-events: none; }
.size-ticks i { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--line-strong); }
.size-ticks i.on { background: var(--accent); }
.size-range { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; height: 28px; background: none; position: relative; z-index: 1; cursor: pointer; }
.size-range::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.size-range::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.size-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px #0003; }
.size-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px #0003; }
.size-range:focus-visible { outline: none; }
.size-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px #0003; }
.size-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px #0003; }

/* ---------- Narrow widths ----------
   The panel reflows instead of clipping: tighter gutters, tabs on one line,
   compact header buttons, and a shorter hint in the add box. */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 340px) {
  .top { gap: 2px; padding: 10px 8px 4px; }
  .top .icon-btn { width: 28px; height: 28px; }
  .tabs { gap: 14px; padding: 0 10px; }
  main { padding: 10px 10px 16px; }
  .add { margin: 6px -10px -16px; padding: 10px 10px 14px; }
  .add .btn { padding-left: 12px; padding-right: 12px; }
  #viewFull { margin: -10px -10px -16px; }
  .full-bar { padding: 8px 10px; }
  .item { gap: 4px; grid-template-columns: 12px 22px minmax(0, 1fr) auto; }
}

/* "?" help sheet */
.dlg.help-sheet { max-width: 380px; max-height: calc(100% - 16px); overflow-y: auto; padding-top: 12px; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.hp-head h2 { margin: 0; }
.hp-sec { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.hp-head + .hp-sec { border-top: 0; }
.hp-sec h3 { font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.dlg .hp-sec p { margin: 0 0 8px; color: var(--ink); font-size: calc(13.5px * var(--fs)); line-height: 1.45; }
.hp-sec ul { margin: 0 0 8px; padding-left: 18px; font-size: calc(13.5px * var(--fs)); line-height: 1.45; }
.hp-sec li { margin-bottom: 5px; }
.hp-sec li::marker { color: var(--muted); }
.hp-sec code { font-size: .92em; background: var(--band); padding: 1px 4px; border-radius: 4px; }
.hp-warn { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; padding: 10px 12px 2px; margin: 6px 0 10px; }
.hp-warn h3 { color: var(--accent); }
.hp-warn + .hp-sec { border-top: 0; }
.help-sheet .row { flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 340px) { .dlg-backdrop { padding: 8px; } .dlg.help-sheet { padding: 10px 12px 12px; } }

/* Logo: a small mark beside the story name, and a bigger one on the help sheet */
.top .brand-btn { all: unset; display: inline-flex; flex-shrink: 0; margin-right: 2px; border-radius: 7px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.top .brand-btn:hover { transform: scale(1.06); }
.top .brand-btn:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.top .brand { width: 24px; height: 24px; display: block; border-radius: 6px; }
/* The logo is the only way to "About Plotypus", so it stays at every width; narrow panels get a slightly smaller one. */
@media (max-width: 380px) { .top .brand { width: 22px; height: 22px; } }
.hp-head .hp-logo { width: 34px; height: 34px; flex-shrink: 0; }
.hp-head h2 { flex: 1; }

/* Required-name message in the new story / rename dialog */
.dlg .ask-err { color: var(--accent); font-size: calc(12.5px * var(--fs)); margin: -6px 0 10px; }
.dlg input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Timeline tab: edit moments in place ---------- */
.tl-edit .tl-row { border-radius: 8px; }
.tl-edit .tl-event { padding-right: 2px; }
.tl-edit .tl-line { display: flex; align-items: flex-start; gap: 4px; }
.tl-edit .tl-body { flex: 1; min-width: 0; }
.tl-edit [contenteditable] { outline: none; border-radius: 4px; padding: 0 2px; margin: 0 -2px; word-break: break-word; }
.tl-edit [contenteditable]:hover { background: var(--accent-soft); }
.tl-edit [contenteditable]:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.tl-edit .tl-what { min-height: 1.35em; cursor: text; }
/* An empty "when" stays out of the way until you hover or edit the moment. */
.tl-edit .tl-when:empty { display: none; }
.tl-edit .tl-row:hover .tl-when:empty, .tl-edit .tl-row:focus-within .tl-when:empty { display: block; min-width: 4em; }
.tl-edit .tl-when:empty::before { content: attr(data-ph); color: var(--muted); font-weight: 500; letter-spacing: .04em; opacity: .75; }
/* Row buttons float over the top-right corner on hover, so they never squeeze the text. */
.tl-edit .tl-row { position: relative; }
.tl-edit .tl-actions {
  position: absolute; top: -14px; right: 0; z-index: 3; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1px 2px;
  box-shadow: 0 2px 8px #0002; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.tl-edit .tl-row:hover > .tl-line > .tl-actions, .tl-edit .tl-row:focus-within > .tl-line > .tl-actions,
.tl-edit .tl-section:hover > .tl-actions, .tl-edit .tl-section:focus-within > .tl-actions { opacity: 1; pointer-events: auto; }
.tl-edit .tl-actions .icon-btn { width: 24px; height: 24px; }
.tl-edit .tl-actions .icon-btn svg { width: 14px; height: 14px; }
.tl-edit .tl-actions .has-note { color: var(--accent); }
.tl-edit .tl-star[aria-pressed="true"] { color: var(--dot); opacity: 1; }
.tl-edit .tl-star[aria-pressed="true"] svg { fill: currentColor; }
.tl-edit .tl-grip { opacity: 1; cursor: grab; padding: 0 5px; display: inline-grid; place-items: center; height: 24px; color: var(--muted); }
.tl-edit .tl-event.dragging { opacity: .4; }
.tl-edit .drop-above { box-shadow: 0 -2px 0 var(--accent); }
.tl-edit .drop-below { box-shadow: 0 2px 0 var(--accent); }
.tl-edit .tl-section { display: flex; align-items: center; gap: 4px; }
.tl-edit .tl-section .tl-sec-title { background: var(--bg); padding-right: 8px; position: relative; }
.tl-edit .tl-section .tl-actions { top: -4px; }
.tl-edit .tl-section.dragging { opacity: .4; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* Character chips: small rectangles with softly rounded corners, matching the big-moment
   highlight, with the name centred in them (the × to remove one appears on hover, after the name). */
.tl-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  padding: calc(5px * var(--fs)) 8px calc(4px * var(--fs)); border-radius: 5px; line-height: 1;
  font-size: calc(12px * var(--fs)); color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
}
/* Name chips centre the letters you see, not the line around them: most fonts leave more room
   below the letters (for g, y, p) than above, so a plainly centred name sits high. Where the
   browser can trim a line to its capital letters (Chrome, Edge, Safari), the name is trimmed to
   cap height and baseline and then centred, with even space above and below; elsewhere the
   padding above is a pixel bigger, which comes out about the same. Use this for any name chip. */
.tl-chip > span:first-child { display: block; line-height: 1; }
@supports (text-box: trim-both cap alphabetic) {
  .tl-chip { padding: calc(6px * var(--fs)) 8px; }
  .tl-chip > span:first-child { text-box: trim-both cap alphabetic; }
}
.tl-chip button { border: 0; background: none; color: inherit; padding: 0; width: 16px; height: 16px; display: none; place-items: center; border-radius: 3px; opacity: .6; margin: 0 -4px 0 0; }
.tl-row:hover .tl-chip button, .tl-row:focus-within .tl-chip button { display: grid; }
.tl-chip button:hover, .tl-chip button:focus-visible { opacity: 1; background: color-mix(in srgb, var(--c) 22%, transparent); }
.tl-chip button svg { width: 10px; height: 10px; }
.tl-tag-input {
  width: 8em; border: 1px solid var(--accent); border-radius: 4px; padding: 1px 8px;
  background: var(--surface); font-size: calc(12.5px * var(--fs)); outline: none;
}
.tl-edit .tl-note { margin-top: 6px; display: block; }
.tl-add {
  position: sticky; bottom: -16px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px -14px -16px; padding: 10px 14px 14px; background: var(--bg);
}
.tl-add input { min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 7px 10px; }
.tl-add input:focus { outline: none; border-color: var(--accent); }
.tl-add .tl-add-when { flex: 0 1 6.5em; }
.tl-add .tl-add-what { flex: 1 1 9em; }
.tl-add .tl-add-act { font-size: calc(13px * var(--fs)); }
@media (max-width: 340px) {
  .tl-add { margin: 6px -10px -16px; padding: 10px 10px 14px; }
}
/* Touch screens have no hover: show the buttons as a row under each moment instead. */
@media (hover: none) {
  .tl-edit .tl-actions { position: static; opacity: 1; pointer-events: auto; box-shadow: none; border: 0; background: none; margin-top: 2px; }
  .tl-edit .tl-line { flex-wrap: wrap; }
  .tl-chip button { display: grid; }
}

/* Compact rows: the hover buttons overhang the row a little instead of setting its height,
   so a one-line plot point is only as tall as its text plus a small gap. */
.item .item-actions { margin: -3px 0; }
.item .note { margin-top: 2px; }

/* Ko-fi link at the bottom of the "?" sheet */
.dlg .hp-support { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.hp-kofi { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: calc(13px * var(--fs)); }
.hp-kofi svg { width: 16px; height: 16px; color: var(--accent); }

/* Act / chapter headings sit on a soft band of the accent colour so groups are easy to spot.
   Text switches to full ink for contrast on the tint; corners stay nearly square. */
.heading {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 2px;
}
.heading .text { color: var(--ink); }
.heading:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.heading .grip { color: var(--muted); }

/* ---------- Pop out: the whole timeline over the entire window ---------- */
html.po-open, html.po-open body { overflow: hidden; }
.po-backdrop {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
}
.po-bar {
  display: grid; grid-template-columns: minmax(0, max-content) 1fr auto; grid-template-areas: "title tools close";
  align-items: center; gap: 8px 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.po-title { grid-area: title; margin: 0; font: calc(20px * var(--fs))/1.2 var(--serif); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-tools { grid-area: tools; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.po-tools .po-png { margin-left: auto; }
.po-bar .seg { display: inline-flex; background: var(--band); border-radius: 8px; padding: 2px; }
.po-bar .seg button { border: 0; background: none; padding: 4px 11px; border-radius: 6px; color: var(--muted); font-size: calc(13px * var(--fs)); min-width: 30px; }
.po-bar .seg button.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.po-bar .po-zoom { font-variant-numeric: tabular-nums; min-width: 50px !important; }
/* Narrow screens: title and Close on top, the controls on a row underneath. */
@media (max-width: 640px) {
  .po-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "tools tools"; padding: 8px 12px; }
}
.po-close { grid-area: close; display: inline-flex; align-items: center; gap: 6px; }
.po-close svg { width: 15px; height: 15px; }
.po-stage { flex: 1; min-height: 0; overflow: auto; padding: 16px; outline: none; }
.po-stage svg { display: block; border-radius: 10px; }
/* When it fits, centre the drawing in the window. */
.po-stage.po-fit { display: grid; place-items: center; }

/* ---------- Butterfly Effect tab: an event and the effects it sets off ---------- */
.bf-list, .bf-children { list-style: none; margin: 0; padding: 0; }
.bf-children { padding-left: 22px; }
.bf-event + .bf-event { margin-top: 12px; }
.bf-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: start;
  padding: 3px 4px 3px 2px; border-radius: 6px; position: relative;
}
.bf-row:hover { background: var(--accent-soft); }
.bf-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); margin: calc(0.68em * var(--fs)) auto 0; }
.bf-event > .bf-row .bf-dot { width: 8px; height: 8px; background: var(--accent); margin-top: calc(0.62em * var(--fs)); }
.bf-text {
  font-family: var(--serif); font-size: calc(15px * var(--fs)); line-height: 1.35;
  padding: 1px 2px; border-radius: 4px; outline: none; overflow-wrap: break-word; word-break: normal; min-width: 0; min-height: 1.35em; cursor: text;
}
.bf-event > .bf-row .bf-text { font-weight: 600; }
.bf-text:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.bf-text:empty::before { content: attr(data-ph); color: var(--muted); opacity: .75; font-weight: 400; }
/* The ↳ and bin buttons have their own spot at the end of the line (outside the text), so they
   never cover what you're writing. They show on hover or while you're on the line, and fade
   out while you type (back after a short pause, when the mouse moves, or when you Tab to them). */
.bf-actions {
  grid-column: 3; grid-row: 1; display: flex; margin: -2px 0;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bf-row:hover .bf-actions, .bf-row:focus-within .bf-actions { opacity: 1; pointer-events: auto; }
.bf-row.typing .bf-actions { opacity: 0; pointer-events: none; }
.bf-row.typing .bf-actions:focus-within { opacity: 1; pointer-events: auto; }
.bf-actions .icon-btn { width: 24px; height: 24px; }
.bf-actions .icon-btn svg { width: 14px; height: 14px; }
/* The greyed-out chain under a fresh event: Effect 1, Effect 2, Effect 3, each a step further in. */
.bf-ghost {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0 0 2px; margin: 0;
  color: var(--muted); opacity: .6; cursor: text; border-radius: 6px;
}
.bf-ghost:hover, .bf-ghost:focus-visible { opacity: .95; background: var(--accent-soft); }
.bf-ghost-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start; padding: 3px 0 3px 2px;
  font-family: var(--serif); font-size: calc(15px * var(--fs)); line-height: 1.35;
}
.bf-ghost-row[data-depth="1"] { margin-left: 22px; }
.bf-ghost-row[data-depth="2"] { margin-left: 44px; }
.bf-ghost-row[data-depth="3"] { margin-left: 66px; }
.bf-ghost .bf-dot { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.bf-hint { margin: 14px 0 0; font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.45; }
@media (hover: none) {
  /* Touch screens have no hover: keep the buttons at the end of each line instead. */
  .bf-actions { opacity: 1; pointer-events: auto; margin: -3px 0; }
  .bf-hint { display: none; } /* keyboard tips don't apply on touch screens */
}
@media (max-width: 340px) {
  .bf-children { padding-left: 16px; }
  .bf-ghost-row[data-depth="2"] { margin-left: 38px; }
  .bf-ghost-row[data-depth="3"] { margin-left: 54px; }
  .bf-ghost-row[data-depth="1"] { margin-left: 16px; }
}

/* Four tabs: tighten them on narrow panels so all four stay visible down to 320px. */
/* (The labels stop growing past a point here, even at the largest text size, so none get cut off.) */
@media (max-width: 440px) {
  .tabs { gap: 13px; }
  .tabs button { font-size: min(calc(14px * var(--fs)), 15.5px); }
}
@media (max-width: 380px) {
  .tabs { gap: 11px; }
  .tabs button { font-size: min(calc(13.5px * var(--fs)), 14px); }
}
@media (max-width: 340px) {
  .tabs { gap: 8px; padding: 0 8px; }
  .tabs button { font-size: min(calc(13px * var(--fs)), 13px); }
}

/* Butterfly Effect: "N left" countdown, shown only near the 280-character limit. */
.bf-left { display: block; text-align: right; font-size: calc(11px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; }
.bf-left.at-limit { color: var(--accent); }
.bf-row .bf-left { grid-column: 2; margin-top: -1px; }
.bf-add { flex-wrap: wrap; }
.bf-add .bf-left { flex-basis: 100%; margin-top: -2px; }

/* Cloud button (top right): opens "Sync across devices" and shows its status. */
.sync-btn[data-state="off"] { color: var(--muted); opacity: .8; }
.sync-btn[data-state="ok"] { color: var(--done); }
.sync-btn[data-state="error"] { color: var(--accent); }
.sync-btn[data-state="busy"] .sy-d1, .sync-btn[data-state="busy"] .sy-d2, .sync-btn[data-state="busy"] .sy-d3 { animation: sy-pulse 1s infinite ease-in-out; }
.sync-btn .sy-d2 { animation-delay: .15s !important; }
.sync-btn .sy-d3 { animation-delay: .3s !important; }
@keyframes sy-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sync-btn[data-state="busy"] circle { animation: none; } }

/* "Heads up!" delete question */
.dlg.del-dlg { max-width: 300px; }
.dlg.del-dlg h2 { margin-bottom: 6px; }
.dlg.del-dlg p { color: var(--muted); font-size: calc(14px * var(--fs)); line-height: 1.45; margin-bottom: 16px; word-break: break-word; }
.dlg.del-dlg .row .btn { min-width: 72px; }

/* Undo / redo buttons in the header: only when the panel has room (they're always in the ⋯ menu). */
.top .hist-btns { display: none; gap: 2px; flex-shrink: 0; }
@media (min-width: 440px) { .top .hist-btns { display: flex; } }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.menu button:disabled { opacity: .45; cursor: default; background: none; }
.menu .kbd { float: right; color: var(--muted); font-size: calc(12px * var(--fs)); margin-left: 16px; }

/* About Plotypus (click the logo) */
.dlg.about-dlg { max-width: 360px; }
.about-dlg .ab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.about-dlg .ab-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; }
.about-dlg h2 { margin: 0 0 2px; font-size: 20px; }
.dlg.about-dlg .ab-ver { margin: 0; font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.4; }
.dlg.about-dlg .ab-ver span { display: block; }
.dlg.about-dlg > p { color: var(--ink); font-size: calc(13.5px * var(--fs)); line-height: 1.5; margin: 0 0 10px; }
.dlg.about-dlg .row { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .top .brand-btn { transition: none; } .top .brand-btn:hover { transform: none; } }

/* Always Newsreader, whatever font is picked under Aa: the story title (and its list of stories,
   and the pop-out's title) and the "Plotypus" name in About. --brand-font is in appearance.css. */
.top .story-picker select, .top .story-picker select option, .po-title, .dlg.about-dlg h2 { font-family: var(--brand-font); font-size-adjust: none; }
.dlg.about-dlg .ab-quote { margin: 16px 8px 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.dlg.about-dlg .ab-quote blockquote { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.45; color: var(--ink); text-wrap: balance; }
.dlg.about-dlg .ab-quote figcaption { margin-top: 6px; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.dlg.about-dlg .ab-quote cite { font-style: italic; }

/* "Check if your idea has been suggested" link, and the Feature ideas list (ideas.js) */
.sg-ideas-link {
  display: block; width: 100%; margin: 12px 0 0; padding: 10px 2px 0; border: 0; border-top: 1px solid var(--line);
  background: none; text-align: left; color: var(--accent); font-size: calc(13px * var(--fs)); line-height: 1.4;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.sg-ideas-link:hover { text-decoration-color: currentColor; }
.dlg.suggest { max-height: calc(100% - 16px); overflow-y: auto; }
.id-head { display: flex; align-items: center; gap: 4px; margin: -4px 0 4px -6px; }
.id-head h2 { margin: 0; }
.dlg .id-lede { font-size: calc(13px * var(--fs)); margin: 0 0 10px; }
.dlg input.id-search { margin: 0 0 10px; background: var(--bg); }
.id-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.id-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font-size: calc(12.5px * var(--fs)); line-height: 1.3; text-align: left;
}
.id-chip:hover { border-color: var(--accent); }
.id-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.id-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.dlg .id-hint { margin: 0 0 8px; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.id-list { min-height: 60px; }
.dlg .id-empty { margin: 8px 0; font-style: italic; font-size: calc(13.5px * var(--fs)); }
.id-group { margin: 0 0 12px; }
.id-group h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.id-group ul { list-style: none; margin: 0; padding: 0; }
.id-group li { padding: 6px 0 6px 18px; border-bottom: 1px solid var(--line); }
.id-group li:last-child { border-bottom: 0; }
.id-name { display: block; font-size: calc(14.5px * var(--fs)); line-height: 1.35; color: var(--ink); }
.id-note { display: block; margin-top: 2px; font-size: calc(12.5px * var(--fs)); line-height: 1.45; color: var(--muted); }
.id-foot { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Status rings. Each colour is darker on light themes and lighter on dark ones, so the ring
   stands out (3:1 or more) on every theme; the status name always sits beside it. */
.id-ring { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--st); }
:root { --st-considering: #b25600; --st-planned: #8a3db6; --st-done: #217a3c; --st-unlikely: #7d5a28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-considering: #f2a65a; --st-planned: #cf98f2; --st-done: #6fd48b; --st-unlikely: #c9a46a; } }
:root[data-theme="dark"] { --st-considering: #f2a65a; --st-planned: #cf98f2; --st-done: #6fd48b; --st-unlikely: #c9a46a; }
.id-ring[data-st="considering"] { --st: var(--st-considering); }
.id-ring[data-st="planned"] { --st: var(--st-planned); }
.id-ring[data-st="done"] { --st: var(--st-done); }
.id-ring[data-st="unlikely"] { --st: var(--st-unlikely); }

/* Grey tips on an empty tab (a new story): a short reminder of how things work, in the same
   shapes as the real thing. Not data: they disappear once something is added. Text stays at the
   muted colour (readable contrast); only the shapes are faded and dashed. */
.ghost-tips { color: var(--muted); font-family: var(--serif); cursor: text; padding: 2px 0 4px; border-radius: 8px; }
.ghost-tips:hover { background: var(--accent-soft); }
.gh-row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 4px 4px 20px; font-size: calc(15px * var(--fs)); line-height: 1.35; font-style: italic; }
.gh-head, .gh-act {
  padding: 5px 10px; margin: 0 0 4px; border: 1px dashed var(--line-strong); border-radius: 4px;
  font-family: var(--sans); font-style: normal; font-weight: 600; font-size: calc(12px * var(--fs)); letter-spacing: .08em; text-transform: uppercase;
}
.gh-act { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(14px * var(--fs)); }
.gh-aside { font-weight: 400; letter-spacing: 0; text-transform: none; font-style: italic; font-family: var(--serif); }
.gh-check { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; border-radius: 5px; border: 1.5px dashed var(--line-strong); }
.gh-check.on { border-style: solid; border-color: var(--done); background: color-mix(in srgb, var(--done) 35%, transparent); }
.gh-bf { padding-left: 2px; }
.gh-bf b { font-weight: 600; }
.gh-bf .bf-dot { flex-shrink: 0; width: 7px; height: 7px; margin: calc(0.55em * var(--fs)) 0 0; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.gh-bf .gh-dot0 { width: 9px; height: 9px; }
.gh-moment { flex-direction: column; gap: 0; padding-left: 22px; border-left: 2px dashed var(--line-strong); margin-left: 7px; padding-top: 4px; padding-bottom: 8px; }
.gh-when { font-family: var(--sans); font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ghost-tips .gh-foot { margin: 8px 0 0; padding: 0 4px; font-size: calc(12.5px * var(--fs)); font-style: normal; font-family: var(--sans); line-height: 1.45; }

/* Dragging with a finger (touchdrag.js): the handle doesn't scroll the page, and on touch
   screens (no hover) the plot point handles are always shown, with a bigger area to press. */
.grip, .tl-grip { touch-action: none; -webkit-user-select: none; user-select: none; }
@media (hover: none) {
  .item, .heading { grid-template-columns: 24px 22px minmax(0, 1fr) auto; }
  .heading { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .grip { opacity: 1; min-height: 28px; align-self: stretch; padding-top: 4px; }
  /* On a plot point the handle sits level with the box, at the top of the row, not in the
     middle of it (a long plot point used to push it far below the box). */
  .item .grip { align-self: start; padding-top: 0; margin-top: -3px; }
  .tl-edit .tl-grip { min-width: 32px; height: 32px; }
}

/* "Got 2 minutes? :)" (feedback.js): the light bulb glows and a bubble points at it. */
.icon-btn.fb-glow { color: var(--accent); background: var(--accent-soft); animation: fb-pulse 2.2s ease-in-out infinite; }
@keyframes fb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  60% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .icon-btn.fb-glow { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
.fb-bubble {
  position: fixed; z-index: 45; display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px 4px;
  background: var(--ink); color: var(--bg); border-radius: 10px; box-shadow: 0 8px 24px #0003;
  animation: fb-pop .25s ease-out;
}
.fb-bubble::before {
  content: ""; position: absolute; top: -6px; left: calc(var(--arrow-x, 50%) - 6px);
  border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink);
}
.fb-bubble button { border: 0; background: none; color: inherit; border-radius: 8px; }
.fb-bubble-go { padding: 6px 8px; font-size: calc(13.5px * var(--fs)); font-weight: 600; white-space: nowrap; }
.fb-bubble-x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; opacity: .75; }
.fb-bubble-x svg { width: 14px; height: 14px; }
.fb-bubble button:hover, .fb-bubble button:focus-visible { background: color-mix(in srgb, var(--bg) 18%, transparent); opacity: 1; }
.fb-bubble :focus-visible { outline: 2px solid var(--bg); outline-offset: -2px; }
@keyframes fb-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fb-bubble { animation: none; } }

/* The feedback card */
.dlg.fb-card { position: relative; max-width: 340px; padding-top: 18px; text-align: center; max-height: calc(100% - 16px); overflow-y: auto; }
.fb-card .fb-x { position: absolute; top: 6px; right: 6px; }
.dlg .fb-msg { margin: 0 18px 14px; color: var(--ink); font-family: var(--serif); font-size: calc(15.5px * var(--fs)); line-height: 1.5; text-wrap: pretty; }
/* Half stars, like Letterboxd: each star is an empty outline with a gold copy on top, clipped to
   none, half or all of its width (--fill is how much is cut off the right). */
.fb-stars { display: flex; justify-content: center; gap: 2px; width: max-content; margin: 0 auto; border-radius: 12px; cursor: pointer; touch-action: manipulation; }
.fb-stars:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb-star { position: relative; display: grid; place-items: center; width: 44px; height: 44px; transition: transform .12s ease; }
.fb-star svg { width: 32px; height: 32px; fill: color-mix(in srgb, var(--line-strong) 45%, transparent); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.fb-fill { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inset(0 var(--fill, 100%) 0 0); pointer-events: none; }
.fb-fill svg { fill: #e8b10b; stroke: #9a6c00; }
.fb-star:hover { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .fb-star { transition: none; } .fb-star:hover { transform: none; } }
.dlg .fb-meaning { margin: 4px 0 12px; min-height: 1.4em; color: var(--muted); font-size: calc(13px * var(--fs)); }
.fb-more { display: block; text-align: left; margin-bottom: 10px; }
.fb-more textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: var(--bg); resize: vertical; line-height: 1.45; }
.fb-more textarea:focus { outline: none; border-color: var(--accent); }
.fb-card .sg-error { text-align: left; }
.fb-card .row { justify-content: center; }
.fb-never {
  display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none; border-radius: 6px;
  color: var(--muted); font-size: calc(12.5px * var(--fs)); text-decoration: underline; text-underline-offset: 2px;
}
.fb-never:hover { color: var(--ink); }

/* Feedback card: "You can quote me", the name box, and the store-review step */
.fb-quote { text-align: left; margin: -2px 0 10px; }
.fb-check { display: flex; align-items: flex-start; gap: 8px; font-size: calc(13px * var(--fs)); line-height: 1.4; color: var(--ink); cursor: pointer; }
.fb-check input { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.dlg input.fb-name { margin: 8px 0 0; font-size: calc(13px * var(--fs)); background: var(--bg); }
.dlg .fb-review { margin: 0 12px 16px; color: var(--ink); font-size: calc(14px * var(--fs)); line-height: 1.5; }
.fb-demo { display: block; margin-top: 4px; font-size: calc(12.5px * var(--fs)); color: var(--muted); font-family: var(--sans); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* About Plotypus: the public rating line */
.dlg.about-dlg .ab-rating { margin: 0 0 10px; font-size: calc(13.5px * var(--fs)); color: var(--ink); }
.ab-rating .ab-stars { color: #b8860b; }
:root[data-theme="dark"] .ab-rating .ab-stars { color: #f0c040; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-rating .ab-stars { color: #f0c040; } }
.ab-rating a { color: var(--accent); }
.ab-sample { color: var(--muted); font-size: .92em; }

/* "On a Mac? Keep Plotypus in your Dock" (help.js): a small tip strip above the tabs' content,
   in the web app in Safari on a Mac. Ink on the accent tint keeps body-text contrast. */
.mac-tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  position: relative; margin: 8px 12px 0; padding: 7px 38px 7px 12px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: calc(13px * var(--fs)); line-height: 1.35; color: var(--ink);
}
.mac-tip p { flex: 1 1 12em; margin: 0; min-width: 0; }
.mac-tip .btn { padding: 4px 10px; font-size: calc(12.5px * var(--fs)); white-space: nowrap; }
.mac-tip .icon-btn { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; }
.mac-tip .icon-btn svg { width: 14px; height: 14px; }
@media (max-width: 340px) { .mac-tip { margin: 6px 8px 0; } }
/* "Keep it handy": the thing to tap or choose is highlighted like a highlighter pen, in the same
   yellow as major beats (ink on it stays 8.8:1 or more in every theme). It wraps cleanly over
   two lines, and keeps a visible edge in Windows high-contrast mode. */
.hp-step {
  background: var(--major-bg); color: var(--ink); font-weight: 600;
  padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--major-edge);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: normal;
}
@media (forced-colors: active) { .hp-step { border: 1px solid CanvasText; } }
.hp-handy ul { padding-left: 18px; padding-right: 6px; }
.hp-handy li { margin-bottom: 7px; line-height: 1.6; }
.dlg .hp-handy .hp-note { font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.dlg .hp-handy .hp-note strong { color: var(--ink); }
/* Opened from the Mac tip: a ring around the Mac line so the eye lands on it. */
#hpMac.hp-flash { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Timeline act / chapter headings: on a soft band of the theme's accent, like the act headings in
   Plot points, so each act stands out from the moments under it. The band is solid (mixed into the
   page colour, not see-through), so it neatly covers the timeline's line where it crosses. Text is
   full ink on it for contrast; the italic stays so it still reads as a heading, not a moment. */
.tl-section {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-radius: 0; padding: 4px 8px; color: var(--ink);
}
.tl-section span, .tl-edit .tl-section .tl-sec-title { background: none; }
.tl-edit .tl-section:hover, .tl-edit .tl-section:focus-within { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.tl-edit .tl-section .tl-sec-title { flex: 1; min-width: 0; }
.tl-edit .tl-section.tl-row { border-radius: 0; } /* square corners, also on the editable rows */

/* A required box's label: the name, then a red asterisk (screen readers hear "required").
   The red is darker on light themes and lighter on dark ones, 4.5:1 or more on every dialog. */
.dlg .ask-label { display: block; margin: 0 0 4px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink); }
.req { color: var(--req, #b3261e); font-weight: 700; }
:root { --req: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --req: #ff8a80; } }
:root[data-theme="dark"] { --req: #ff8a80; }
/* Its grey hint text: the theme's own grey, dark enough to read (the browser's default grey is too faint on some themes). */
#askInput::placeholder { color: color-mix(in oklab, var(--muted) 82%, var(--ink)); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }