/* Save to Pomona's own page (static/save-flow.js; mock-save-flow.html). Phone first: one column,
   big inputs; on a laptop a narrow column in the middle, like the sign-in card. */
body.sv-on { background: #f6efe2; }
body.sv-on #auth-screen, body.sv-on #app { display: none !important; }
.sv { min-height: 100vh; background: #f6efe2; color: #1d2b21; }
.sv [hidden] { display: none !important; }
.sv-top { background: #1f4527; color: #fff; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; position: sticky; top: 0; z-index: 5; }
.sv-back { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 8px 6px; cursor: pointer; }
.sv-brand { font: 700 20px Georgia, serif; }
.sv-col { max-width: 440px; margin: 0 auto; padding: 14px 16px 48px; box-sizing: border-box; }

/* the bar: two or three segments, labelled under */
.sv-bar { display: flex; gap: 6px; margin: 2px 0 14px; }
.sv-bar:empty { display: none; }
.sv-seg { flex: 1; min-width: 0; }
.sv-seg i { display: block; height: 4px; border-radius: 3px; background: #e2dbcb; }
.sv-seg.done i, .sv-seg.on i { background: #2e6b34; }
.sv-seg span { display: block; font-size: 12px; color: #8a918b; margin-top: 4px; text-align: center; white-space: nowrap; }
.sv-seg:first-child span { text-align: left; }
.sv-seg:last-child span { text-align: right; }
.sv-seg.on span { color: #2e6b34; font-weight: 700; }

.sv-h { font: 700 24px/1.2 Georgia, serif; color: #1f4527; margin: 4px 0 4px; }
.sv-s { color: #5b6560; font-size: 14.5px; margin: 0 0 14px; }
.sv-card { background: #fffdf8; border: 1px solid #e6dece; border-radius: 12px; padding: 11px 13px; margin: 0 0 12px; font-size: 14.5px; }
.sv-next { margin-top: 14px; }
.sv a.sv-next { display: block; text-align: center; text-decoration: none; line-height: 44px; }
.sv-link { display: block; width: 100%; background: none; border: 0; color: #2e6b34; font: inherit; font-size: 14.5px; font-weight: 700; padding: 14px 0 4px; cursor: pointer; }
.sv-sec { width: 100%; border: 1px solid #e2dbcb; background: #fff; border-radius: 10px; padding: 12px; font: inherit; font-size: 14.5px; cursor: pointer; white-space: normal; }
.sv .af input, .sv .af select, .sv-in { font-size: 16px; }
.sv-in { display: block; width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid #e2dbcb; border-radius: 10px; padding: 9px 12px; background: #fff; font: inherit; font-size: 16px; margin: 6px 0 0; color: inherit; }

/* step 1: the picture and the three facts */
.sv-pic { border-radius: 12px; overflow: hidden; margin: 0 0 10px; }
.sv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.sv-fact { background: #fffdf8; border: 1px solid #e6dece; border-radius: 10px; padding: 7px 9px; min-width: 0; }
.sv-fact span { display: block; font-size: 12px; color: #8a918b; }
.sv-fact b { display: block; font-size: 17px; overflow-wrap: anywhere; }

/* step 2 and the pick: options, the typo, the question */
.sv-calline { font-size: 15px; }
.sv-q { font-weight: 600; margin: 4px 0 8px; }
.sv-note { color: #5b6560; font-size: 13.5px; margin: 8px 0 0; }
.sv .ts-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2dbcb; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; background: #fff; cursor: pointer; font-size: 15px; }
.sv .ts-opt.on { border-color: #c5dcc8; background: #f2f8f2; }
.sv .ts-opt input[type=radio] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #2e6b34; }
.sv .ts-opt > span { flex: 1; min-width: 0; }
.sv .ts-opt b { display: block; font-weight: 700; }
.sv .ts-opt small { display: block; color: #7c857f; font-size: 13px; }
.sv .ts-opt.ts-warn small { color: #9a5b12; }
.sv .ts-typo { background: #fdecea; border: 1px solid #f3c2bd; color: #9b2c1f; border-radius: 12px; padding: 11px 12px; font-size: 14.5px; margin: 0 0 10px; }
.sv .ts-typo label { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: #1d2b21; cursor: pointer; }
.sv .ts-typo input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.sv-l { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #7c857f; font-weight: 700; margin: 14px 0 6px; }
.sv-rows { font-size: 13.5px; color: #7c857f; margin-top: 6px; }
.sv-combo { background: #fff; border: 1px solid #e2dbcb; border-radius: 12px; padding: 10px 12px; font-size: 14.5px; margin: 14px 0 8px; }
.sv-combo:empty { display: none; }
.sv-jobs { background: #fff8ec; border: 1px solid #f0dcb8; color: #9a5b12; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 0 0 8px; }
.sv-q-box { background: #fff8ec; border: 1px solid #f0dcb8; border-radius: 12px; padding: 12px; font-size: 14.5px; margin-top: 10px; }
.sv-q-box b { display: block; font-size: 16px; margin-bottom: 4px; }
.sv-q-box p { margin: 4px 0; color: #5b6560; }
.sv-q-box .asub { margin: 10px 0 8px; white-space: normal; height: auto; min-height: 44px; }
.sv-from { background: #f2f8f2; border-color: #c5dcc8; }

/* Done */
.sv-done { text-align: center; }
.sv-check { width: 64px; height: 64px; border-radius: 50%; background: #e7f1e6; color: #2e6b34; font-size: 32px; line-height: 64px; margin: 18px auto 10px; }
.sv-done .sv-card { text-align: left; }
.sv-msg { font-size: 13.5px; color: #5b6560; }
.sv .ts-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14.5px; }
.sv .ts-kv span { color: #7c857f; }
.sv .ts-kv b { font-weight: 600; overflow-wrap: anywhere; }

/* the picture: the tool's drawing (tools-src/boom.js drawPic) with the tool's colours in the app,
   copied from tools-src/theme-app.css, and the tool's label sizes (tools-src/tools.css .pt-bpic) */
.sv-pic {
  --t-ink:#1d2b21;
  --t-muted:#5b6560;
  --t-line:#e2dbcb;
  --t-line2:#efe9dc;
  --t-card:#fff;
  --t-field:#fff;
  --t-soft:#faf7f0;
  --t-title:#1d2b21;
  --t-accent:#2e6b34;
  --t-accent-ink:#fff;
  --t-accent-soft:#e7f1e6;
  --t-warn:#b4552f;
  --t-warn-soft:#fbefe6;
  --t-warn-line:#efc9b4;
  --t-ok-soft:#f2f8f2;
  --t-ok-line:#c5dcc8;
  --t-radius:10px;
  --t-sky:#eaf2f8;
  --t-ground:#cfdcb4;
  --t-ground2:#b9c99b;
  --t-leaf1:#5f9a4e;
  --t-leaf2:#6fab58;
  --t-leaf3:#4f8a43;
  --t-leaf4:#7cb764;
  --t-bark:#8a6a4a;
  --t-bark2:#7a5c3e;
  --t-fruit:#c8362b;
  --t-spray:#4aa3df;
  --t-metal:#6f7976;
  --t-off:#9aa3a0;
  --t-pill:#f3f1ea;
  --t-rsky1:#dfe9f2;
  --t-rsky2:#f3f1e8;
  --t-grass:#9cc47e;
  --t-grass2:#a9cd8a;
  --t-rollbar:#3c4542;
  --t-canopy:#2f6f9a;
  --t-tire:#2b2f2d;
  --t-tread:#454b48;
  --t-mist:#c9dbe8;
  --t-mist2:#6f98b8;
  --t-tank:#79c94a;
  --t-tankink:#1f4a8a;
  --t-fan1:#d7dad6;
  --t-fan2:#efefec;
  --t-blade:#7a2a2a;
  --t-hub:#4a2626;
  --t-measure:#2f4a35;
  --t-strip:#8c6d3f;
  --t-oc:#c27a1a;
  --t-fruit2:#9e2a21;
  --t-btank:#f2f2ee;
  --t-page:#f8f4ea;
  --t-bad:#b3261e;
  --t-bad-soft:#fbe9e7;
  --t-bad-line:#f2c4bf;
}
/* the airblast's rear view (tree.js rear, tools-src/tools.css .pt-rear) */
.sv .pt-rear { display: block; width: 100%; height: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sv .pt-bpic { display: block; width: 100%; height: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sv .pt-bpic .b-tl { font-size: calc(14px / var(--k, 1)); }
.sv .pt-bpic .b-tr { font-size: calc(13px / var(--k, 1)); }
.sv .pt-bpic .b-toc { font-size: calc(13px / var(--k, 1)); stroke-width: calc(2.5px / var(--k, 1)); }