:root {
  --bg: #f6f5f1;
  --paper: #ffffff;
  --paper-alt: #faf8f2;
  --paper-edge: #e2ded2;
  --panel: #ffffff;
  --ink: #2b2a27;
  --ink-soft: #6f6c64;
  --line: #e6e3da;
  --accent: #c96442;
  --accent-soft: #f3e0d8;
  --accent-ink: #ffffff;
  --hover: #f4f2ec;
  --slug-bg: #f0eee8;
  /* Base that category colors are blended against for soft fills. */
  --mix: #ffffff;
  --shadow: 0 1px 3px rgba(40, 35, 25, 0.07), 0 6px 18px rgba(40, 35, 25, 0.05);
  --shadow-lift: 0 4px 10px rgba(40, 35, 25, .09), 0 12px 30px rgba(40, 35, 25, .08);
  --radius: 14px;
  --radius-sm: 9px;
  --ui-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Seravek, "Segoe UI", Ubuntu, sans-serif;
  --reader-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Seravek, "Segoe UI", Ubuntu, sans-serif;
  --reader-size: 16px;
  --reader-leading: 1.7;
}

:root[data-theme="dark"] {
  --bg: #16151a;
  --paper: #211f27;
  --paper-alt: #1c1a22;
  --paper-edge: #35323e;
  --panel: #1e1d23;
  --ink: #ebe8e2;
  --ink-soft: #9d99a3;
  --line: #322f39;
  --accent: #e0805c;
  --accent-soft: #3a2620;
  --accent-ink: #1a1419;
  --hover: #272630;
  --slug-bg: #2a2833;
  --mix: #1e1d23;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 15px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* ---------- layout ---------- */

header.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar .logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

/* The sheet of the logo mark is paper in both themes; only its outline follows
   the theme, so the kiss and the tabs keep their brand colours. */
:root { --logo-sheet: #ffffff; --logo-edge: #4a6b9a; }
:root[data-theme="dark"] { --logo-sheet: #dfe6f2; --logo-edge: #4a6b9a; }

.topbar .logomark { width: 30px; height: 28px; flex: none; color: var(--ink-soft); }
.topbar .logotype {
  font-size: 18px; font-weight: 600; letter-spacing: .1px;
  color: var(--ink-soft);
}
.topbar .logotype strong { font-weight: 800; color: #2f7ff0; }
:root[data-theme="dark"] .topbar .logotype strong { color: #63a4ff; }
.topbar .logo:hover .logotype { color: var(--ink); }

.topbar .crumbs { color: var(--ink-soft); font-size: 14px; }
.topbar .crumbs a { color: var(--ink-soft); text-decoration: none; }
.topbar .crumbs a:hover { color: var(--accent); }
.topbar .spacer { flex: 1; }

/* One quiet row of destinations, every one labelled. Borderless until hovered
   so the bar reads as navigation rather than as eight competing buttons. */
.topnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topnav button {
  border-color: transparent; background: none; box-shadow: none !important;
  padding: 7px 11px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft);
}
.topnav button:hover { color: var(--ink); background: var(--accent-soft); border-color: transparent; }
.topnav #logoutBtn { margin-left: 8px; }
.topnav #logoutBtn:hover { color: #e8590c; background: color-mix(in srgb, #e8590c 12%, transparent); }

@media (max-width: 980px) {
  .topnav button { padding: 6px 8px; font-size: 13px; }
}

main { max-width: 1900px; margin: 0 auto; padding: 22px 28px; }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.sub { color: var(--ink-soft); margin: 0 0 22px; }

/* ---------- buttons & inputs ---------- */

button, .btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.13s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

button:hover, .btn:hover { border-color: var(--ink-soft); box-shadow: var(--shadow); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(0.93); }
button.ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
button.ghost:hover { color: var(--accent); box-shadow: none; }
button.danger:hover { border-color: #e5484d; color: #e5484d; }
button:disabled { opacity: 0.5; cursor: default; }

button.icon { padding: 8px 10px; font-size: 15px; line-height: 1; }

input[type="text"], input[type="password"], textarea, select, input[type="number"] {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--bg);
  outline: none;
  width: 100%;
}

input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; }
input[type="range"] { accent-color: var(--accent); }
label.field { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
label.field > * { margin-top: 5px; }

/* ---------- cards / grid ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card.clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card h3 { margin: 0 0 5px; font-size: 16px; }
.card .meta { color: var(--ink-soft); font-size: 13px; }
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

/* ---------- upload zone ---------- */

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--panel);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 20px;
}

.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone strong { color: var(--ink); }

/* ---------- script workspace ---------- */

/* ---------- studio layout: panels left & right, paper in the middle ---------- */

.studio {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1250px) { .studio { grid-template-columns: 210px minmax(0, 1fr) 290px; } }
@media (max-width: 1000px) { .studio { grid-template-columns: 1fr; } .side-panel { position: static; } }

.side-panel {
  display: flex; flex-direction: column; gap: 14px;
  /* Docks below the top bar and the pinned stage row, both measured at runtime
     so a wrapped nav or a different zoom level cannot push it under them. */
  position: sticky; top: calc(var(--topbar-h, 60px) + var(--tabs-h, 54px) + 10px);
  max-height: calc(100vh - var(--topbar-h, 60px) - var(--tabs-h, 54px) - 40px);
  overflow-y: auto;
}
/* A pane is a list in its own window: it scrolls internally instead of growing
   until it pushes the panel below it out of sight. */
.pane { overflow-y: auto; overscroll-behavior: contain; transition: max-height .16s ease; }
.pane.compact { max-height: 30vh; }
.pane.expanded { max-height: 62vh; }
.pane.collapsed { max-height: 0; overflow: hidden; }
.pane::-webkit-scrollbar { width: 9px; }
.pane::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
.pane::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
.pane-toggle { padding: 1px 7px !important; line-height: 1.2; }

.side-panel .panel { padding: 14px 15px; }
.side-panel .panel h2 { font-size: 13px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.script-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.script-head h1 { margin: 0; }
.read-pill {
  font-size: 12px; font-weight: 700; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  border-radius: 99px; padding: 2px 10px;
}

/* pages navigator */
.progressbar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.progressbar div { height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .25s ease; }
.pagegrid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 30vh; overflow-y: auto; }
.pagechip {
  width: 34px; padding: 3px 0; font-size: 11.5px; font-weight: 700;
  border-radius: 7px; justify-content: center;
  color: var(--ink-soft);
}
.pagechip.read { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.pagechip.read::after { content: " ✓"; font-size: 9px; }
.pagechip.current { outline: 2px solid var(--accent); outline-offset: 1px; }

.scenelist { display: flex; flex-direction: column; gap: 2px; max-height: 38vh; overflow-y: auto; }
.scenelink {
  border: none; background: none; box-shadow: none !important;
  text-align: left; font-size: 12px; font-weight: 500; padding: 4px 7px; border-radius: 7px;
  color: var(--ink-soft); display: flex; gap: 7px; align-items: baseline;
}
.scenelink:hover { background: var(--hover); color: var(--ink); }
.scenelink .n { font-weight: 700; color: var(--accent); flex: none; font-size: 11px; }

/* The four stages: the same quiet underlined row as before, only set larger.
   Restraint is the point — this sits above every script all day.

   Pinned under the top bar so it never scrolls away: which stage you are in is
   the one thing that must always be answerable, and it doubles as the way back
   out of a long script. The background is opaque because script pages pass
   underneath it. */
.tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
  position: sticky; top: var(--topbar-h, 60px); z-index: 40;
  background: var(--bg);
  padding-top: 8px;
}
.tabs button {
  border: none; background: none; box-shadow: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 12px 20px; color: var(--ink-soft);
  font-size: 17px; font-weight: 600;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--accent); border-bottom: 2.5px solid var(--accent); font-weight: 700; }

@media (max-width: 760px) { .tabs button { padding: 10px 13px; font-size: 15px; } }

.reader {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 36px;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 80vh;
  overflow-y: auto;
}

/* the scrolling column that holds the paper stack */
.paper-scroll {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 4px 14px 40px;
  scroll-behavior: smooth;
}

.reader-flow {
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  display: flex; flex-direction: column; gap: 26px;
  max-width: var(--reader-width, 84em);
  margin: 0 auto;
}

/* Focus mode: both panels out of the way so the sheet gets the whole page. */
.studio.focus { grid-template-columns: 1fr; }
.studio.focus > .side-panel { display: none; }
.studio.focus .paper-scroll { max-height: calc(100vh - 150px); }

.reader-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 auto 10px; padding: 0 2px;
  max-width: var(--reader-width, 84em);
  font-family: var(--ui-font);
}
.reader-bar .rb-hint { font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }
.reader-bar button { font-size: 12px; padding: 3px 9px; }
.reader-bar button.on { border-color: var(--accent); background: var(--accent-soft); }

