/* =========================================================
   DistributorFit — DISTRIBUTOR PLAN (js/plan-editor.js)
   Used by the website demo, the app's Plan tab and the distributor's
   link page. Every rule is scoped under .pd so it
   can sit next to css/app.css + css/landing.css without collisions.
   The prototype's own palette is mapped onto the site tokens here.
   ========================================================= */
.pd {
  --bg: var(--fog-light);
  --surface: #fff;
  --text: var(--navy);
  --heading: var(--navy);
  --muted: #4a6278;
  --line: var(--fog-mid);
  --accent: var(--ocean);
  --accent-pale: #e3f4fa;
  --navy-block: var(--navy);
  --on-navy: #fff;
  --on-navy-muted: #b9c6d3;
  --bar-base: #b7c3cf;
  --bar-exist: var(--navy);
  --bar-new: var(--ocean);
  --bar-ramp: #8cc6d8;
  --good: #1f7a52; --good-bg: #eaf6f0;
  --warn: #8a5a00; --warn-bg: #fdf4e3;
  --bad: #b23a2c; --bad-bg: #fbecea;
  --font-display: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;
}
.pd * { box-sizing: border-box; }
.pd { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; padding: 0 16px; padding-block: 24px 48px; }
.pd .wrap { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.pd header.top { display: flex; flex-direction: column; gap: 6px; }
.pd .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pd h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); color: var(--heading); margin: 0; text-wrap: balance; }
.pd h1 em { color: var(--accent); }
.pd .lede { color: var(--muted); max-width: 72ch; margin: 0; }
.pd .example { font-size: 11px; color: var(--muted); font-style: italic; }
.pd h2 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--heading); margin: 0; }

/* Tabs */
.pd .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--heading); overflow-x: auto; }
.pd .tabs button { font: 600 13px/1 var(--font-body); color: var(--muted); background: transparent; border: 0; padding: 12px 14px; border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.pd .tabs button .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; }
.pd .tabs button[aria-selected="true"] { background: var(--heading); color: var(--bg); }
.pd .tabs button[aria-selected="true"] .n { border-color: var(--bg); }
.pd .tabs button:hover:not([aria-selected="true"]) { color: var(--heading); background: var(--accent-pale); }

.pd .layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .pd .layout { grid-template-columns: minmax(0, 1fr); } }
.pd .inputs { display: flex; flex-direction: column; gap: 14px; }
.pd fieldset { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd legend { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--heading); padding: 0 4px; }
.pd .field { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: center; }
.pd .field label { font-size: 13px; }
.pd .field label small, .pd .tfield small { display: block; font-size: 11px; color: var(--muted); }
.pd .who { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: 1px; background: var(--accent-pale); color: var(--accent); }
.pd input[type=number], .pd input[type=text], .pd select, .pd textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.pd input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.pd textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
.pd input:focus-visible, .pd select:focus-visible, .pd textarea:focus-visible, .pd button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd .tfield { display: flex; flex-direction: column; gap: 4px; }
.pd .tfield label { font-size: 13px; font-weight: 500; }
.pd .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pd .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .pd .two, .pd .three { grid-template-columns: minmax(0, 1fr); } }

.pd .results { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd .verdict { border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid currentColor; }
.pd .verdict.good { background: var(--good-bg); color: var(--good); }
.pd .verdict.warn { background: var(--warn-bg); color: var(--warn); }
.pd .verdict.bad { background: var(--bad-bg); color: var(--bad); }
.pd .verdict strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.25; }
.pd .verdict p { margin: 0; color: var(--text); max-width: 72ch; }
.pd .figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
@media (max-width: 640px) { .pd .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd .fig { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd .fig span { font-size: 11px; color: var(--muted); }
.pd .fig b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--heading); font-variant-numeric: tabular-nums; }
.pd .fig small { font-size: 11px; color: var(--muted); }
.pd .fig b.neg { color: var(--bad); }
.pd .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pd .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd .hint { font-size: 12px; color: var(--muted); margin: 0; max-width: 80ch; }
.pd .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.pd .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.pd .legend .dash { width: 14px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; vertical-align: 3px; }

