/* THE PROPOSAL DOCUMENT, one shared design, rendered in two places: the
   customer page (proposal-view.html) and the editor canvas
   (proposal-studio.html). Same rule as invoice-doc.css: change it here, both
   follow. Built against design/reference-sana/ (DESIGN-NOTES.md):
   - THE WHOLE PAGE STAYS ON THE THEME, one hue family, the type in its own
     foreground colour (light themes exist now: Paper, Mint, Sky).
   - THE HERO IS A PHOTOGRAPH inside a rounded block, the theme's colour
     laid gently over it, the small type on frosted glass.
   - THE MONEY IS AN OBJECT floating on the ground.
   - air everywhere.
   The theme is a set of custom properties on .pp-card; the palette picker
   and the image sampler only ever write those. */
:root {
  --pp-ink: #241226;            /* the ground */
  --pp-ink-2: #4a2036;          /* sibling, for the light field */
  --pp-edge: #a0522d;           /* the warm light in the gradient */
  --pp-acid: #ffc24a;           /* the single accent */
  --pp-fg: #ffffff;             /* type on the ground */
  --pp-fg-dim: rgba(255,255,255,.55);
  --pp-on-ink: rgba(255,255,255,.82);
  --pp-on-ink-dim: rgba(255,255,255,.55);
  --pp-paper: #fffdf9;          /* the money object */
  --pp-paper-ink: #241a20;
  --pp-tint: rgba(255,255,255,.06);   /* tinted cards on the ground */
}
body { background: #fff; }
.pp-wrap { max-width: 1060px; margin: 0 auto; padding: 26px 22px 90px; }
.pp-card { background: var(--pp-ink); color: var(--pp-fg); border-radius: 26px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,10,24,.08); }
/* LIGHT themes: the ground is pale, the type is ink */
.pp-card--light { --pp-fg: var(--pp-paper-ink); --pp-fg-dim: rgba(0,0,0,.5); --pp-on-ink: rgba(0,0,0,.72); --pp-on-ink-dim: rgba(0,0,0,.45); --pp-tint: rgba(0,0,0,.05); }

/* == THE HERO ============================================================== */
.pp-hero { position: relative; min-height: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: stretch; padding: 40px; overflow: hidden; background: var(--pp-ink); }
.pp-hero__text { display: flex; flex-direction: column; justify-content: center; padding: 48px 24px 48px 32px; text-align: left; }
/* the photo, untouched, inset with rounded corners (Sana's bevel) */
.pp-hero__photo { border-radius: 18px; background: var(--pp-photo) center / cover no-repeat; min-height: 520px; }
/* THE PHOTO WEARS THE TEMPLATE'S COLOUR (Peter, 8 Sep): a real photograph, washed in the ink so the
   background colour of the template is in the image. Dark palettes multiply the ink in; light ones
   lift the picture toward their pale ground. */
.pp-card--photo .pp-hero__photo, .pp-card--photo .pp-close__photo { position: relative; overflow: hidden; }
.pp-card--photo .pp-hero__photo::after, .pp-card--photo .pp-close__photo::after { content: ''; position: absolute; inset: 0; background: var(--pp-ink); opacity: .55; mix-blend-mode: multiply; pointer-events: none; }
.pp-card--light.pp-card--photo .pp-hero__photo::after, .pp-card--light.pp-card--photo .pp-close__photo::after { opacity: .5; mix-blend-mode: screen; }
.pp-card:not(.pp-card--photo) .pp-hero { grid-template-columns: 1fr; }
.pp-card:not(.pp-card--photo) .pp-hero__photo { display: none; }
.pp-eyebrow { position: relative; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--pp-acid); margin: 0 0 30px; }
.pp-title { position: relative; font-family: Fraunces, Georgia, "Times New Roman", serif; font-optical-sizing: auto; font-weight: 500; font-size: clamp(40px, 5.2vw, 78px); line-height: 1; letter-spacing: -.025em; margin: 0 0 26px; max-width: 12ch; text-wrap: balance; color: var(--pp-title, var(--pp-fg)); }
.pp-hero__lede { position: relative; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--pp-on-ink); max-width: 44ch; margin: 0; }
.pp-hero__meta { position: relative; margin-top: 54px; display: flex; gap: 44px; flex-wrap: wrap; justify-content: flex-start; }
.pp-hero__meta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-on-ink-dim); margin-bottom: 7px; }
.pp-hero__meta dd { margin: 0; font-size: 16px; color: var(--pp-fg); }

