/*!
 * Pitch Deck · form page (pd-builder.css)
 * Everything is scoped under .pdb-root and every class starts with "pdb-".
 *
 * Theme: set data-theme on #pd-builder to "light" (default), "dark" or "auto" (follows the OS).
 * Site variables you can set:
 *   --pd-ui-font      font for the form
 *   --pd-head-font    font for the headings
 *   --pd-sticky-top   height of a fixed site header, so the form toolbar sticks below it
 *   --pd-accent       main button and focus colour
 */
.pdb-root {
  --b-bg: #F4F4F1; --b-panel: #FFFFFF; --b-inset: #F7F7F4; --b-text: #17171A; --b-sub: #63636B; --b-line: #E0E0DA; --b-line2: #CFCFC8;
  --b-acc: var(--pd-accent, #1E5A43); --b-accfg: #FFFFFF; --b-soft: #E2EEE7; --b-warn: #A8460B; --b-focus: #2F5BFF;
  --b-font: var(--pd-ui-font, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --b-head: var(--pd-head-font, 'Instrument Serif', Georgia, serif);
  --b-top: var(--pd-sticky-top, 0px);
  box-sizing: border-box; background: var(--b-bg); color: var(--b-text); font-family: var(--b-font); font-size: 14px; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; position: relative;
}
.pdb-root[data-theme="dark"] {
  --b-bg: #111113; --b-panel: #19191C; --b-inset: #1E1E22; --b-text: #EDEDF0; --b-sub: #9C9CA6; --b-line: #2B2B31; --b-line2: #3A3A42;
  --b-acc: var(--pd-accent, #86D6AE); --b-accfg: #0B2A1E; --b-soft: #1A2D24; --b-warn: #F2A06B; --b-focus: #8EA6FF; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .pdb-root[data-theme="auto"] {
    --b-bg: #111113; --b-panel: #19191C; --b-inset: #1E1E22; --b-text: #EDEDF0; --b-sub: #9C9CA6; --b-line: #2B2B31; --b-line2: #3A3A42;
    --b-acc: var(--pd-accent, #86D6AE); --b-accfg: #0B2A1E; --b-soft: #1A2D24; --b-warn: #F2A06B; --b-focus: #8EA6FF; color-scheme: dark;
  }
}
.pdb-root *, .pdb-root *::before, .pdb-root *::after { box-sizing: border-box; }
/* Protects the form from site-wide element styles (headings, spans, paragraphs, tables, line-height). */
.pdb-root :where(div,span,p,a,b,i,em,small,strong,label,h1,h2,h3,h4,section,aside,nav,header,footer,kbd,ul,ol,li,table,thead,tbody,tr,th,td) { margin: 0; color: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; text-shadow: none; background-color: transparent; border: 0; padding: 0; list-style: none; float: none; }
.pdb-root input[type="checkbox"] { padding: 0; font-size: inherit; }
.pdb-root [hidden], .pdb-toast[hidden] { display: none !important; }
.pdb-root :focus-visible { outline: 2px solid var(--b-focus); outline-offset: 2px; }

/* ---------- top bar ---------- */
.pdb-top { position: sticky; top: var(--b-top); z-index: 10; background: var(--b-bg); border-bottom: 1px solid var(--b-line); padding: 12px 24px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.pdb-title { font-family: var(--b-head); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.01em; color: var(--b-text); }
.pdb-status { color: var(--b-sub); font-size: 12.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pdb-status b { color: var(--b-text); font-variant-numeric: tabular-nums; }
.pdb-saved::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--b-acc); margin-right: 6px; vertical-align: 1px; }
.pdb-err { color: var(--b-warn); font-weight: 600; }
.pdb-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pdb-btn { appearance: none; -webkit-appearance: none; margin: 0; font: inherit; font-family: var(--b-font); color: var(--b-text); border: 1px solid var(--b-line2); background: var(--b-panel); border-radius: 9px; padding: 8px 13px; font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; gap: 6px; }
.pdb-btn:hover { border-color: var(--b-sub); }
.pdb-btn.pdb-primary { background: var(--b-acc); color: var(--b-accfg); border-color: var(--b-acc); }
.pdb-btn.pdb-primary:hover { filter: brightness(1.08); }
.pdb-btn.pdb-armed { color: var(--b-warn); border-color: var(--b-warn); }
.pdb-btn.pdb-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.pdb-btn.pdb-ghost { background: transparent; }

/* ---------- layout ---------- */
.pdb-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; max-width: 1120px; margin: 0 auto; padding: 24px 24px 120px; }
.pdb-idx { position: sticky; top: calc(var(--b-top) + 84px); align-self: start; display: grid; gap: 2px; max-height: calc(100vh - var(--b-top) - 100px); overflow: auto; }
.pdb-idx a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--b-sub); text-decoration: none; font-weight: 500; font-size: 14px; }
.pdb-idx a:hover { background: var(--b-panel); color: var(--b-text); text-decoration: none; }
.pdb-idx a.pdb-on { background: var(--b-panel); color: var(--b-text); box-shadow: inset 0 0 0 1px var(--b-line); }
.pdb-idx .pdb-n { font-variant-numeric: tabular-nums; font-size: 12px; width: 20px; flex: none; }
.pdb-idx .pdb-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--b-line2); flex: none; margin-left: auto; }
.pdb-idx a.pdb-part .pdb-dot { border-color: var(--b-acc); background: linear-gradient(90deg, var(--b-acc) 50%, transparent 50%); }
.pdb-idx a.pdb-done .pdb-dot { border-color: var(--b-acc); background: var(--b-acc); }
.pdb-idx a.pdb-off { opacity: .45; text-decoration: line-through; }
.pdb-intro { font-size: 13px; color: var(--b-sub); padding: 12px 10px 0; line-height: 1.45; }
.pdb-form { display: grid; gap: 20px; min-width: 0; }