/* each source page is a sheet of paper */
.paper {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 18px;
  padding: 40px 52px 46px;
  box-shadow: 0 1px 2px rgba(20, 16, 10, 0.10), 0 10px 28px rgba(20, 16, 10, 0.10);
}
.paper.alt { background: var(--paper-alt); }
.paper.is-read { border-color: color-mix(in srgb, var(--accent) 35%, var(--paper-edge)); }
.paper.is-read .paper-read { opacity: 1; }

.paper-head {
  position: absolute; top: 12px; right: 18px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-family: var(--ui-font);
}
.paper-read {
  opacity: 0; transition: opacity .3s ease;
  color: var(--accent); font-size: 13px;
}

@media (max-width: 760px) { .paper { padding: 26px 20px 30px; border-radius: 14px; } }

/* ---------- screenplay layout ----------
   Real screenplay geometry: action full width, dialogue in a narrower column
   centred under its character cue. Widths are in em so they scale with the
   reader font size. */

.screenplay { white-space: normal; }

.screenplay .sl {
  /* A wrapped line keeps its own block, so an empty one is a real blank line. */
  min-height: 0.2em;
  white-space: pre-wrap;
}
.screenplay .sl.blank { height: 0.75em; }

.screenplay .action { max-width: 42em; }

.screenplay .slug {
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: 0.02em;
  background: var(--slug-bg);
  border-radius: 8px;
  padding: 4px 11px;
  display: inline-block;
  margin: 1.1em 0 0.55em;
  line-height: 1.35;
}

