/* =============================================================================
   The free invoice generator (pages/invoice-generator.html): you type on the invoice itself. Loads after outer/site.css,
   outer/pages.css and components/document-paper.css (PageAssets.applyMarketingGenerator). Design source:
   docs/mocks/site/invoice-maker/inline.html and inline.css, which this follows section by section; the plan is
   docs/INLINE_EDITOR_PLAN.md. Typing on the paper (fields, chips, line tools, popovers, the tip, commands, page breaks)
   is components/paper-editor.css; this is the page around it. The site has no dark theme. Prefix: mk-. The desk's warm
   light is this page's own value.
   ============================================================================= */

.mk-desk { --mk-desk-light: #fdfbf6; --mk-desk: #f4efe3; --mk-desk-edge: #ece5d4; }
.mk-swatch--house { --c: var(--gold); }

/* ---------- the head: short and centered, so the paper starts above the fold ---------- */
.mk-head { padding-block: clamp(28px, 4vw, 48px) 26px; text-align: center; }
.mk-head h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.035em; }
.mk-head .lead { max-width: 34em; margin: 12px auto 0; }
.mk-head .alert { max-width: 640px; margin: 16px auto 0; text-align: left; }

/* ---------- the desk: the paper alone on it ---------- */
.mk-desk { padding-block: 28px 40px; border-block: 1px solid var(--line);
  background: radial-gradient(1100px 520px at 32% -10%, var(--mk-desk-light) 0%, var(--mk-desk) 58%, var(--mk-desk-edge) 100%); }
.mk-wrap { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.mk-trust { justify-content: center; margin-top: 22px; }
.mk-noscript { margin-top: 12px; text-align: center; }

/* the sheet on the desk (its size and page breaks: components/paper-editor.css) */
.mk-page .paper { box-shadow: 0 1px 1px rgba(40, 32, 16, .05), 0 2px 6px rgba(40, 32, 16, .05), 0 24px 48px -24px rgba(40, 32, 16, .34), 0 60px 110px -60px rgba(40, 32, 16, .32);
  transition: box-shadow .3s var(--ease-out), translate .3s var(--ease-out); }
.mk-stage.is-drop .paper { outline: 2px dashed var(--gold); outline-offset: 8px; }
.mk-stage.is-drop::after { content: "Drop your logo"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: var(--r-lg);
  background: rgba(253, 251, 246, .72); font-size: var(--fs-md); font-weight: 600; color: var(--ink); pointer-events: none; }
/* printing: the sheet lifts and a gold line passes down it, like a proof leaving the press */
.mk-stage.is-printing .paper { translate: 0 -4px; box-shadow: 0 2px 4px rgba(40, 32, 16, .08), 0 34px 60px -26px rgba(40, 32, 16, .45); }
.mk-stage.is-printing .paper::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: mk-press 1.4s var(--ease-out) infinite; }
@keyframes mk-press { from { top: 0; opacity: 1; } to { top: 100%; opacity: .2; } }

/* ---------- a first visit: one pointer ---------- */
.mk-coach { position: absolute; z-index: 3; padding: 7px 12px; border-radius: var(--r-pill); background: var(--ink); font-size: var(--fs-sm); font-weight: 600; color: #fff; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(40, 32, 16, .6); pointer-events: none; animation: mk-coach-in .5s var(--ease-out) .4s both, mk-bob 2.4s ease-in-out .9s infinite; }
.mk-coach::before { content: ""; position: absolute; left: 18px; top: -5px; width: 10px; height: 10px; background: var(--ink); rotate: 45deg; border-radius: 2px; }
.mk-coach.is-beside::before { left: -4px; top: calc(50% - 5px); }
.mk-coach[hidden] { display: none; }
@keyframes mk-coach-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes mk-bob { 50% { transform: translateY(-3px); } }

/* ---------- the bar: on the paper's top edge, sticking under the site header ---------- */
/* as wide as the paper, so it reads as the paper's own toolbar; what you change is right below it */
.mk-bar { position: sticky; top: 72px; z-index: 6; width: 100%; max-width: var(--pe-sheet-w); margin: 0 auto 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px;
  background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 0 0 1px rgba(40, 32, 16, .08), 0 14px 32px -20px rgba(40, 32, 16, .4); }
.mk-bar__row { display: flex; align-items: center; gap: 4px; padding: 6px; }
/* when the bar is tight, the template name gives way first; every button keeps its size */
.mk-bar__row > * { flex: none; }
.mk-bar__row > .mk-menuwrap { flex: 0 1 auto; min-width: 0; }
.mk-bar__row > .mk-spacer { flex: 1; }
.mk-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--icon-gap-sm); height: 36px; padding: 0 11px; border: 0; border-radius: 10px; background: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; transition: background-color .15s; }
.mk-tool:hover, .mk-tool[aria-expanded="true"] { background: rgba(40, 32, 16, .06); }
.mk-tool[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mk-tool[hidden] { display: none; }
.mk-icon { width: 36px; padding: 0; }
.mk-tool .bg-icon--chevron-down { color: var(--caption); transition: rotate .2s var(--ease-out); }
.mk-tool[aria-expanded="true"] .bg-icon--chevron-down { rotate: 180deg; }

/* the template: what this invoice started from, and the others to start from */
.mk-menuwrap { position: relative; }
.mk-tpl { gap: 6px; max-width: 100%; padding-left: 12px; }
.mk-tpl__k { font-weight: 400; color: var(--caption); }
.mk-tpl__v { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.mk-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 8; display: grid; gap: 1px; width: 300px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 18px 44px -14px rgba(40, 32, 16, .36); animation: pe-pop-in .16s var(--ease-out); transform-origin: top left; }
.mk-menu[hidden] { display: none; }
.mk-menu a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.mk-menu a span { font-size: var(--fs-xs); font-weight: 400; color: var(--caption); }
.mk-menu a:hover, .mk-menu a:focus-visible { background: var(--paper); outline: none; }
.mk-menu a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--gold); background: var(--paper); }