/* == THE BODY, air doubled ================================================= */
.pp-body, .pp-secwrap { display: contents; }
.pp-sec { padding: 0 72px; margin-top: 110px; }
.pp-sec:last-of-type { margin-bottom: 90px; }
.pp-card--frame .pp-sec { padding: 0 58px; margin-top: 96px; }
.pp-kick { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-acid); margin: 0 0 18px; }
.pp-h { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.015em; line-height: 1.08; margin: 0 0 26px; color: var(--pp-fg); }
.pp-p { font-size: 17px; line-height: 1.8; margin: 0 0 16px; color: var(--pp-on-ink); }
.pp-lead { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.5; color: var(--pp-fg); max-width: 30ch; margin: 0; }
.pp-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pp-block { background: var(--pp-tint); border-radius: 20px; padding: 36px 34px; }
.pp-block h3 { font-size: 16px; font-weight: var(--weight-medium); color: var(--pp-acid); margin: 0 0 14px; line-height: 1.35; }
.pp-block p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--pp-on-ink); }
.pp-quote { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.45; color: var(--pp-fg); max-width: 26ch; margin: 0; }
.pp-quote strong { display: block; font-style: normal; font-family: Inter, sans-serif; font-weight: var(--weight-regular); font-size: 14px; color: var(--pp-on-ink-dim); margin-top: 22px; letter-spacing: .02em; }
.pp-proofnag { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--pp-acid); color: var(--pp-acid); border-radius: 999px; padding: 7px 16px; font-size: 13.5px; margin: 0; }
/* an image section: a rounded photo block, colour-tied like the hero */
.pp-image { position: relative; height: 420px; border-radius: 20px; overflow: hidden; background: var(--pp-img) center / cover no-repeat; }
.pp-caption { font-size: 13px; color: var(--pp-on-ink-dim); margin: 12px 4px 0; }

