@font-face {
  font-family: 'SummaryNotoSans';
  src: url('/assets/fonts/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SummaryNotoSans';
  src: url('/assets/fonts/NotoSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SummaryNotoSans';
  src: url('/assets/fonts/NotoSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SummaryNotoSans';
  src: url('/assets/fonts/NotoSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* The PDF renders emoji through monochrome NotoEmoji; naming it before the
   system colour font keeps the editor's emoji identical to the export. */
@font-face {
  font-family: 'SummaryNotoEmoji';
  src: url('/assets/fonts/NotoEmoji-Regular.ttf') format('truetype');
  font-display: swap;
}

.sf-doc {
  --sf-text: #1f2937;
  --sf-rule: #e5e7eb;
  --sf-heading: #111827;
  --sf-accent: #fb596e;
  --sf-muted: #9ca3af;
  --sf-separator: #d1d5db;
  --sf-index: #6b7280;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #4b5563;
}

.sf-page {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  flex: none;
  padding: 32mm 18mm 24mm;
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  font-family:
    'SummaryNotoSans', 'SummaryNotoEmoji', 'Noto Sans', Helvetica, Arial,
    sans-serif;
  /* Belt and braces with the U+FE0F strip in summary_facsimile.js: this alone
     fixes Blink but is unsupported in WebKit (i.e. the iOS app's WKWebView). */
  font-variant-emoji: text;
  color: var(--sf-text);
}

.sf-page-head {
  position: absolute;
  top: 8mm;
  left: 18mm;
  right: 18mm;
  height: 18mm;
  border-bottom: 0.5pt solid var(--sf-separator);
}

.sf-page-mascot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 18mm;
  height: 18mm;
  object-fit: contain;
}

.sf-page-brand {
  position: absolute;
  bottom: 5.5mm;
  left: 22mm;
  width: 27mm;
  height: 7mm;
  object-fit: contain;
}

.sf-page-date {
  position: absolute;
  right: 0;
  bottom: 7.5mm;
  font-size: 11px;
  color: var(--sf-muted);
}

.sf-page-foot {
  position: absolute;
  bottom: 10mm;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--sf-muted);
}

/* Every metric below mirrors a ParagraphStyle in render_summary_pdf. ReportLab
   gaps are max(prev.spaceAfter, next.spaceBefore), which is exactly how CSS
   collapses adjacent margins, so the styles map across 1:1 (pt -> px). */
.sf-title {
  margin: 0 0 5.33px !important;
  font-size: 26.67px;
  line-height: 33.33px;
  font-weight: 700;
  text-align: center;
  color: var(--sf-heading);
}

.sf-title-rule {
  height: 2px;
  margin: 2.67px 0 10.67px !important;
  background: var(--sf-accent);
}

/* render_summary_pdf appends Spacer(1, 0.06*72) after the title rule. */
.sf-block--title {
  padding-bottom: 5.76px !important;
}

/* ...and Spacer(1, 0.08*72) = 5.76pt = 7.68px between sections. A ReportLab
   Spacer is a flowable with real height, so this must be padding: a margin
   would collapse against the previous item's and vanish. */
.sf-block--head {
  padding-top: 7.68px;
}

.sf-block--title + .sf-block--head {
  padding-top: 0;
}

.sf-heading {
  margin: 2.67px 0 5.33px !important;
  font-size: 16px;
  line-height: 21.33px;
  font-weight: 700;
  color: var(--sf-heading);
}

.sf-heading-rule {
  height: 1px;
  margin: 1.33px 0 8px !important;
  background: var(--sf-rule);
}

.sf-text {
  margin: 0 0 10.67px !important;
  font-size: 14px;
  line-height: 20.67px;
}

/* The marker sits in its own gutter, exactly as in the PDF, which draws it with
   ReportLab's bulletText at bulletIndent while every text line — first and
   wrapped alike — starts at leftIndent. Measured against the PDF: marker left
   29.3px from the content box. */
.sf-list-item {
  position: relative;
  display: flex;
  padding-left: 29.33px;
}

.sf-list-marker {
  flex: none;
  white-space: pre;
}

.sf-list-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Each gutter is the PDF's marker_gutter() — stringWidth(marker) + 0.6 * the
   marker font size — converted from pt to px, so the text column lands exactly
   where ReportLab puts it. The bullet carries its 0.6em share as the trailing
   space in its marker text; the numbered variants are right-aligned boxes
   holding just the widest number the section reaches, with that share as
   margin-right, so a "1." in a section that runs past 9 items keeps the same
   gap to its text as the "10." does. */
.sf-list-item--bullet .sf-list-marker {
  min-width: 12.62px;
}

.sf-list-item--num1 .sf-list-marker {
  min-width: 11.83px;
}

.sf-list-item--num2 .sf-list-marker {
  min-width: 19.76px;
}

.sf-list-item--num3 .sf-list-marker {
  min-width: 27.69px;
}

.sf-list-item--numbered {
  margin-bottom: 6.67px !important;
  font-size: 13.87px;
  line-height: 20px;
}

.sf-list-item--bullet {
  margin-bottom: 5.33px !important;
  font-size: 12.93px;
  line-height: 17.33px;
}

.sf-list-item--numbered .sf-list-marker {
  color: var(--sf-index);
  font-weight: 700;
  text-align: right;
  margin-right: 8.32px;
}

.sf-table {
  width: 100%;
  margin: 0 0 10.67px !important;
  border-collapse: collapse;
  font-size: 12.93px;
  line-height: 17.33px;
}

.sf-table th,
.sf-table td {
  padding: 3px 5px;
  border: 0.5pt solid var(--sf-rule);
  text-align: left;
  vertical-align: top;
}

.sf-table th {
  font-weight: 700;
  color: var(--sf-heading);
  border-bottom: 1pt solid var(--sf-accent);
  background: #fff5f6;
}

/* The facsimile must mirror the PDF exactly, so every paint property is pinned
   against the surrounding app/modal styles rather than inherited. */
.sf-page .sf-title,
.sf-page .sf-heading,
.sf-page .sf-table th {
  color: var(--sf-heading) !important;
}

.sf-page .sf-text,
.sf-page .sf-list-item,
.sf-page .sf-table td {
  color: var(--sf-text) !important;
}

.sf-page .sf-list-item--numbered .sf-list-marker {
  color: var(--sf-index) !important;
}

/* ── editor chrome ─────────────────────────────────────────────────── */

/* Wide enough that the 210mm page floats with a margin instead of sitting flush
   against the modal edge. modal-variants.css caps study-page modals at 840px
   with !important at (0,5,1), so this has to out-specify that exact selector. */
body:has(.st-pane[data-study-page])
  .modal:not(.st-study-modal)
  .modal-content.sfe-modal-content,
.modal-content.sfe-modal-content {
  max-width: min(1060px, 96vw) !important;
  width: min(1060px, 96vw) !important;
}

.sfe-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.sfe-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.sfe-toolbar-spacer {
  flex: 1 1 auto;
}

.sfe-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border-color, #e5e7eb);
}

.sfe-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px !important;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #fb596e) 10%, transparent);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  white-space: nowrap;
}

body.theme-dark .sfe-hint {
  color: var(--text-color, #f3f0ea);
}

/* Narrow viewports lose the hint before the controls wrap. */
@media (max-width: 900px) {
  .sfe-hint {
    display: none;
  }
}

.sfe-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

/* The framework styles bare `button` under `body.theme-dark` at (0,1,1), which
   outranks a lone `.sfe-tool` and washes the icons out to near-invisible. These
   selectors are (0,2,1) so the editor's own chrome always wins. */
.sfe-shell button.sfe-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  background: var(--card-bg, #ffffff);
  color: var(--text-color, #1f2937);
  cursor: pointer;
  font-size: 12px;
  opacity: 1;
}

.sfe-shell button.sfe-tool > i {
  color: inherit;
}

body.theme-dark .sfe-shell button.sfe-tool {
  border-color: var(--border-color, #4e483f);
  background: var(--card-bg, #1e1d1b);
  color: var(--text-color, #f3f0ea);
}

.sfe-shell button.sfe-tool:hover:not(:disabled) {
  border-color: #fb596e;
}

.sfe-shell button.sfe-tool--active,
body.theme-dark .sfe-shell button.sfe-tool--active {
  border-color: #fb596e;
  color: #fb596e;
}

.sfe-shell button.sfe-tool--danger,
body.theme-dark .sfe-shell button.sfe-tool--danger {
  color: #dc2626;
}

.sfe-shell button.sfe-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.sfe-page-host {
  overflow: auto;
  max-height: 62vh;
  border-radius: 6px;
}

.sfe-loading {
  padding: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #6b7280);
}

/* Hidden with visibility rather than display:none. A display:none element has a
   zero-size rect, and the shared tooltip re-positions in a double-rAF *after*
   the pointer has left — reading that zero rect parked the bubble in the
   top-left corner of the screen. visibility keeps the box measurable. */
.sfe-tools {
  position: absolute;
  top: -6px;
  right: -14px;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  z-index: 2;
}

body.theme-dark .sfe-tools {
  background: var(--card-bg, #1e1d1b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sf-block--head {
  position: relative;
}

/* is-tools-visible is set by the editor when the pointer is anywhere in the
   section, including its items on a later page — not just over the heading. */
.sf-block--head.is-tools-visible .sfe-tools,
.sf-block--head:hover .sfe-tools,
.sf-block--head:focus-within .sfe-tools {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.sf-page [contenteditable='true']:focus {
  outline: 2px solid rgba(251, 89, 110, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Per-line controls: insert a line below, or delete this line. Same
   visibility trick as .sfe-tools so the tooltip never reads a zero rect. They
   hang off .sf-list-item / .sf-text-row, never off the editable node itself. */
.sfe-line {
  position: relative;
}

/* The container carries the visible frame (background + border + shadow).
   A global `button:not([class*="nb-"]) { border:none!important; background:none!important }`
   reset strips button styling, so the pill sits on the div (which the reset
   can't touch) and the buttons force their own paint back with !important. */
.sfe-line-tools {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  z-index: 3;
}

body.theme-dark .sfe-line-tools {
  border-color: var(--border-color, #4e483f);
  background: var(--card-bg, #1e1d1b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sfe-line:hover .sfe-line-tools,
.sfe-line:focus-within .sfe-line-tools {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.sfe-shell button.sfe-line-btn,
.sfe-shell button.sfe-line-btn:hover,
.sfe-shell button.sfe-line-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--text-muted, #6b7280) !important;
  font-size: 12px;
  cursor: pointer;
}

body.theme-dark .sfe-shell button.sfe-line-btn {
  color: var(--text-color, #f3f0ea) !important;
}

.sfe-shell button.sfe-line-btn > i {
  color: inherit;
}

.sfe-shell button.sfe-line-btn:hover {
  border-color: #fb596e !important;
  color: #fb596e !important;
}

.sfe-shell button.sfe-line-btn--danger:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* An empty contenteditable collapses to a 0x0 box, so there is nothing to
   click and the field cannot be reached at all. Give empty ones a real target.
   Scoped to :empty so filled content keeps the exact PDF metrics — and the PDF
   never has empty items anyway, since the server prunes them on save. */
.sf-page [contenteditable='true']:empty {
  display: inline-block;
  min-width: 160px;
  min-height: 1.2em;
  vertical-align: top;
}

.sf-page [contenteditable='true']:empty::before {
  content: attr(data-placeholder);
  color: var(--sf-muted);
  font-weight: 400;
  pointer-events: none;
}

/* Chrome leaves a stray <br> behind when a field is cleared by hand, which
   defeats :empty — this keeps the box clickable in that state too. */
.sf-page [contenteditable='true'][data-sf-item],
.sf-page [contenteditable='true'][data-sf-label] {
  min-height: 1.2em;
}

.sfe-break {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 210mm;
  max-width: 100%;
  font-size: 11px;
  color: #e5e7eb;
}

.sfe-break::before,
.sfe-break::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px dashed rgba(255, 255, 255, 0.45);
}

.sfe-break-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
}

/* ── mobile ────────────────────────────────────────────────────────── */

.mobile-app-bar__save,
.mobile-app-bar__save:hover,
.mobile-app-bar__save:focus,
.mobile-app-bar__save:focus-visible,
.mobile-app-bar__save:active {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary, #fb596e) 26%, transparent);
  background: color-mix(in srgb, var(--primary, #fb596e) 12%, transparent);
  color: var(--primary, #fb596e);
  cursor: pointer;
  font-size: 16px;
  transform: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

.mobile-app-bar__save:disabled {
  opacity: 0.45;
}

body.theme-dark .mobile-app-bar__save {
  border-color: color-mix(in srgb, var(--primary, #fb596e) 34%, transparent);
  background: color-mix(in srgb, var(--primary, #fb596e) 20%, transparent);
}

.sfe-mobile {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sfe-mobile-host {
  flex: 1 1 auto;
  min-height: 0;
}

body[data-mobile]:not([data-mobile='0']) .sfe-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 8px 12px !important;
  background: var(--card-bg, #ffffff);
}

body[data-mobile]:not([data-mobile='0']) .sf-doc {
  padding: 0;
  gap: 10px;
  background: transparent;
}

/* The phone is far narrower than 210mm, so the page reflows to the viewport
   and grows with its content rather than scaling the A4 box down to unreadable
   type. Typography stays identical to the PDF. */
body[data-mobile]:not([data-mobile='0']) .sf-page {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 20px 16px 24px !important;
  box-shadow: none;
}

body[data-mobile]:not([data-mobile='0']) .sf-page-head,
body[data-mobile]:not([data-mobile='0']) .sf-page-foot {
  display: none;
}

body[data-mobile]:not([data-mobile='0']) .sfe-break {
  width: 100%;
  color: var(--text-muted, #6b7280);
}

body[data-mobile]:not([data-mobile='0']) .sfe-break::before,
body[data-mobile]:not([data-mobile='0']) .sfe-break::after {
  border-top-color: var(--border-color, #e5e7eb);
}

body[data-mobile]:not([data-mobile='0']) .sfe-break-remove {
  border-color: var(--border-color, #e5e7eb);
  background: transparent;
  color: var(--text-muted, #6b7280);
}

/* There is no hover on touch, so the section tools are always shown inline. */
body[data-mobile]:not([data-mobile='0']) .sfe-tools {
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: static;
  margin: 6px 0 10px !important;
  box-shadow: none;
  flex-wrap: wrap;
}

/* Same for the per-line controls: anchored inline at the end of the row
   instead of floating over it — including on paragraph rows, whose <p> would
   otherwise push them onto a line of their own. */
body[data-mobile]:not([data-mobile='0']) .sf-text-row {
  display: flex;
  align-items: flex-start;
}

body[data-mobile]:not([data-mobile='0']) .sf-text-row > .sf-text {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-mobile]:not([data-mobile='0']) .sfe-line-tools {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: static;
  transform: none;
  display: inline-flex;
  margin-left: 6px !important;
  vertical-align: middle;
}

body[data-mobile]:not([data-mobile='0']) .sfe-page-host {
  max-height: none;
}

body[data-mobile]:not([data-mobile='0']) .sfe-tool,
body[data-mobile]:not([data-mobile='0']) .sfe-tool:hover,
body[data-mobile]:not([data-mobile='0']) .sfe-tool:focus,
body[data-mobile]:not([data-mobile='0']) .sfe-tool:focus-visible,
body[data-mobile]:not([data-mobile='0']) .sfe-tool:active {
  width: 34px;
  height: 34px;
  transform: none !important;
  filter: none !important;
  background: var(--card-bg, #ffffff);
  color: var(--text-color, #1f2937);
}

body[data-mobile]:not([data-mobile='0']) .sfe-tool--active {
  border-color: #fb596e;
  color: #fb596e !important;
}

body[data-mobile]:not([data-mobile='0']) .sfe-tool--danger {
  color: #dc2626 !important;
}