/* the style: its button shows the style it's on; it opens as a row inside the bar */
.mk-thumb { --b: var(--gold); display: block; width: 100%; max-width: 54px; aspect-ratio: 8.5 / 7; border-radius: 3px; background-color: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 4px -2px rgba(40, 32, 16, .2); }
.mk-thumb--classic { background-image: linear-gradient(var(--b), var(--b)), linear-gradient(#ddd5c3, #ddd5c3), linear-gradient(#ebe5d8, #ebe5d8), linear-gradient(#ebe5d8, #ebe5d8);
  background-size: 100% 2px, 40% 3px, 80% 2px, 80% 2px; background-position: 0 0, 15% 26%, 50% 62%, 50% 78%; background-repeat: no-repeat; }
.mk-thumb--bold { background-image: linear-gradient(var(--b), var(--b)), linear-gradient(#ddd5c3, #ddd5c3), linear-gradient(#ebe5d8, #ebe5d8);
  background-size: 100% 22%, 40% 3px, 80% 2px; background-position: 0 0, 15% 45%, 50% 75%; background-repeat: no-repeat; }
.mk-thumb--sidebar { background-image: linear-gradient(var(--b), var(--b)), linear-gradient(#f3eee2, #f3eee2), linear-gradient(#ebe5d8, #ebe5d8), linear-gradient(#ebe5d8, #ebe5d8);
  background-size: 2px 100%, 32% 100%, 52% 2px, 52% 2px; background-position: 32% 0, 0 0, 90% 40%, 90% 60%; background-repeat: no-repeat; }
.mk-thumb--overlay { background-image: linear-gradient(#fff, #fff), linear-gradient(var(--b), var(--b)), linear-gradient(#ebe5d8, #ebe5d8);
  background-size: 76% 26%, 100% 30%, 80% 2px; background-position: 50% 30%, 0 0, 50% 78%; background-repeat: no-repeat; }
.mk-stylebtn .mk-thumb { width: 22px; max-width: none; }
.mk-look { display: flex; align-items: center; gap: 14px; padding: 8px 10px 10px; border-top: 1px solid var(--line); animation: mk-open .2s var(--ease-out); }
.mk-look[hidden] { display: none; }
@keyframes mk-open { from { opacity: 0; transform: translateY(-4px); } }
.mk-styles { display: flex; gap: 4px; }
.mk-styles button { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border: 1px solid transparent; border-radius: 10px; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); transition: background-color .15s, border-color .15s; }
.mk-styles button:hover { background: rgba(40, 32, 16, .05); }
.mk-styles button[aria-pressed="true"] { border-color: var(--ink); background: #fff; color: var(--ink); }
.mk-styles .mk-thumb { width: 26px; max-width: none; }
.mk-colors { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--line); }
.mk-swatch { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.mk-anycolor { position: relative; display: inline-grid; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#d24, #e93, #ec3, #4b6, #39c, #64c, #d24); cursor: pointer; }
.mk-anycolor input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mk-look__done { margin-left: auto; }

/* readiness: a ring that fills as the PDF's needs are met, then steps aside */
.mk-ready { --p: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px 0 9px; border: 0; border-radius: 10px; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: background-color .15s, color .2s; }
.mk-ready:hover { background: rgba(40, 32, 16, .06); color: var(--ink); }
.mk-ready[hidden] { display: none; }
.mk-ring { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff;
  background: radial-gradient(closest-side, #fff 64%, transparent 66%), conic-gradient(var(--gold) calc(var(--p) * 1%), var(--line) 0); }
.mk-ready.is-ready { color: var(--paid-fg); }
.mk-ready.is-ready .mk-ring { background: var(--paid-fg); animation: mk-pop .35s var(--ease-out); }
@keyframes mk-pop { 50% { transform: scale(1.18); } }

/* page breaks: a labeled switch, the app's own (form-field.css .bg-switch: sand track, gold when on) */
.mk-breaks { gap: 8px; padding: 0 10px; color: var(--text-muted); cursor: pointer; }
.mk-breaks:has(:checked) { color: var(--ink); }
.mk-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 30px; height: 18px; margin: 0; border: 0; border-radius: var(--r-pill);
  background: var(--sand-300); cursor: pointer; transition: background .15s ease; }
.mk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.mk-switch:checked { background: var(--gold); }
.mk-switch:checked::after { transform: translateX(12px); }
.mk-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Send appears once there's a PDF to send */
.mk-send { box-shadow: inset 0 0 0 1px var(--line); animation: mk-open .25s var(--ease-out); }
.mk-download { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); height: 38px; margin-left: 2px; padding: 0 7px 0 14px; border-radius: 11px; white-space: nowrap; transition: background-color .2s; }
.mk-download.is-done { background: var(--paid-fg); border-color: var(--paid-fg); }
.mk-download.mk-glow { animation: mk-glow 1.4s var(--ease-out); }
@keyframes mk-glow { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .7); } 100% { box-shadow: 0 0 0 14px rgba(201, 162, 75, 0); } }
.mk-count { padding: 2px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-download[aria-busy="true"] .bg-icon { animation: mk-spin .8s linear infinite; }
@keyframes mk-spin { to { rotate: 360deg; } }

/* the note drops from the bar, under its right end where Download and Send are */
.mk-note { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; display: grid; width: min(560px, 100%); }
.mk-note:empty { display: none; }
.mk-note__card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--ink); color: rgba(255, 255, 255, .86);
  font-size: var(--fs-sm); box-shadow: 0 18px 40px -18px rgba(40, 32, 16, .6); animation: mk-drop .22s var(--ease-out); }
.mk-note__card b { color: #fff; font-weight: 600; }
.mk-note__card > .bg-icon { flex: none; color: var(--gold-soft); }
.mk-note__card--error > .bg-icon { color: var(--overdue-bg); }
.mk-note__card--ok > .bg-icon { color: var(--paid-bg); }
.mk-note__text { flex: 1; line-height: 1.45; }
.mk-note__act { flex: none; padding: 6px 11px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); font: inherit; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mk-note__act:hover { background: rgba(255, 255, 255, .2); }
.mk-note__act--primary { background: var(--gold); color: var(--ink); }
.mk-note__act--primary:hover { background: var(--gold-soft); }
.mk-note__x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .6); }
.mk-note__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@keyframes mk-drop { from { opacity: 0; transform: translateY(-6px); } }

.mk-linkbtn { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); padding: 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }

