/* =============================================================================
   Typing on the paper (js/paper-editor/core.js): the fields, the "+" chips, the line tools, the popovers, the field
   tip, the commands and the page breaks. Shared by the free generator (PageAssets.applyMarketingGenerator, after
   components/document-paper.css) and the app's document editor to come. Fields are the printed text itself; nothing
   here moves the paper's layout, and nothing here prints. Prefix pe-. Design source: docs/mocks/app/assets/css/paper-editor.css.
   ============================================================================= */

/* ---------- the sheet at the PDF's printable width (--pe-sheet-w, set by the page from PdfPage), scaled to fit ---------- */
.pe-stage { --pe-tool-gutter: calc(var(--icon-btn) + var(--space-2)); position: relative; box-sizing: border-box; min-width: 0; }
.pe-stage:has(.pe-rt__right button + button) { --pe-tool-gutter: calc(2 * var(--space-7) + 2 * var(--space-2) + var(--space-1)); }
.pe-stage.is-editing { padding-inline-end: var(--pe-tool-gutter); }
.pe-page { position: relative; width: var(--pe-sheet-w); margin-inline: auto; transform-origin: 0 0; }
.pe-page .paper { view-transition-name: pe-paper; }
::view-transition-old(pe-paper), ::view-transition-new(pe-paper) { animation-duration: .26s; animation-timing-function: var(--ease-out); }

/* where a page breaks: a clear line across the paper, labeled in the margin; fades out when turned off */
.pe-fold { position: absolute; z-index: 1; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--gold) 70%, transparent); pointer-events: none; transition: opacity .25s var(--ease-out); }
.pe-fold::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 10px; background: linear-gradient(color-mix(in srgb, var(--gold) 10%, transparent), transparent); }
.pe-fold span { position: absolute; right: calc(100% + var(--space-3)); top: 0; translate: 0 -50%; padding: calc(var(--space-1) * 0.25) var(--space-2); border-radius: var(--r-pill); background: var(--ink); font-size: var(--fs-xs); font-weight: 600; color: var(--bg-panel); white-space: nowrap; }
.pe-fold.is-off { opacity: 0; }
@media (max-width: 1000px) { .pe-fold span { right: var(--space-2); } }
/* the page the breaks are measured in, out of sight (core.js measuringPage) */
.pe-measure { position: fixed; left: -10000px; top: 0; height: 0; border: 0; visibility: hidden; pointer-events: none; }

/* ---------- a field is the printed text itself ---------- */
/* a tint on hover, a gold ring while typing; never a box that moves the layout */
.paper .pe-f { border-radius: var(--r-xs); outline: 1.5px solid transparent; outline-offset: 2px; cursor: text; min-width: 1ch; caret-color: var(--gold-deep);
  transition: background-color .15s var(--ease-out), outline-color .15s var(--ease-out); }
.paper .pe-f:hover { background-color: color-mix(in srgb, var(--pe-tint) 13%, transparent); }
.paper .pe-f:focus { outline-color: var(--gold); background-color: color-mix(in srgb, var(--pe-tint) 7%, transparent); }
.paper .pe-f:empty { display: inline-block; }
.paper .pe-f:empty::before { content: attr(data-ph); opacity: .42; font-style: italic; font-weight: 400; pointer-events: none; }
.paper .pe-f:focus:empty::before { opacity: .28; }
.paper .pe-f[data-multi] { display: block; white-space: pre-wrap; min-height: 1.4em; }
.paper .pe-f.is-num { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.paper .pe-f.is-missing { outline: 1.5px dashed var(--overdue-fg); }
.paper .pe-f.is-missing:empty::before { color: var(--overdue-fg); opacity: 1; }
/* choices look like the print, with a dotted rule on hover that says "this opens" */
.paper button.pe-pick { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted transparent; text-underline-offset: 3px; border-radius: var(--r-xs); transition: background-color .15s, text-decoration-color .15s; }
.paper button.pe-pick:hover, .paper button.pe-pick[aria-expanded="true"] { text-decoration-color: currentColor; background-color: color-mix(in srgb, var(--pe-tint) 13%, transparent); }
.paper button.pe-pick:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; }
.paper button.pe-pick:empty::before { content: attr(data-ph); opacity: .42; font-style: italic; }
.paper .dt-desc .pe-f[data-multi] { min-width: 8em; }
/* formatted text (meta rich): a block of what it prints, ringed while its editor is in it */
.paper .pe-rich, .paper .pe-rich:empty { display: block; min-height: 1.4em; }
.paper .pe-rich:focus-within { outline-color: var(--gold); background-color: var(--gold-wash); }
.paper .pe-rich > :first-child { margin-top: 0; }
.paper .dt-desc .pe-rich { min-width: 8em; }