.pd .scroll { overflow-x: auto; }
.pd .months { display: grid; grid-template-columns: 112px repeat(12, minmax(44px, 1fr)); min-width: 680px; column-gap: 4px; row-gap: 6px; align-items: center; }
.pd .rowlabel { font-size: 11px; color: var(--muted); line-height: 1.3; padding-right: 6px; }
.pd .plot { position: relative; height: 170px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; align-items: end; border-bottom: 1px solid var(--line); }
.pd .col { display: flex; flex-direction: column-reverse; height: 100%; }
.pd .seg { width: 70%; margin: 0 auto; transition: height .25s ease; }
.pd .seg.base { background: var(--bar-base); }
.pd .seg.exist { background: var(--bar-exist); } .pd .seg.new { background: var(--bar-new); } .pd .seg.ramp { background: var(--bar-ramp); }
.pd .budgetline { position: absolute; right: 0; border-top: 2px dashed var(--muted); pointer-events: none; transition: bottom .25s ease; }
.pd .budgetline span { position: absolute; right: 0; top: -18px; font-size: 10px; color: var(--muted); background: var(--surface); padding: 0 4px; font-variant-numeric: tabular-nums; }
.pd .axislabel { font-size: 10px; color: var(--muted); text-align: right; padding-right: 6px; align-self: start; font-variant-numeric: tabular-nums; }
.pd .mlabel { text-align: center; font-size: 11px; font-weight: 600; color: var(--heading); }
.pd .mval { text-align: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd .mact { text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; padding: 3px 0; border: 1px dashed var(--line); border-radius: 4px; }
.pd .mact.zero { color: var(--muted); font-weight: 400; border-color: transparent; }
.pd .stepper { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--accent-pale); border-radius: 6px; padding: 4px 0; }
.pd .stepper button { width: 26px; height: 22px; border: 0; border-radius: 4px; background: var(--surface); color: var(--accent); font: 600 15px/1 var(--font-body); cursor: pointer; }
.pd .stepper button:hover { background: var(--accent); color: var(--surface); }
.pd .stepper button:disabled { opacity: .35; cursor: default; background: var(--surface); color: var(--accent); }
.pd .stepper output { font-size: 15px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.pd .need { text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 5px 0; border-radius: 4px; background: var(--bg); color: var(--heading); }
.pd .need.none { color: var(--good); font-weight: 500; font-size: 11px; }
.pd .col.pre { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); border-radius: 4px 4px 0 0; }
.pd .mlabel.pre { color: var(--muted); font-weight: 500; line-height: 1.1; }
.pd .mlabel small { display: block; font-size: 8.5px; font-weight: 400; color: var(--muted); }
.pd .mval.leads { color: var(--heading); font-weight: 600; }
.pd .prosp { text-align: center; font-size: 10px; font-weight: 600; padding: 6px 0; border-radius: 4px; color: var(--warn); min-height: 28px; }
.pd .prosp.on { background: var(--warn-bg); }
.pd .need.later { color: var(--muted); font-weight: 500; font-size: 10px; background: transparent; border: 1px dashed var(--line); }
.pd .btn { font: 600 13px/1 var(--font-body); padding: 9px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); cursor: pointer; }
.pd .btn.ghost { background: transparent; color: var(--accent); }
.pd .btn:hover { filter: brightness(1.08); }
.pd .row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd .note { font-size: 12px; color: var(--muted); }