/* == THE MONEY, a light object on the ground =============================== */
.pp-money { background: linear-gradient(150deg, var(--pp-paper) 0%, color-mix(in srgb, var(--pp-paper) 92%, var(--pp-edge)) 100%); color: var(--pp-paper-ink); border-radius: 22px; padding: 42px 46px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.pp-card--light .pp-money { box-shadow: 0 18px 50px rgba(0,0,0,.14); border: 1px solid rgba(0,0,0,.06); }
.pp-pgroup + .pp-pgroup { margin-top: 30px; }
.pp-pgroup__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(36,18,38,.14); }
.pp-pgroup__name { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.pp-pgroup__sub { font-size: 14px; color: #8a7a6e; }
table.pp-price { width: 100%; border-collapse: collapse; }
.pp-price td { padding: 14px 0; border-bottom: 1px solid rgba(36,18,38,.09); vertical-align: top; font-size: 16px; }
.pp-price td.num { text-align: right; white-space: nowrap; position: relative; padding-right: 2px; }
.pp-price tr.is-off td { color: #a39a92; }
.pp-price tr.is-off td.num { text-decoration: line-through; }
.pp-line__meta { display: block; font-size: 12.5px; color: #8a7a6e; margin-top: 4px; }
.pp-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6f5f55; margin-top: 8px; cursor: pointer; }
.pp-opt input { width: 16px; height: 16px; accent-color: var(--pp-ink-2); }
.pp-opt--tag { border: 1px dashed #c9bfb5; border-radius: 999px; padding: 2px 9px; cursor: default; }
.pp-pnotes { font-size: 13.5px; color: #8a7a6e; line-height: 1.6; margin: 12px 0 0; }
.pp-ptotals { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(36,18,38,.14); display: grid; gap: 8px; }
.pp-ptotals > div { display: flex; justify-content: space-between; font-size: 15px; color: #6f5f55; }
.pp-ptotals__total { font-size: 20px !important; color: var(--pp-paper-ink) !important; font-weight: var(--weight-medium); padding-top: 8px; }
.pp-ptotals__total strong { font-family: Fraunces, Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.pp-card--tinted .pp-ptotals__total strong { color: color-mix(in srgb, var(--pp-acid) 45%, var(--pp-paper-ink)); }
.pp-billnote { font-size: 13.5px; color: #8a7a6e; margin: 20px 0 0; line-height: 1.6; }
.pp-sig { display: flex; gap: 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(36,18,38,.12); flex-wrap: wrap; }
.pp-sig__col { flex: 1; min-width: 210px; }
.pp-sig__name { font-family: "Snell Roundhand", "Segoe Script", cursive; font-size: 30px; }
.pp-sig__meta { font-size: 12.5px; color: #8a7a6e; border-top: 1px solid rgba(36,18,38,.18); margin-top: 8px; padding-top: 8px; }
.pp-sig__empty { height: 36px; border-bottom: 1px dashed rgba(36,18,38,.3); }
/* the editor's price tools */
.pp-pgroup__tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pp-mini { font: inherit; font-size: 12.5px; border: 1px solid rgba(36,18,38,.2); background: #fff; color: var(--pp-paper-ink); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.pp-mini:hover { border-color: var(--pp-paper-ink); }
.pp-line__x { position: absolute; right: -26px; top: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(36,18,38,.2); background: #fff; font: inherit; color: #8a7a6e; cursor: pointer; opacity: 0; }
.pp-price tr:hover .pp-line__x { opacity: 1; }
[contenteditable="true"] { outline: none; border-bottom: 1px dashed transparent; }
[contenteditable="true"]:hover { border-bottom-color: rgba(36,18,38,.35); }
[contenteditable="true"]:focus { border-bottom-color: var(--pp-acid); }

/* == THE ASK, the field of light returns =================================== */
.pp-close { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; padding: 40px; overflow: hidden; margin-top: 96px; background: var(--pp-ink); }
.pp-close__text { text-align: left; padding: 48px 32px 48px 16px; }
.pp-close__photo { border-radius: 18px; background: var(--pp-photo-close, var(--pp-photo)) center / cover no-repeat; min-height: 360px; align-self: stretch; }
.pp-card:not(.pp-card--photo) .pp-close { grid-template-columns: 1fr; }
.pp-card:not(.pp-card--photo) .pp-close__photo { display: none; }
.pp-card:not(.pp-card--photo) .pp-close__text { text-align: center; }
.pp-close h2 { position: relative; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -.02em; line-height: 1.04; margin: 0 0 18px; color: var(--pp-fg); }
.pp-close p { position: relative; color: var(--pp-on-ink); margin: 0 0 40px; max-width: 40ch; line-height: 1.65; font-size: 17px; }
.pp-card:not(.pp-card--photo) .pp-close p { margin-inline: auto; }
.pp-actions { position: relative; display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
.pp-card:not(.pp-card--photo) .pp-actions { justify-content: center; }
.pp-btn { border: none; border-radius: 999px; padding: 17px 38px; font: inherit; font-size: 17px; cursor: pointer; }
.pp-btn--yes { background: var(--pp-acid); color: #1c1018; font-weight: var(--weight-medium); }
.pp-btn--yes:hover { filter: brightness(1.06); }
.pp-btn--no { background: transparent; color: var(--pp-on-ink); border: 1px solid color-mix(in srgb, var(--pp-fg) 32%, transparent); }
.pp-btn--no:hover { border-color: color-mix(in srgb, var(--pp-fg) 65%, transparent); color: var(--pp-fg); }
.pp-done { position: relative; color: var(--pp-fg); font-size: 18px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }
.pp-done[hidden] { display: none; }
.pp-foot { text-align: center; color: #97909a; font-size: 13px; margin-top: 26px; }

/* == FRAME variant: the hero and the close are rounded image blocks ======== */
.pp-card--frame { padding: 14px; }
.pp-card--frame .pp-hero { border-radius: 20px; }
.pp-card--frame .pp-close { border-radius: 20px; }
.pp-close .pp-actions span { cursor: default; }

/* == PHOTOS are never painted (Peter, 2 Sep, after four Sana references) ===
   The picture is real and untouched. The ground is flat and deep, the
   headline is white or the one accent, and the accent comes out of the
   photo. That is the whole tie. */
.pp-card--frame .pp-hero, .pp-card--frame .pp-close { border-radius: 20px; }
.pp-card--light .pp-hero__lede, .pp-card--light .pp-hero__meta dd { color: var(--pp-paper-ink); }

/* == THE EDITOR: handles and the + between sections ======================== */
.pp-card--edit .pp-secwrap { position: relative; display: block; }
.pp-handles { position: absolute; left: 12px; top: 8px; z-index: 5; display: flex; gap: 4px; opacity: 0; transition: opacity .18s; }
.pp-secwrap:hover .pp-handles { opacity: 1; }
.pp-handles button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,6,12,.55); color: #fff; font: inherit; font-size: 13px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-card--light .pp-handles button { background: rgba(255,255,255,.8); color: #241a20; border-color: rgba(0,0,0,.15); }
.pp-handles button:disabled { opacity: .35; cursor: default; }
.pp-plus { position: relative; height: 0; z-index: 6; text-align: center; }
/* ONLY the + itself is the floating button; the add menu's buttons live
   inside .pp-plus too and must not inherit this (they stacked on one spot,
   Peter's screenshot, 2 Sep) */
.pp-plus > .js-pp-plus { position: absolute; left: 50%; top: 38px; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,6,12,.55); color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .18s, transform .18s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* THE + IS THE OPPOSITE OF ITS GROUND (Peter, 4 Sep): white on a dark proposal, dark on a light one */
.pp-plus > .js-pp-plus { background: rgba(255,255,255,.92); color: #241a20; border-color: rgba(0,0,0,.08); }
.pp-card--light .pp-plus > .js-pp-plus { background: rgba(20,14,18,.88); color: #fff; border-color: rgba(255,255,255,.2); }
.pp-card--edit:hover .pp-plus > .js-pp-plus { opacity: .75; }
.pp-plus > .js-pp-plus:hover { opacity: 1 !important; transform: translate(-50%, -50%) scale(1.08); }
.pp-addmenu { position: absolute; left: 50%; transform: translateX(-50%); top: 62px; z-index: 40; background: #fff; color: #1c1c1c; border: 1px solid #e2dcd6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: 460px; }
.pp-addmenu button { font: inherit; font-size: 13px; border: 1px solid #ece7e2; background: #faf8f6; border-radius: 10px; padding: 12px 8px; cursor: pointer; }
.pp-addmenu button:hover { border-color: #1c1c1c; }
.pp-addmenu button b { display: block; font-size: 18px; margin-bottom: 4px; }
.pp-card--edit [data-field] { cursor: text; }
/* a section freshly rewritten glows once */
@keyframes ppFresh { 0% { box-shadow: 0 0 0 3px var(--pp-acid); } 100% { box-shadow: 0 0 0 3px transparent; } }
.pp-fresh { animation: ppFresh 2.6s ease-out both; border-radius: 10px; }

@media (max-width: 640px) {
  .pp-wrap { padding: 12px 10px 60px; }
  .pp-hero { min-height: 78vh; padding: 64px 26px 52px; }
  .pp-hero__meta { gap: 26px; margin-top: 44px; }
  .pp-hero, .pp-close { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .pp-hero__text, .pp-close__text { padding: 28px 12px; }
  .pp-hero__photo { min-height: 260px; order: -1; }
  .pp-close__photo { min-height: 220px; }
  .pp-sec, .pp-card--frame .pp-sec { padding: 0 22px; margin-top: 64px; }
  .pp-deck { grid-template-columns: 1fr; }
  .pp-money { padding: 28px 22px 26px; }
  .pp-close { padding: 76px 26px 70px; }
  .pp-card--frame { padding: 8px; }
  .pp-image { height: 260px; }
  .pp-addmenu { min-width: 280px; grid-template-columns: repeat(2, 1fr); }
}