/* ---------- Send: a dialog over the page ---------- */
.mk-send-dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(40, 32, 16, .55); }
.mk-send-dlg[open] { animation: pe-pop-in .2s var(--ease-out); }
.mk-send-dlg::backdrop { background: rgba(32, 27, 18, .32); backdrop-filter: blur(3px); }
.mk-next { display: grid; gap: 16px; padding: 22px; }
.mk-next__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
.mk-next__head h2 { font-size: var(--fs-lg, 22px); letter-spacing: -.02em; }
.mk-next__head .caption { grid-column: 1 / -1; }
.mk-next__x { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--caption); }
.mk-next__x:hover { background: var(--paper); color: var(--ink); }
.mk-mail { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.mk-mail__row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.mk-mail__row > span:first-child { color: var(--caption); }
.mk-mail__row > span:last-child { color: var(--ink); font-weight: 600; }
.mk-mail__body { min-height: 120px; padding: 14px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.mk-mail [contenteditable] { outline: none; border-radius: 4px; }
.mk-mail [contenteditable]:hover { background: rgba(201, 162, 75, .08); }
.mk-mail [contenteditable]:focus { background: rgba(201, 162, 75, .06); box-shadow: inset 0 0 0 1.5px var(--gold); }
.mk-mail__file { display: flex; align-items: center; gap: var(--icon-gap-sm); padding: 9px 14px; border-top: 1px dashed var(--line); background: var(--paper); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.mk-mail__file .caption { margin-left: auto; font-weight: 400; }
.mk-next__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-next__actions .btn { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); }
#mkCopyMail.is-done { background: var(--paid-fg); border-color: var(--paid-fg); }
.mk-next__tips { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-muted); }
.mk-next__tips b { color: var(--ink); font-weight: 600; }
.mk-next__tips [hidden] { display: none; }
.mk-next__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mk-next__row .btn { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); }
.mk-next__offer { padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); }
.mk-next__offer a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- the content under the tool (what search reads) ---------- */
.mk-content { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.mk-content .section__head + * { margin-top: 32px; }
.mk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.mk-steps li { counter-increment: s; }
.mk-steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); font-weight: 700; font-size: var(--fs-sm); }
.mk-steps h3 { margin-top: 12px; font-size: var(--fs-md); letter-spacing: -.01em; }
.mk-steps p { margin-top: 6px; color: var(--text-muted); }
@media (max-width: 860px) { .mk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mk-steps { grid-template-columns: minmax(0, 1fr); } }