.pd .funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .pd .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd .calc { display: block; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 6px 8px; border-radius: 6px; background: var(--accent-pale); color: var(--accent); }
.pd .funnel.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .pd .funnel.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd .stage { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pd .stage span { font-size: 11px; color: var(--muted); }
.pd .stage b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--heading); font-variant-numeric: tabular-nums; }
.pd .stage small { font-size: 11px; color: var(--muted); }
.pd .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .pd .facts { grid-template-columns: minmax(0, 1fr); } }
.pd .fact { display: flex; flex-direction: column; gap: 6px; }
.pd .fact p { margin: 0; font-size: 13px; }
.pd .meter { height: 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.pd .meter div { height: 100%; background: var(--good); transition: width .25s ease; }
.pd .meter.warn div { background: var(--warn); } .pd .meter.bad div { background: var(--bad); }
.pd .tag { font-size: 12px; font-weight: 600; }
.pd .tag.good { color: var(--good); } .pd .tag.warn { color: var(--warn); } .pd .tag.bad { color: var(--bad); }

/* Activities table */
.pd .acts { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 13px; }
.pd .acts th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 6px; border-bottom: 1.5px solid var(--line); }
.pd .acts td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pd .acts td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; white-space: nowrap; }
.pd .acts input[type=number] { max-width: 110px; }
.pd .del { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.pd .del:hover { background: var(--bad-bg); color: var(--bad); }
.pd .acts tfoot td { font-weight: 600; color: var(--heading); border-bottom: 0; font-variant-numeric: tabular-nums; }

.pd details { font-size: 13px; color: var(--muted); }
.pd details summary { cursor: pointer; color: var(--heading); font-weight: 600; font-size: 12px; }
.pd details ol { margin: 8px 0 0; padding-left: 20px; max-width: 75ch; display: flex; flex-direction: column; gap: 4px; }

/* Generated plan */
.pd .plan { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.pd .plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--heading); padding-bottom: 14px; }
.pd .plan-head .meta { font-size: 11px; color: var(--muted); text-align: right; line-height: 1.8; }
.pd .plan-hero { background: var(--navy-block); border-radius: 8px; padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.pd .plan-hero .tagx { align-self: flex-start; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.pd .plan-hero .q { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2.6vw, 24px); color: var(--on-navy); line-height: 1.3; text-wrap: balance; }
.pd .plan-hero .sub { color: var(--on-navy-muted); font-size: 13px; max-width: 80ch; }
.pd .sec { display: flex; flex-direction: column; gap: 12px; }
.pd .sec-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.pd .sec-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pd .box { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd .box.top { border-top: 3px solid var(--accent); }
.pd .box h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--heading); }
.pd .box p { margin: 0; font-size: 13px; white-space: pre-line; }
.pd .box .big { font-family: var(--font-display); font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.pd .empty { color: var(--muted); font-style: italic; }
.pd .ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.pd .ptable th { background: var(--navy-block); color: var(--on-navy-muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 8px 10px; text-align: left; }
.pd .ptable td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.pd .ptable td.r, .pd .ptable th.r { text-align: right; }
.pd .ptable tr.muted td { color: var(--muted); }
.pd .ptable tfoot td { font-weight: 600; color: var(--heading); border-bottom: 0; }
.pd .chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin: 1px 4px 1px 0; background: var(--accent-pale); color: var(--accent); white-space: nowrap; }
.pd .chip.start { background: var(--warn-bg); color: var(--warn); }
.pd .chip.exist { background: var(--good-bg); color: var(--good); }
.pd .tablewrap { border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.pd .money { background: var(--navy-block); border-radius: 8px; padding: 18px 22px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pd .money .num { font-family: var(--font-display); font-size: 40px; color: var(--on-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.pd .money .lbl { font-size: 12px; color: var(--on-navy-muted); margin-top: 4px; }
.pd .money ul { list-style: none; margin: 0; padding: 0; color: var(--on-navy); font-size: 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; }
.pd .money ul b { font-variant-numeric: tabular-nums; }
.pd .risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .pd .risks { grid-template-columns: minmax(0, 1fr); } }
.pd .risk { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.pd .risk.bad { border-left-color: var(--bad); }
.pd .risk b { color: var(--heading); font-size: 13px; }
.pd .risk span { font-size: 12.5px; }
.pd .risk em { font-style: normal; font-size: 12px; color: var(--good); }
.pd .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .pd .steps { grid-template-columns: minmax(0, 1fr); } }
.pd .step { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.pd .step .sn { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.pd .step .when { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.pd .step p { margin: 2px 0 0; font-size: 13px; }
.pd .plan-foot { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pd .hrs { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd .hrs td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pd .hrs td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd .hrs td.bar { width: 34%; }
.pd .hrs .b { height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.pd .hrs tfoot td { font-weight: 600; color: var(--heading); border-bottom: 0; }
.pd .hrs small { display: block; color: var(--muted); font-size: 11px; }
.pd .wk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .pd .wk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd .acts input.hrsin { max-width: 80px; }
.pd .ptable th small { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.pd .chip.com { background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: 500; }
.pd .plan { counter-reset: sec; }
.pd .sec-label::before { counter-increment: sec; content: counter(sec) "."; }
.pd .lockbar { background: var(--good-bg); color: var(--good); border-left: 4px solid currentColor; border-radius: 6px; padding: 10px 14px; font-size: 13px; }
.pd .lockbar span { color: var(--text); }
.pd .sign { display: flex; flex-direction: column; gap: 8px; }
.pd .sign .row2 { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.pd .sign label.ok { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--heading); cursor: pointer; }
.pd .sign input[type=date] { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); width: 100%; }
.pd .stamp { border: 2px solid var(--good); color: var(--good); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.pd .stamp.open { border-color: var(--line); color: var(--muted); border-style: dashed; }
.pd .stamp b { font-size: 13px; }
.pd .stamp span { font-size: 12.5px; color: var(--text); }
.pd .copy { font-size: 11px; color: var(--muted); text-align: center; padding-top: 8px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .pd * { transition: none !important; } }
/* ---------- website additions: who fills in what, private economics, views ---------- */
.pd .intro-line { background: var(--accent-pale); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 10px 14px; font-size: 14px; color: var(--heading); margin: 4px 0 0; max-width: 72ch; }
.pd .who.d { background: var(--fog); color: var(--heading); }
.pd .who.both { background: transparent; color: var(--heading); border: 1px solid var(--line); }
.pd .who.priv { background: var(--heading); color: #fff; }
.pd legend .who { text-transform: none; letter-spacing: .03em; }
.pd .lock { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--heading); background: var(--fog); border-radius: 6px; padding: 7px 10px; margin: 0; }
.pd .lock svg { flex-shrink: 0; margin-top: 2px; }
.pd .owners { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); align-items: center; }
.pd .owners .who { margin-left: 0; margin-right: 4px; }
.pd .viewbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pd .seg-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 3px; gap: 3px; flex-wrap: wrap; }
.pd .seg-switch button { font: 500 13px/1 var(--font-body); color: var(--muted); background: transparent; border: 0; border-radius: 4px; padding: 9px 14px; cursor: pointer; }
.pd .seg-switch button[aria-pressed="true"] { background: var(--heading); color: #fff; }
.pd .seg-switch button:hover:not([aria-pressed="true"]) { color: var(--heading); background: var(--fog); }
.pd .start-free { font: 500 13px/1 var(--font-body); color: var(--accent); border: 1.5px solid var(--accent); border-radius: 6px; padding: 9px 16px; text-decoration: none; white-space: nowrap; }
.pd .start-free:hover { background: var(--fog); }
.pd .hint a { color: var(--accent); }
.pd .plan-head .viewtag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: var(--heading); color: #fff; margin-left: 6px; vertical-align: 1px; }
.pd .plan-head .viewtag.work { background: var(--fog); color: var(--heading); }
.pd .risk .share { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 500; color: var(--heading); margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); cursor: pointer; }
.pd .risk .share input:disabled + span { color: var(--muted); }
.pd .risk .private-tag { align-self: flex-start; }
@media (max-width: 560px) {
  .pd { padding: 0 16px; padding-block: 20px 40px; }
  .pd .viewbar { align-items: stretch; }
}
/* commitments and target accounts: fixed column widths so the free-text columns get the room */
.pd .acts.fixed { table-layout: fixed; }
/* long commitments and next steps wrap onto more lines instead of being cut off */
.pd .acts.fixed td { vertical-align: top; }
.pd textarea.wrapin { resize: none; min-height: 0; line-height: 1.45; field-sizing: content; }
@supports not (field-sizing: content) { .pd textarea.wrapin { height: 50px; } }

/* ---------- app: agreement versions, results, change history, notes ---------- */
.pd .plan-root { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pd .notebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--accent-pale); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 10px 12px; font-size: 13px; color: var(--heading); position: sticky; top: calc(var(--hdr-h, 0px) + 8px); z-index: 5; }
.pd .notebar[hidden] { display: none; }
.pd .notebar span { flex: 1 1 260px; }
.pd .notebar input { flex: 1 1 220px; width: auto; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.pd .sign input[type=text] { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.pd .sign .btn { align-self: flex-start; }
.pd .linkish { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.pd .changes { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--heading); }
.pd .changes ul { margin: 6px 0 6px 18px; display: flex; flex-direction: column; gap: 2px; }
.pd .versions { border-top: 1px solid var(--line); padding-top: 10px; }
.pd .ver { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13px; color: var(--text); }
.pd .ver p { margin: 6px 0 0; }
.pd .ver ul { margin: 4px 0 0 18px; }
.pd .disclaimer { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0; }
.pd .disclaimer a { color: var(--accent); }
.pd .plan > .disclaimer { border-top: 1px solid var(--line); padding-top: 10px; margin-top: -12px; }
.pd .risk small.note { font-size: 11px; }
.pd .restable { min-width: 620px; }
.pd .restable td:first-child { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pd .restable tr.rhead td { color: var(--heading); font-size: 13px; padding-top: 12px; border-bottom: 1.5px solid var(--line); }
.pd .restable input { max-width: 120px; margin-left: auto; display: block; }
.pd .restable td.num.neg, .pd .fig b.neg { color: var(--bad); }
.pd .restable td.num.pos { color: var(--good); }
.pd .hrow { display: grid; grid-template-columns: 110px 170px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pd .hrow .hwhen, .pd .hrow .hwho { color: var(--muted); font-size: 12px; }
.pd .hrow em { display: block; color: var(--heading); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 640px) { .pd .hrow { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.pd fieldset:disabled input, .pd fieldset:disabled select, .pd fieldset:disabled textarea, .pd .acts input:disabled, .pd .acts select:disabled { opacity: 1; color: var(--text); background: var(--surface); border-style: dashed; }

/* The app hosts the component inside its own page frame. */
.plan-host .pd { padding: 0; background: transparent; }
.plan-host .pd .wrap { max-width: none; }

/* Download as PDF: only the shared plan is printed. */
.df-print { display: none; }
@media print {
  body.df-print-plan > *:not(.df-print) { display: none !important; }
  body.df-print-plan > .df-print { display: block !important; padding: 0; background: #fff; }
  .df-print .plan { border: 0; padding: 0; }
  .df-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .df-print .sec, .df-print .box, .df-print .risk, .df-print .step, .df-print tr { break-inside: avoid; }
}