/* ---------- sections ---------- */
.pdb-sec { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 14px; padding: 22px 24px 24px; scroll-margin-top: calc(var(--b-top) + 84px); min-width: 0; }
.pdb-sec-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pdb-sec-h .pdb-n { font-variant-numeric: tabular-nums; color: var(--b-sub); font-size: 13px; }
.pdb-sec-h h2 { font-family: var(--b-head); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--b-text); }
.pdb-sec-h p { color: var(--b-sub); font-size: 13px; flex-basis: 100%; }
.pdb-inc { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--b-sub); cursor: pointer; }
.pdb-inc input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; background: var(--b-line2); border-radius: 20px; position: relative; cursor: pointer; margin: 0; border: 0; transition: background .15s; }
.pdb-inc input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pdb-inc input:checked { background: var(--b-acc); }
.pdb-inc input:checked::after { transform: translateX(14px); }
.pdb-sec.pdb-off .pdb-body { opacity: .4; pointer-events: none; }

/* ---------- fields ---------- */
.pdb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.pdb-fld { grid-column: 1 / -1; display: grid; gap: 5px; min-width: 0; align-content: start; }
.pdb-fld.pdb-half { grid-column: auto; }
.pdb-lbl { font-size: 12.5px; font-weight: 600; color: var(--b-sub); margin: 0; }
.pdb-fld small { color: var(--b-sub); font-size: 12px; }
.pdb-root .pdb-input { appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0; font: inherit; font-family: var(--b-font); font-size: 14px; color: var(--b-text); background: var(--b-panel); border: 1px solid var(--b-line2); border-radius: 8px; padding: 9px 11px; min-width: 0; height: auto; box-shadow: none; line-height: 1.4; }
.pdb-root select.pdb-input { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--b-sub) 50%), linear-gradient(135deg, var(--b-sub) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pdb-root textarea.pdb-input { resize: vertical; min-height: 64px; }
.pdb-root .pdb-input::placeholder { color: var(--b-sub); opacity: .6; }
.pdb-root .pdb-input:focus { border-color: var(--b-acc); outline: none; box-shadow: 0 0 0 3px var(--b-soft); }
.pdb-grp { grid-column: 1 / -1; display: grid; gap: 10px; }
.pdb-grp-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--b-sub); margin-top: 4px; }
.pdb-items { display: grid; gap: 10px; }
.pdb-item { background: var(--b-inset); border: 1px solid var(--b-line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
.pdb-compact .pdb-item { padding: 10px 12px; }
.pdb-item-h { font-size: 12px; font-weight: 700; color: var(--b-sub); }
.pdb-irow { display: grid; gap: 10px 12px; align-items: end; }
.pdb-irow .pdb-fld { grid-column: auto; }
.pdb-irow .pdb-fld.pdb-full { grid-column: 1 / -1; }
.pdb-iconsel { display: flex; gap: 8px; align-items: center; }
.pdb-iconsel .pdb-pv { width: 36px; height: 36px; border-radius: 8px; background: var(--b-soft); display: grid; place-items: center; flex: none; color: var(--b-acc); }
.pdb-iconsel .pdb-pv svg { width: 20px; height: 20px; }
.pdb-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 0; color: var(--b-text); margin: 0; }
.pdb-chk input { width: 16px; height: 16px; accent-color: var(--b-acc); margin: 0; }
.pdb-imgbox { display: flex; gap: 12px; align-items: center; border: 1px dashed var(--b-line2); border-radius: 10px; padding: 10px; background: var(--b-inset); }
.pdb-imgbox.pdb-drag { border-color: var(--b-acc); background: var(--b-soft); }
.pdb-thumb { width: 64px; height: 48px; border-radius: 6px; background: var(--b-line) no-repeat center/contain; flex: none; display: grid; place-items: center; color: var(--b-sub); font-size: 11px; }
.pdb-thumb.pdb-has { background-color: transparent; box-shadow: inset 0 0 0 1px var(--b-line); }
.pdb-imgact { display: flex; gap: 6px; flex-wrap: wrap; }
.pdb-vh { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.pdb-mx { overflow-x: auto; }
.pdb-mx table { width: 100%; border-collapse: collapse; min-width: 520px; margin: 0; background: none; }
.pdb-mx th { font-size: 12px; font-weight: 700; color: var(--b-sub); text-align: center; padding: 6px 8px; white-space: nowrap; border: 0; background: none; }
.pdb-mx th:first-child { text-align: left; padding-left: 0; }
.pdb-mx td { padding: 5px 8px; border: 0; border-top: 1px solid var(--b-line); text-align: center; background: none; }
.pdb-mx td:first-child { padding-left: 0; width: 45%; }
.pdb-mx input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--b-acc); margin: 0; }

.pdb-cta { position: fixed; right: 24px; bottom: 24px; z-index: 9; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.pdb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #17171A; color: #F4F4F1; padding: 10px 16px; border-radius: 10px; font-family: var(--pd-ui-font, 'Hanken Grotesk', system-ui, sans-serif); font-weight: 600; font-size: 13px; z-index: 2147483000; max-width: calc(100vw - 24px); }

@media (max-width: 860px) {
  .pdb-wrap { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 120px; gap: 16px; }
  .pdb-idx { position: static; display: flex; overflow-x: auto; max-height: none; gap: 4px; padding-bottom: 4px; }
  .pdb-idx a { flex: none; }
  .pdb-intro { display: none; }
  .pdb-top { padding: 12px 16px; }
  .pdb-acts { margin-left: 0; }
}
@media (max-width: 560px) {
  .pdb-grid { grid-template-columns: minmax(0, 1fr); }
  .pdb-fld.pdb-half { grid-column: 1 / -1; }
  .pdb-irow { grid-template-columns: minmax(0, 1fr) !important; }
  .pdb-sec { padding: 18px 16px; }
  .pdb-cta { right: 16px; bottom: 16px; }
}