/* a figure your typing moved glows once */
.paper .pe-tick { animation: pe-tick .9s var(--ease-out); border-radius: var(--r-xs); }
@keyframes pe-tick { 0% { background-color: color-mix(in srgb, var(--pe-tint) 34%, transparent); } 100% { background-color: transparent; } }
/* a line that arrives slides in */
.paper tr.pe-new > td { animation: pe-arrive .32s var(--ease-out); }
@keyframes pe-arrive { from { opacity: 0; transform: translateY(-4px); } }

/* "+" chips: optional parts, quiet until the pointer is on the paper */
.paper .pe-adds { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: calc(var(--space-1) * 1.5); }
.paper .pe-adds--summary { margin: 0 0 calc(var(--space-1) * 2.5); }
.paper .tk-dts > .pe-adds--ref, .paper .lo-dl > .pe-adds--ref { margin-top: 0; align-self: baseline; }
.paper .pe-adds--totals { justify-content: flex-end; margin-top: var(--space-2); }
.paper .pe-add { display: inline-flex; align-items: center; gap: var(--icon-gap-xs); padding: calc(var(--space-1) * 0.5) var(--space-2) calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5); border: 1px dashed color-mix(in srgb, var(--pe-dash) 45%, transparent); border-radius: var(--r-pill); background: none;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--caption); opacity: .55; transition: opacity .2s, border-color .15s, color .15s; }
.paper:hover .pe-add, .paper:focus-within .pe-add, .paper .pe-add:focus-visible { opacity: 1; }
.paper .pe-add:hover { border-color: var(--gold); border-style: solid; color: var(--ink); }
/* on the brand band the add chip takes the band's ink and stays readable without hover */
.paper .tk-bar .pe-add { opacity: 1; color: var(--doc-brand-ink); border-color: color-mix(in srgb, var(--doc-brand-ink) 70%, transparent); }
.paper .tk-bar .pe-add:hover { color: var(--doc-brand-ink); border-color: var(--doc-brand-ink); border-style: solid; }
.paper .pe-addline { display: flex; align-items: center; gap: var(--icon-gap-sm); width: 100%; margin: calc(var(--space-1) * 1.5) 0 var(--space-1); padding: calc(var(--space-1) * 2.25) calc(var(--space-1) * 2.5); border: 1px dashed color-mix(in srgb, var(--pe-dash) 40%, transparent); border-radius: var(--r-md);
  background: none; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--caption); text-align: left; transition: border-color .15s, background-color .15s, color .15s; }
.paper .pe-addline:hover { border-color: var(--gold); background: color-mix(in srgb, var(--pe-tint) 6%, transparent); color: var(--ink); }
.paper .pe-addline__tip { margin-left: auto; font-weight: 400; color: var(--caption); opacity: 0; transition: opacity .2s; }
.paper .pe-addline:hover .pe-addline__tip, .paper .pe-addline:focus-visible .pe-addline__tip { opacity: 1; }
@media (hover: none), (max-width: 680px) { .paper .pe-addline__tip { display: none; } }

/* the totals: a rate typed in its row's label; a quiet x takes the row away */
.paper .dtot { position: relative; }
.paper .pe-x { position: absolute; right: -26px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--caption); opacity: 0; transition: opacity .15s; }
.paper .dtot:hover .pe-x, .paper .dtot:focus-within .pe-x, .paper .pe-x:focus-visible { opacity: 1; }
.paper .pe-x:hover { background: var(--paper); color: var(--ink); }
.paper .pe-unit { margin-left: calc(var(--space-1) * 0.75); padding: 0 calc(var(--space-1) * 1.25); border: 1px solid color-mix(in srgb, var(--pe-dash) 35%, transparent); border-radius: var(--r-xs); background: none; font: inherit; font-size: .85em; color: inherit; }
.paper .pe-unit:hover { border-color: var(--gold); }

/* the logo: the mark is the button */
.paper .pe-logo { position: relative; cursor: pointer; transition: outline-color .15s; outline: 2px solid transparent; outline-offset: 3px; }
.paper .pe-logo:hover, .paper .pe-logo:focus-visible { outline-color: var(--gold); }
.paper .pe-logo[data-hint]:hover::after { content: attr(data-hint); position: absolute; left: 50%; top: calc(100% + var(--space-2)); translate: -50% 0; padding: calc(var(--space-1) * 0.75) var(--space-2); border-radius: var(--r-pill);
  background: var(--ink); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bg-panel); white-space: nowrap; z-index: var(--z-popover); }