/* free vs BillGrid: what each does, plainly */
.mk-vs { width: 100%; max-width: 820px; border-collapse: collapse; font-size: var(--fs-body); }
.mk-vs th, .mk-vs td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mk-vs thead th { font-size: var(--fs-sm); color: var(--caption); font-weight: 600; }
.mk-vs td:nth-child(n+2), .mk-vs th:nth-child(n+2) { width: 150px; text-align: center; }
.mk-vs .yes { color: var(--paid-fg); }
.mk-vs .no { color: var(--caption); }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .mk-tpl__k, .mk-stylebtn__label { display: none; }
  .mk-stylebtn { padding-inline: 8px; }
}
/* a phone: labels give way to icons; the style row wraps into thumbs, then colors */
@media (max-width: 680px) {
  .mk-desk { padding-block: 16px 28px; }
  .mk-bar { top: 64px; border-radius: 14px; }
  .mk-bar__row { gap: 2px; padding: 5px; }
  .mk-send__label { display: none; }
  .mk-tpl { padding-left: 9px; }
  .mk-tpl__v { max-width: 6.5em; }
  .mk-look { flex-wrap: wrap; gap: 10px; }
  .mk-styles { width: 100%; justify-content: space-between; }
  .mk-styles button { flex-direction: column; gap: 3px; padding: 5px 6px; font-size: var(--fs-xs); }
  .mk-colors { padding-left: 0; border-left: 0; }
  .mk-note__card { flex-wrap: wrap; }
  .mk-coach { white-space: normal; max-width: 220px; }
  .mk-download { padding-left: 11px; }
}
@media (max-width: 480px) {
  .mk-ready { padding-inline: 9px; } .mk-ready > span:last-child { display: none; }
  .mk-download__label { display: none; }
  .mk-download { padding-left: 9px; }
  .mk-tool .bg-icon--chevron-down { display: none; }
  .mk-tpl { padding-inline: 9px; }
  .mk-stylebtn { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-coach, .mk-note__card, .mk-send-dlg[open], .mk-menu, .mk-look, .mk-ready.is-ready .mk-ring, .mk-download.mk-glow { animation: none; }
}

/* ---------- print: only as the busy fallback (body.mk-print-sheet), the sheet alone ---------- */
@media print {
  body.mk-print-sheet > :not(main), body.mk-print-sheet :is(.mk-head, .mk-bar, .mk-trust, .mk-content, .site-footer, .site-header) { display: none !important; }
  body.mk-print-sheet .mk-desk { padding: 0; background: none; border: 0; }
  body.mk-print-sheet .mk-stage { height: auto !important; }
  body.mk-print-sheet .mk-page { width: auto; transform: none !important; }
  body.mk-print-sheet .mk-page .paper { box-shadow: none; }
  body.mk-print-sheet .mk-coach { display: none !important; }
  /* no print offer (under the daily cap or past it): the sheet is not printed on its own */
  body:not(.mk-print-sheet) .mk-stage { display: none !important; }
  @page { margin: 12mm; }
}