.screenplay .character {
  font-weight: 700;
  margin: 0.85em 0 0 12.5em;
  letter-spacing: 0.04em;
}
.screenplay .paren {
  margin-left: 10em;
  max-width: 16em;
  color: var(--ink-soft);
  font-style: italic;
}
.screenplay .dialogue {
  margin-left: 8.5em;
  max-width: 24em;
}
.screenplay .transition {
  text-align: right;
  max-width: 42em;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.8em 0;
}
/* Page numbers and (MORE)/(CONT'D) left over from the PDF: keep them, but
   don't let them interrupt the read. */
.screenplay .artefact {
  color: var(--ink-soft);
  opacity: 0.45;
  font-size: 0.82em;
}

@media (max-width: 760px) {
  .screenplay .character { margin-left: 5em; }
  .screenplay .dialogue { margin-left: 3em; max-width: none; }
  .screenplay .paren { margin-left: 4em; }
}

mark.tag {
  border-radius: 5px;
  padding: 0 3px;
  color: inherit;
  cursor: pointer;
  background: color-mix(in srgb, var(--tag-color) 22%, transparent);
  box-shadow: inset 0 -2px 0 var(--tag-color);
}
/* A phrase broken over a line break is several marks that have to read as one:
   the joined edges lose their rounding and their padding, so the halves look cut
   rather than like two separate tags. */
mark.tag.is-wrap-start { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0; }
mark.tag.is-wrap-end { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0; }
mark.tag.is-wrap-mid { border-radius: 0; padding-left: 0; padding-right: 0; }
/* Hovering any piece is hovering the phrase. */
mark.tag.is-wrap:hover { background: color-mix(in srgb, var(--tag-color) 34%, transparent); }

/* selection popup */
.tagpop {
  position: absolute;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
  padding: 10px;
  width: 300px;
}
.tagpop .term { font-weight: 700; margin-bottom: 8px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagpop .cats { display: flex; flex-wrap: wrap; gap: 5px; }
.tagpop .cats button {
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 15%, var(--mix));
}
.tagpop .cats button:hover { background: var(--c); color: #fff; }

/* sidebar */
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 86px; }
.sidebar .card { padding: 15px; }
.sidebar .card h2 { font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.sidebar .taglist { max-height: 46vh; overflow-y: auto; }

.catgroup { margin-bottom: 10px; }
.catgroup .cathead {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--ink-soft);
}
.catgroup .cathead .swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }

.tagrow {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 7px; font-size: 13.5px;
}
.tagrow:hover { background: var(--hover); }
.tagrow .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagrow .aka { color: var(--ink-soft); font-size: 11px; font-weight: 700; cursor: help; }
.tagrow .src { font-size: 10px; color: var(--ink-soft); border: 1px solid var(--line); padding: 0 5px; border-radius: 99px; }
.tagrow button { padding: 0 6px; font-size: 13px; border: none; background: none; color: var(--ink-soft); box-shadow: none !important; }
.tagrow button:hover { color: #e5484d; }

.suggestion { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 7px; font-size: 13.5px; }
.suggestion:hover { background: var(--hover); }
.suggestion .pill { font-size: 10.5px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, var(--mix)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }

/* ---------- breakdown ---------- */

.scene-card { margin-bottom: 14px; }
.scene-card .scene-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.scene-card .scene-num {
  background: var(--accent); color: var(--accent-ink); border-radius: 8px;
  font-weight: 700; font-size: 13px; padding: 2px 9px;
}
.scene-card .scene-title { font-weight: 700; }
.scene-card .scene-meta { color: var(--ink-soft); font-size: 12.5px; }
.scene-card .scene-page {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px;
}

.el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.el-cell { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.el-cell .el-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.el-cell .el-cat .swatch { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.el-cell ul { margin: 0; padding-left: 16px; font-size: 13px; }

.totals-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.totals-table th, .totals-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.totals-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-soft); }
.totals-table .scenes-list { color: var(--ink-soft); font-size: 12px; }

/* ---------- settings ---------- */

.font-option {
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; margin-bottom: 10px; background: var(--panel);
}
.font-option:hover { border-color: var(--ink-soft); }
.font-option.active { border-color: var(--accent); background: var(--accent-soft); }
.font-option .name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.font-option .preview { font-size: 17px; }

.color-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.color-row .t { flex: 1; }
.color-row input[type="color"] {
  width: 34px; height: 26px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; background: none;
}
.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-row button { padding: 0 6px; border: none; background: none; box-shadow: none !important; color: var(--ink-soft); }
.color-row button:hover { color: var(--accent); }

/* ---------- misc ---------- */

.empty { text-align: center; color: var(--ink-soft); padding: 46px 20px; }
.empty .big { font-size: 38px; margin-bottom: 8px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 20px; border-radius: 999px;
  font-size: 14px; z-index: 500; box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  animation: toast-in 0.2s ease;
}
.toast.error { background: #b3261e; color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 8, 12, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 300;
}
.modal { background: var(--panel); border-radius: var(--radius); padding: 24px; width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.modal h2 { margin-top: 0; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

code.inline { background: var(--slug-bg); border-radius: 5px; padding: 1px 6px; font-size: 13px; }


/* ---------- custom scrollbars ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-soft) 42%, transparent) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-soft) 38%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-soft) 65%, transparent); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------- jump flash ---------- */

/* Jump highlight: yellow + a blinking frame. Yellow keeps the strongest
   luminance contrast under red-green color deficiency, and the blink is
   visible regardless of how color is perceived. */
mark.tag.flash { animation: tagflash 1.5s ease; position: relative; z-index: 5; }
@keyframes tagflash {
  0%   { background: #ffd43b; color: #1a1408; outline: 3px solid #ffd43b; outline-offset: 3px; }
  20%  { outline-color: transparent; background: #ffd43b; color: #1a1408; }
  40%  { outline-color: #ffd43b; background: #ffd43b; color: #1a1408; }
  60%  { outline-color: transparent; background: #ffd43b; color: #1a1408; }
  80%  { outline-color: #ffd43b; background: #ffd43b; color: #1a1408; outline-offset: 3px; }
  100% { outline-color: transparent; }
}

/* ---------- setup tab ---------- */

/* One column, full width. The categories table carries a color picker, three
   text fields and a complexity ladder per row; squeezed into 1.3fr next to the
   presets card it had to shrink all of them. Setup is a screen you visit between
   stretches of work, not something to fit beside anything else. */
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
/* The table wants the whole width; running prose does not — a 1300px line is
   hard to track back from. Explanations keep a readable measure. */
.setup-grid .card > p.sub { max-width: 96ch; }

.setup-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.setup-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 4px 6px; }
.setup-table td { padding: 3px 6px; }
.setup-table input[type="text"] { padding: 6px 9px; font-size: 13px; }
.setup-table input[type="color"] {
  width: 32px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer;
}
.setup-table input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.setup-table input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }

.preset-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.preset-row .meta { font-size: 11.5px; margin-top: 2px; }

/* ---------- breakdown stats & tables ---------- */

.statrow { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 18px; text-align: center; min-width: 86px; box-shadow: var(--shadow);
}
.stat .v { font-size: 21px; font-weight: 700; }
.stat .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

.bd-cat { margin-bottom: 16px; border-left: 3px solid var(--c); }
.bd-cat h2 .meta { font-weight: 500; font-size: 12.5px; margin-left: 8px; }
.bd-scroll { overflow-x: auto; }
select.cx {
  font-family: inherit; font-size: 12.5px; padding: 4px 6px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px;
}

/* ---------- tag popup: department groups ---------- */

.tagpop { max-height: 60vh; overflow-y: auto; width: 320px; }
.tagpop .dep {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin: 8px 0 4px;
}
.tagpop .cats + .dep { margin-top: 10px; }

.tagrow .t.jump { cursor: pointer; }
.tagrow .t.jump:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* script card actions */
.script-actions { display: flex; gap: 2px; }
.script-actions .act { padding: 2px 6px; font-size: 13px; }

/* cover sheets */
.paper.cover { opacity: 0.75; }
.paper.cover .paper-num { color: var(--accent); }
.pagechip.coverchip { opacity: 0.6; font-style: italic; }

/* scene numbers on sluglines */
.scene-no {
  display: inline-block;
  min-width: 24px; text-align: center;
  font-family: var(--ui-font); font-size: 0.72em; font-weight: 700;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 7px; padding: 2px 6px;
  margin-right: 9px; vertical-align: 2px;
}

/* breakdown filter bar & collapse */
.bd-filter { position: sticky; top: 64px; z-index: 40; background: var(--bg); padding: 8px 0; }
.dep-btn { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; }
.dep-btn:hover { border-color: var(--accent); color: var(--accent); }
.bd-toggle { cursor: pointer; user-select: none; }
.bd-toggle .chev { display: inline-block; transition: transform .15s ease; margin-right: 6px; color: var(--ink-soft); }
.bd-cat.collapsed .chev { transform: rotate(-90deg); }
.bd-cat.collapsed .bd-scroll { display: none; }

/* mark popover */
.markpop { width: 300px; }
.mp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mp-head .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mp-term { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-cat { font-size: 11px; color: var(--ink-soft); flex: none; margin-left: auto; }
.mp-note { font-size: 12px; color: var(--ink-soft); margin: 4px 0 6px; }
.mp-actions { display: flex; gap: 6px; margin-top: 10px; }
.mp-actions button { flex: 1; justify-content: center; font-size: 12.5px; padding: 6px 8px; }
.mp-actions .danger:hover { border-color: #e5484d; color: #e5484d; }
.mp-actions .primary-like { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mp-input { width: 100%; font-size: 13px; min-height: 34px; }
textarea.mp-input { min-height: 70px; }
.mp-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin: 7px 0; }
.mp-label select, .mp-label input { margin-top: 3px; width: 100%; font-size: 13px; padding: 6px 8px; }


/* editable suggestion category */
.suggestion select.sug-cat {
  width: auto; max-width: 140px; flex: none;
  font-size: 11px; padding: 3px 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c) 15%, var(--mix));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--ink);
}

/* breakdown editing & jump */
.bd-jump { cursor: pointer; }
.bd-jump:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bd-edit { cursor: text; }
.bd-edit:hover { background: var(--hover); border-radius: 5px; }
.bd-edit input { font-size: 12.5px; padding: 4px 7px; }
.edit-hint { color: var(--ink-soft); opacity: 0.55; font-size: 11.5px; }
.cat-name, .dep-name { cursor: pointer; }
.cat-name:hover, .dep-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.matrix td, .matrix th { padding: 6px 12px; }
.matrix-total td { border-top: 2px solid var(--line); }

/* Variations sit visually beneath their element, indented with a small elbow,
   so the breakdown reads as "this thing, and these versions of it". */
.var-list {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin: 4px 0 0 10px; padding-left: 10px;
  border-left: 2px solid var(--line);
}
.var-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  padding: 1px 4px 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, var(--mix));
  border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent);
}
/* The name half of the chip goes to that version in the script, the way clicking
   the element name goes to the element. The note half describes what is
   different about it — a name like "half-transformed" does not say what has to
   be built, and without a field for it that went into the name in brackets. */
.var-chip .var-jump { cursor: pointer; font-weight: 700; }
.var-chip:hover { border-style: solid; }
.var-chip .var-note {
  cursor: pointer; font-weight: 500; color: var(--ink-soft);
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.var-chip .var-note:hover { color: var(--ink); }
.var-chip .var-note::before { content: '·'; margin-right: 4px; opacity: .6; }
.var-chip .var-note input {
  font: inherit; font-weight: 500; width: 22ch;
  padding: 0 4px; border-radius: 5px;
}
.var-chip .var-note:has(input)::before { content: none; }
.var-chip .var-del {
  border: none; background: none; box-shadow: none !important;
  padding: 0 3px; font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.var-chip .var-del:hover { color: #e5484d; }
/* A variant highlighted in the script: its element's colour, but a dashed
   underline so it reads as a version of something rather than its own element. */
mark.tag.is-variant { border-bottom: 2px dashed color-mix(in srgb, var(--tag-color) 70%, transparent); }

/* Step three of tagging: pick the element this variant belongs to. */
.varpop { width: 280px; }
.varlist { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.varlist button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  text-align: left; padding: 6px 9px; font-size: 13px;
  border-color: transparent; background: none;
}
.varlist button:hover { border-color: var(--accent); background: var(--accent-soft); }
.varlist .swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.varlist strong { flex: 1; font-weight: 600; }
.varlist .varcat { font-size: 11px; color: var(--ink-soft); }

/* Remove-element button in the breakdown table. Quiet until the row is hovered:
   a column of red crosses next to every element invites the wrong click. */
.bd-del {
  border-color: transparent; background: none; box-shadow: none !important;
  padding: 1px 6px; font-size: 12px; color: var(--ink-soft);
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .bd-del, .bd-del:focus-visible { opacity: 1; }
.bd-del:hover { color: #e5484d; border-color: #e5484d; }

/* Per-category complexity scale in the setup table. Its own row under the
   category it belongs to, with room to breathe: this is the control that decides
   how every element in the category gets rated, and it was the most cramped
   thing on the page when it had to share the width with the presets card. */
.setup-table tr.cx-row td { border-top: none; padding: 0 6px 14px; }
.cx-edit { display: flex; flex-direction: column; gap: 7px; }
.cx-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx-label {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); flex: none;
}
/* Says which state the row is in, so "greyed out" does not need to be guessed. */
.cx-note { font-size: 11.5px; color: var(--ink-soft); opacity: .8; }
.cx-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; padding: 5px 7px 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink);
  background: var(--panel); cursor: grab;
}
.cx-chip:hover { border-color: var(--accent); }
/* Greyed out means "inherited from the default scale, not set here". */
.cx-chip.inherited { opacity: .55; border-style: dashed; }
.cx-chip.inherited:hover { opacity: 1; }
/* Reordering a ladder: the chip being carried fades, the one under the cursor
   shows the edge it will land against. */
.cx-chip.dragging { opacity: .35; }
.cx-chip.dropto { border-color: var(--accent); box-shadow: -2px 0 0 0 var(--accent); }
.cx-chip .cx-name { pointer-events: none; }
/* The remove cross is always there but quiet, so the space it takes reads as part
   of the chip instead of as a gap, and hovering does not shift the whole ladder
   sideways. Big enough to hit without aiming; red only under the cursor. */
.cx-chip .cx-x {
  border: none; background: none; box-shadow: none !important;
  padding: 0; width: 18px; height: 18px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--ink-soft);
  opacity: .35; transition: opacity .12s ease, color .12s ease, background .12s ease; cursor: pointer;
}
.cx-chip:hover .cx-x, .cx-chip .cx-x:focus-visible { opacity: 1; }
.cx-chip .cx-x:hover { color: #e5484d; background: var(--hover); }
/* Chips inside a modal preview are not editable, so they lose the affordances. */
.modal .cx-chip { cursor: default; padding-right: 12px; }

/* "+ Level" and "↺ Default" sit in the chip flow, so the ladder and the ways to
   change it stay one row of controls at one size. */
.cx-add, .cx-reset {
  font-size: 12.5px !important; padding: 5px 12px !important;
  border-radius: 999px; flex: none; white-space: nowrap;
}
.cx-add:disabled { opacity: .4; cursor: not-allowed; }

/* Menu behind "+ Level". */
.cxaddpop { width: 300px; }
.cxopts { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 8px; }
.cxopts button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  position: relative; width: 100%; text-align: left; padding: 8px 11px;
  border-color: transparent; background: none;
}
.cxopts button strong { font-size: 13.5px; font-weight: 700; }
.cxopts button > span:not(.cx-forget) { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.cxopts button:hover { border-color: var(--accent); background: var(--accent-soft); }
/* "Forget this level" / "delete this scale" — same reasoning as the chip cross:
   hidden until the row it belongs to is hovered. */
.cx-forget {
  flex: none; font-size: 9px; color: var(--ink-soft);
  padding: 2px 4px; border-radius: 4px;
  opacity: 0; transition: opacity .12s ease;
}
button:hover > .cx-forget, .cx-forget:focus-visible { opacity: 1; }
.cx-forget:hover { color: #e5484d; background: var(--hover); }
/* The option rows in the "+" menu stack their label and hint, so a trailing
   cross has to be lifted out of that column rather than sat under it. */
.cxopts button > .cx-forget { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* An element that appears nowhere in the script text. Deliberately loud: it has
   no scene and no page, so nobody on the production can check it — that is a
   hole in the breakdown, not a formatting detail. */
.warn-card { border-color: #e8a33d; background: color-mix(in srgb, #e8a33d 7%, transparent); }
.warn-card h2 { color: #e8a33d; }
.scenes-list.unplaced { white-space: nowrap; }
.unplaced-flag { font-size: 11.5px; font-weight: 700; color: #e8a33d; }
.unplaced-fix { font-size: 11px !important; padding: 2px 8px !important; margin-left: 8px; }
.unplaced-list { display: flex; flex-wrap: wrap; gap: 6px; }
.unplaced-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #e8a33d 55%, transparent); color: var(--ink);
  background: var(--panel);
}
.unplaced-chip .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
button.unplaced-chip { cursor: pointer; }
button.unplaced-chip:hover { border-color: #e8a33d; background: color-mix(in srgb, #e8a33d 12%, transparent); }

/* Refusing a suggestion. Quiet next to the accept tick — the common action is
   accepting, and a column of red crosses would invite the wrong click. */
.suggestion .sug-no { opacity: 0; transition: opacity .12s ease; padding: 1px 6px; }
.suggestion:hover .sug-no, .suggestion .sug-no:focus-visible { opacity: 1; }

/* Terms this script has said no to: present, so the decision is visible and can
   be taken back, but folded away under everything still worth doing. */
.sug-refused { margin-top: 10px; }
.sug-refused > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-soft); padding: 4px 2px; user-select: none;
}
.sug-refused > summary:hover { color: var(--ink); }
.sug-refused-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 2px 2px; }
.sug-refused-list .unplaced-chip { font-size: 11.5px; padding: 2px 8px; }

/* The sitting-by-sitting breakdown of worked time. Folded away by default: the
   total is the answer, the list is the evidence for it. */
.time-sittings > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-soft);
  padding: 4px 0; user-select: none;
}
.time-sittings > summary:hover { color: var(--ink); }
.time-sittings[open] > summary { margin-bottom: 2px; }

/* "built-in" badge on preset rows, where it was emitted but never styled. The
   lexicon rows have their own .tagrow .src rule and are left alone. */
.preset-row .src {
  font-size: 10px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); padding: 0 5px; border-radius: 99px;
  white-space: nowrap;
}

/* A complexity a category does not use: blank, so it cannot be read as zero. */
.mx-na { background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px); opacity: .35; }

/* clickable matrix */
.mx-row, .mx-cell { cursor: pointer; }
.mx-row:hover, .mx-cell:hover { background: var(--hover); }
.mx-cell:hover { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 4px; }

/* suggestion selection */
.suggestion { user-select: none; }
.suggestion.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sug-check {
  width: 15px; height: 15px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}

/* Temporary text jump flash (same yellow blink as tag jumps). The wrapper is
   inserted before the scroll starts but only blinks once it has arrived, so it
   stays invisible until `.on` is set. */
.jump-flash { border-radius: 4px; }
.jump-flash.on { animation: tagflash 1.5s ease; }
.sug-jump { cursor: pointer; }
.sug-jump:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* footer & meta pages */
/* One bar across the whole window, not a small cluster floating in the middle:
   brand on the left, the links in the middle, the copyright on the right. */
.footer {
  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
  padding: 12px 28px;
  display: flex; align-items: center; gap: 14px;
  color: var(--ink-soft); font-size: 12.5px;
  border-top: 1px solid var(--line);
}
.footer .f-left { display: flex; align-items: center; gap: 9px; }
.footer .f-mid {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
}
.footer .f-right { margin-left: auto; white-space: nowrap; opacity: .8; }

@media (max-width: 760px) {
  .footer { flex-wrap: wrap; gap: 8px; padding: 10px 16px; font-size: 12px; }
  .footer .f-mid { justify-content: flex-start; }
}
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer .sep { opacity: .5; }
.version-pill {
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: 2px 10px;
}
.rel-list { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }
.rel-list li { margin-bottom: 5px; }
.roadmap-group { margin-bottom: 14px; }
.roadmap-item { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13.5px; }
.roadmap-item .meta { font-size: 12px; margin-top: 2px; }
.docs .card { margin-bottom: 16px; max-width: 900px; }
.docs p { font-size: 14px; line-height: 1.65; margin: 8px 0; }

/* ---------- team, roles, activity ---------- */

.orgbadge { display: flex; align-items: center; gap: 7px; margin-right: 6px; }
.orgbadge .org-name {
  font-weight: 700; font-size: 13px; color: var(--ink);
  text-decoration: none; max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.orgbadge .org-name:hover { color: var(--accent); }
.orgbadge select { font-size: 12.5px; padding: 3px 6px; max-width: 180px; }

.rolechip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.rolechip.owner  { border-color: #e8590c; color: #e8590c; }
.rolechip.admin  { border-color: #1c7ed6; color: #1c7ed6; }
.rolechip.member { border-color: #2f9e44; color: #2f9e44; }
.rolechip.viewer { border-color: var(--line); }

.rolelegend {
  margin-top: 14px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--ink-soft);
}
.rolelegend > div { display: flex; align-items: center; gap: 8px; }

.act-day {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 18px 0 6px;
}
.act-day:first-child { margin-top: 0; }
.act {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.act:last-child { border-bottom: none; }
.act-icon { width: 18px; text-align: center; flex-shrink: 0; }
.act-body { flex: 1; line-height: 1.5; }
.act-link { font-size: 12px; margin-left: 8px; }
.act-when { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0; }

/* A ticked-off element stays readable but steps back visually. */
.totals-table tr.is-done > td { opacity: .5; }
.totals-table tr.is-done > td:first-child { opacity: 1; }
.totals-table tr.is-done strong { text-decoration: line-through; }
.donebox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.donebox:disabled { cursor: not-allowed; opacity: .4; }

/* ---------- comment threads ---------- */

.mp-by { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 2px; }
.mp-by.done { color: #2f9e44; }

.thread { max-height: 260px; overflow-y: auto; margin: 8px 0; }
.cmt { padding: 7px 0; border-bottom: 1px solid var(--line); }
.cmt:last-child { border-bottom: none; }
.cmt.resolved { opacity: .55; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.cmt-when { color: var(--ink-soft); font-size: 11px; margin-left: auto; }
.cmt-body { font-size: 13px; line-height: 1.5; margin: 3px 0 4px; white-space: pre-wrap; word-break: break-word; }
.cmt-actions { display: flex; gap: 6px; }
.cmt-actions button { font-size: 11px; padding: 2px 7px; }

/* ---------- sticky notes ---------- */

.screenplay .sl { position: relative; }

.postit-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; }
/* --note-scale sizes a note from its own em box, so padding, text and the icon
   grow together and the hit area matches what is drawn. */
.postit {
  --note-scale: 1;
  max-width: calc(300px * var(--note-scale)); min-width: calc(130px * var(--note-scale));
  padding: 10px 12px 8px; font-size: calc(12.5px * var(--note-scale)); line-height: 1.45;
  font-family: var(--ui-font);
  color: #2b2313;
  border-radius: 2px 12px 3px 10px;
  box-shadow: 0 3px 8px rgba(20, 14, 4, .22), 0 1px 2px rgba(20, 14, 4, .18);
  transform: rotate(-.8deg);
  cursor: pointer;
  position: relative;
}
.postit:nth-child(2n) { transform: rotate(.9deg); }
.postit::before {
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(2deg);
  width: 38px; height: 10px; background: rgba(255,255,255,.45); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.postit:hover { transform: rotate(0deg) scale(1.02); }
.postit.yellow { background: #ffe680; }
.postit.pink { background: #ffc2d6; }
.postit.blue { background: #ade0ff; }
.postit.green { background: #b5f0c0; }
.postit.orange { background: #ffd0a1; }
.postit-icon { font-size: 15px; margin-right: 5px; }
.postit-text { white-space: pre-wrap; word-break: break-word; }
.postit-meta { font-size: 10.5px; font-weight: 700; opacity: .55; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Notes stuck to a free spot on the sheet. left/top come from the note's own
   x/y percentages, so they hold their place when the reader font or the window
   width changes. */
.postit.placed {
  position: absolute;
  z-index: 4;
  max-width: calc(240px * var(--note-scale));
}

/* Resize grip in the bottom-right corner. Only visible on hover so the sheet
   stays clean, but always big enough to grab. */
.postit-grip {
  position: absolute; right: -2px; bottom: -2px;
  width: 15px; height: 15px; cursor: nwse-resize;
  opacity: 0; transition: opacity .12s ease;
  border-right: 2.5px solid rgba(43, 35, 19, .55);
  border-bottom: 2.5px solid rgba(43, 35, 19, .55);
  border-bottom-right-radius: 4px;
}
.postit:hover .postit-grip, .postit.dragging .postit-grip { opacity: 1; }
.postit.stamp .postit-grip { right: -6px; bottom: -6px; border-color: rgba(255,255,255,.7); }
.postit.placed:hover { z-index: 6; }
.postit.dragging {
  z-index: 20; cursor: grabbing;
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 12px 26px rgba(20, 14, 4, .34);
  transition: none;
}

/* An emoji on its own: no paper body, just the mark. */
.postit.stamp {
  min-width: 0; max-width: none;
  padding: 2px 4px; background: none; box-shadow: none;
  border-radius: 6px;
}
.postit.stamp::before { display: none; }
.postit.stamp .postit-icon { font-size: calc(22px * var(--note-scale)); margin: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.postit.stamp:hover { background: rgba(255, 255, 255, .35); }

/* right-click menu on the paper */
.papermenu { width: 232px; padding: 8px; }
.pm-stamps {
  display: flex; gap: 2px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.pm-stamp {
  flex: 1; padding: 4px 0; font-size: 17px; line-height: 1;
  justify-content: center; border-color: transparent; background: none;
}
.pm-stamp:hover { background: var(--accent-soft); border-color: var(--accent); }
.pm-items { display: flex; flex-direction: column; gap: 2px; }
.pm-items button {
  justify-content: flex-start; text-align: left; width: 100%;
  padding: 6px 9px; font-size: 13px; border-color: transparent; background: none;
}
.pm-items button:hover { background: var(--accent-soft); border-color: var(--accent); }

.notes-grid { display: flex; flex-wrap: wrap; gap: 14px; }

/* note editor */
.notepop { width: 280px; }
.np-colors { display: flex; gap: 6px; margin: 8px 0; }
.np-color {
  width: 26px; height: 26px; padding: 0; border-radius: 7px;
  border: 2px solid transparent;
}
.np-color.active { border-color: var(--ink); }
.np-color.yellow { background: #ffe680; } .np-color.pink { background: #ffc2d6; }
.np-color.blue { background: #ade0ff; } .np-color.green { background: #b5f0c0; }
.np-color.orange { background: #ffd0a1; }
.np-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.np-icon { padding: 3px 7px; font-size: 14px; border-radius: 7px; }
.np-icon.active { border-color: var(--accent); background: var(--accent-soft); }
.np-size { font-size: 12px; margin-top: 8px; }
.np-size-v { font-weight: 700; color: var(--accent); }
.np-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 8px 0 2px; padding: 8px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--paper); overflow: hidden;
}
.np-preview .postit { cursor: default; min-width: 0; }

/* Step two of tagging: the complexity ladder, with what each rung means. */
.cxpop { width: 268px; }
.cxsteps { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 8px; }
.cxsteps button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; padding: 7px 10px;
  border-color: transparent; background: none;
}
.cxsteps button strong { font-size: 13.5px; font-weight: 700; }
.cxsteps button span { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }
.cxsteps button:hover { border-color: var(--accent); background: var(--accent-soft); }
.cxsteps button:hover span { color: var(--ink); }
.cxskip { width: 100%; justify-content: center; font-size: 12px; color: var(--ink-soft); }

/* Element / variant / asset rollup at the foot of the matrix. */
.totals-table tr.matrix-sub td { border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.totals-table tr.matrix-sub td strong { color: var(--ink); }
.stat.accent { border-color: var(--accent); background: var(--accent-soft); }
.stat.accent .v { color: var(--accent); }

/* ---------- sticky footer ---------- */

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; width: 100%; }
.footer {
  position: sticky; bottom: 0; z-index: 45;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

/* ---------- pricing ---------- */

.plan-grid {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plan { display: flex; flex-direction: column; position: relative; }
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.plan-flag {
  position: absolute; top: -10px; left: 16px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.plan-price { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 0; }
.plan-per { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 5px; }
.plan-pitch { font-size: 13px; color: var(--ink-soft); margin: 8px 0 12px; }
.plan-features { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13.5px; line-height: 1.5; }
.plan-features li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.plan-features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 800;
}
.plan-cta { margin-top: auto; width: 100%; justify-content: center; }

/* lexicon frame */
.lex-frame {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px; max-height: 44vh; overflow-y: auto;
  background: var(--bg);
}
.lx-check { width: 14px; height: 14px; accent-color: var(--accent); flex: none; }