/* dragging a line */
.paper tr.pe-dragging > td { opacity: .4; }
.paper tr.pe-drop-before > td { box-shadow: inset 0 2px 0 var(--gold); }
.paper tr.pe-drop-after > td { box-shadow: inset 0 -2px 0 var(--gold); }
body.pe-is-dragging, body.pe-is-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- the line tools, in the margin beside the row ---------- */
.pe-rt { position: absolute; z-index: 2; pointer-events: none; }
.pe-rt button { pointer-events: auto; display: grid; place-items: center; flex-shrink: 0; width: var(--space-7); height: var(--space-7); padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--caption); transition: background-color .15s, color .15s; }
.pe-rt button:hover { background: color-mix(in srgb, var(--bg-panel) 85%, transparent); color: var(--ink); }
.pe-rt__grip { position: absolute; left: calc(-1 * var(--icon-btn)); top: var(--space-2); cursor: grab; touch-action: none; }
.pe-rt__right { position: absolute; left: calc(100% + var(--space-2)); top: var(--space-2); display: flex; width: max-content; gap: var(--space-1); }
.pe-rt__tax { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.pe-rt .pe-rt__tax[aria-pressed="true"] { background: var(--ink); color: var(--bg-panel); box-shadow: none; }
.pe-rt [hidden] { display: none; }
.pe-rt.is-narrow .pe-rt__grip { display: none; }

/* ---------- the field you're in ---------- */
.pe-tip, .pe-pop, .pe-cmd, .pe-suggest { --fs-sm: var(--type-sm); --fs-body: var(--type-body); }
.pe-tip { position: fixed; z-index: var(--z-popover); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) calc(var(--space-1) * 2.25); border-radius: var(--r-md); background: var(--ink); font: 400 var(--fs-sm)/var(--lh) var(--font-sans); color: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pe-shadow) 50%, transparent); animation: pe-fade .14s var(--ease-out); }
.pe-tip b { color: var(--bg-panel); font-weight: 600; }
.pe-tip span::before { content: "\00b7"; margin-right: var(--space-2); opacity: .5; }
.pe-tip kbd { padding: 0 var(--space-1); border-radius: var(--r-xs); background: color-mix(in srgb, var(--bg-panel) 14%, transparent); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--bg-panel); }
.pe-tip[hidden] { display: none; }
@keyframes pe-fade { from { opacity: 0; } }

/* ---------- popovers: a choice opens where it sits ---------- */
.pe-pop { position: fixed; z-index: var(--z-popover); display: grid; gap: var(--space-2); width: max-content; max-width: min(var(--pop-w-max), calc(100vw - var(--space-4))); padding: calc(var(--space-1) * 2.5); border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--bg-panel); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pe-shadow) 3%, transparent), 0 18px 44px -14px color-mix(in srgb, var(--pe-shadow) 36%, transparent); font: 400 var(--fs-body)/var(--lh) var(--font-sans); animation: pe-pop-in .16s var(--ease-out); transform-origin: top left; }
.pe-pop[hidden] { display: none; }
@keyframes pe-pop-in { from { opacity: 0; transform: scale(.97) translateY(-3px); } }
.pe-pop__label { display: grid; gap: var(--space-1); margin: 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; color: var(--text-muted); }
.pe-pop__label input { padding: calc(var(--space-1) * 1.75) calc(var(--space-1) * 2.25); border: 1px solid var(--field-border); border-radius: var(--r-md); font: 400 var(--fs-body)/var(--lh) var(--font-sans); letter-spacing: normal; color: var(--ink); }
.pe-pop__label input:focus { outline: none; border-color: var(--ink); box-shadow: var(--field-focus); }
.pe-pop__note { margin: 0; max-width: 26em; font-size: var(--fs-sm); color: var(--caption); }
.pe-pop__list { display: grid; gap: calc(var(--space-1) * 0.25); min-width: var(--pop-w); max-height: var(--pop-list-h); overflow: auto; }
.pe-pop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--space-1) * 0.75); max-height: var(--pop-list-h); overflow: auto; }
.pe-pop__opt { display: flex; justify-content: space-between; gap: calc(var(--space-1) * 4.5); padding: calc(var(--space-1) * 1.75) calc(var(--space-1) * 2.5); border: 0; border-radius: var(--r-md); background: none; font: inherit; color: var(--ink); text-align: left; }
.pe-pop__opt span { color: var(--caption); font-variant-numeric: tabular-nums; }
.pe-pop__opt:hover, .pe-pop__opt:focus-visible { background: var(--paper); outline: none; }
.pe-pop__opt[aria-pressed="true"] { background: var(--ink); color: var(--bg-panel); }
.pe-pop__opt[aria-pressed="true"] span { color: color-mix(in srgb, var(--bg-panel) 70%, transparent); }
.pe-pop__grid .pe-pop__opt { justify-content: flex-start; gap: var(--space-2); }
.pe-pop__remove { color: var(--text-muted); border-top: 1px solid var(--line); border-radius: 0; }
.pe-pop__seg { display: inline-flex; justify-self: start; padding: calc(var(--space-1) * 0.75); border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pe-pop__seg .pe-pop__opt { padding: calc(var(--space-1) * 1.25) var(--space-4); border-radius: var(--r-pill); font-weight: 600; color: var(--text-muted); }
.pe-pop__seg .pe-pop__opt[aria-pressed="true"] { background: var(--bg-panel); color: var(--ink); box-shadow: var(--shadow-sm); }
.pe-pop__row { display: flex; gap: calc(var(--space-1) * 1.5); }
.pe-pop__row .btn { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); cursor: pointer; }

/* ---------- commands (Ctrl/Cmd+K) ---------- */
.pe-cmd { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; justify-items: center; align-items: start; padding: 16vh var(--space-4) var(--space-4); background: var(--pe-scrim);
  font: 400 var(--fs-body)/var(--lh) var(--font-sans); backdrop-filter: blur(3px); animation: pe-fade .15s; }
.pe-cmd[hidden] { display: none; }
/* the commands' box: a dialog's width, room for the longest command and its keys */
.pe-cmd__box { width: min(520px, 100%); overflow: hidden; border-radius: var(--r-xl); background: var(--bg-panel); box-shadow: var(--shadow-dialog); animation: pe-pop-in .18s var(--ease-out); transform-origin: top center; }
.pe-cmd__box input { width: 100%; padding: var(--space-4) calc(var(--space-1) * 4.5); border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); outline: none; }
.pe-cmd__list { max-height: var(--dialog-list-h); margin: 0; padding: calc(var(--space-1) * 1.5); overflow: auto; list-style: none; }
.pe-cmd__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: calc(var(--space-1) * 2.25) var(--space-3); border-radius: var(--r-lg); color: var(--ink); cursor: pointer; }
.pe-cmd__list li[aria-selected="true"] { background: var(--paper); box-shadow: inset 2px 0 0 var(--gold); }
.pe-cmd__list kbd { flex: none; padding: calc(var(--space-1) * 0.25) calc(var(--space-1) * 1.5); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--bg-panel); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--caption); }
.pe-cmd__none { color: var(--caption) !important; cursor: default !important; }

/* ---------- touch: text the phone never zooms into, and a 44px target on every control ----------
   A field's text is at least 16px (smaller zooms the page in when typed in). Fields stand one above another, so each is
   44px tall where it is (the phone's paper reflows anyway); a chip or a small button grows by a box of its own that
   doesn't move the layout. */
@media screen and (pointer: coarse) {
  .paper:has(.pe-f) .doc-table { font-size: max(var(--fs-touch-min), var(--fs-body)); }
  .paper .pe-f, .paper button.pe-pick, .pe-pop .pe-pop__label input, .pe-pop .pe-pop__search input, .pe-cmd .pe-cmd__box input { font-size: max(var(--fs-touch-min), 1em); }
  .paper .pe-f:not([data-multi], .pe-rich), .paper button.pe-pick { display: inline-block; min-height: var(--tap-min); line-height: var(--tap-min); }
  .paper .pe-f[data-multi], .paper .pe-rich, .paper .pe-addline { min-height: var(--tap-min); }
  .paper .pe-adds { min-height: var(--tap-min); align-items: center; }
  .paper .pe-f, .paper button.pe-pick, .paper .pe-add, .paper .pe-x { position: relative; }
  .paper .pe-f::after, .paper button.pe-pick::after, .paper .pe-add::after, .paper .pe-x::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100% + var(--space-3), var(--tap-min)); height: max(100%, var(--tap-min)); translate: -50% -50%; }
  .pe-pop__opt, .pe-cmd__list li { min-height: var(--tap-min); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-pop, .pe-cmd, .pe-cmd__box, .pe-tip, .paper tr.pe-new > td { animation: none; }
}
@media print {
  .pe-stage.is-editing { padding-inline-end: 0; }
  .pe-fold, .pe-rt, .pe-tip, .pe-pop, .pe-cmd, [data-pe-noprint] { display: none !important; }
}