/* =====================================================================
   PinBoostr — the forest look for the "Board" free tools (inc/board-tools.php,
   inc/pin-designer.php). Loaded after board.css and forest.css on those pages
   only, scoped to .pb-bd.fo-skin, so board.css keeps serving the WordPress
   plugin page unchanged. Masthead, tool card and sections come from forest.css;
   this file re-skins the .pb-bd-* tool UIs and result cards the scripts build:
   Inter, sentence case, 1px borders, soft status tints, no hard shadows.
   ===================================================================== */

.pb-bd.fo-skin {
  --ink: #0b0b10; --mut: #5b5b66; --soft: #f8f8fa; --mint: #e8f6ed;
  --rose: #e11d48; --rose-dk: #be123c; --white: #fff; --tile: #f4f4f6;
  --sky: #f3f3f6; --butter: #e8f6ed; --blush: #fff1f3; --lilac: #f4f1fe;
  --edge: 1px solid var(--line); --pop: none; --pop-sm: none; --r: 16px; --r-sm: 12px;
  --disp: var(--font); --ui: var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --deep: #123f2c;
  background: #fff; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55;
}
.pb-bd.fo-skin :where(h1, h2, h3, p, ul, ol, dl) { margin: 0; }
.pb-bd.fo-skin [hidden] { display: none !important; }
.pb-bd.fo-skin :focus-visible { outline-width: 2px; }

/* ── Inputs and buttons ───────────────────────────────────────────── */

.pb-bd.fo-skin .pb-bd-form { margin-top: 0; gap: 12px; max-width: none; }
.pb-bd.fo-skin .pb-bd-field { flex: 1 1 320px; }
.pb-bd.fo-skin .pb-bd-field > i { left: 17px; font-size: 15px; color: var(--mut-2); }
.pb-bd.fo-skin .pb-bd-input,
.pb-bd.fo-skin .pb-bd-control { height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); font: 500 16px var(--font); box-shadow: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.pb-bd.fo-skin .pb-bd-control { height: 48px; padding: 0 14px; font-size: 15.5px; }
.pb-bd.fo-skin textarea.pb-bd-control { height: auto; min-height: 120px; padding: 12px 14px; font: 500 13.5px/1.55 var(--mono); }
.pb-bd.fo-skin :is(.pb-bd-input, .pb-bd-control)::placeholder { color: var(--mut-2); font-weight: 400; }
.pb-bd.fo-skin :is(.pb-bd-input, .pb-bd-control):focus { outline: 0; border-color: var(--green-2); background: #fff; box-shadow: 0 0 0 4px rgba(52, 163, 95, .14); }

.pb-bd.fo-skin .pb-bd-btn { gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid var(--rose); border-radius: 12px; background: var(--rose); color: #fff; font: 600 15px/1.2 var(--font); box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pb-bd.fo-skin .pb-bd-btn:hover { border-color: var(--rose-dk); background: var(--rose-dk); color: #fff; }
.pb-bd.fo-skin .pb-bd-btn:active { transform: none; box-shadow: none; }
.pb-bd.fo-skin .pb-bd-btn[disabled] { opacity: .55; }
.pb-bd.fo-skin .pb-bd-form .pb-bd-btn { min-height: 52px; padding: 0 26px; }
.pb-bd.fo-skin .pb-bd-btn--white { border-color: var(--line); background: #fff; color: var(--ink); }
.pb-bd.fo-skin .pb-bd-btn--white:hover { border-color: #d0d0d8; background: #fff; color: var(--ink); }
.pb-bd.fo-skin .pb-bd-btn--sm { min-height: 36px; padding: 0 12px; border-width: 1px; border-radius: 10px; font-size: 13.5px; }

.pb-bd.fo-skin .pb-bd-seeds { margin-top: 14px; gap: 8px; font: 500 13.5px var(--font); letter-spacing: 0; text-transform: none; color: var(--mut); }
.pb-bd.fo-skin .pb-bd-seed { padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink-2); font: 500 13px var(--font); }
.pb-bd.fo-skin .pb-bd-seed:hover { border-color: var(--green-2); background: #fff; color: var(--green); }

.pb-bd.fo-skin .pb-bd-fine { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--mut); }
.pb-bd.fo-skin :is(.pb-bd-fine, .pb-bd-hint) a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pb-bd.fo-skin .pb-bd-status { min-height: 0; margin-top: 14px; font: 500 14px var(--font); color: var(--mut); }
.pb-bd.fo-skin .pb-bd-status:empty { display: none; }
.pb-bd.fo-skin .pb-bd-status.is-error { color: var(--rose-dk); }

/* ── Panels: UTM builder, earnings calculator (the tool card is the panel) ── */

.pb-bd.fo-skin .pb-bd-panel { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pb-bd.fo-skin .pb-bd-fields { gap: 20px 16px; }
.pb-bd.fo-skin .pb-bd-fields + .pb-bd-fields { margin-top: 20px; }
.pb-bd.fo-skin :is(.pb-bd-fieldset > label, .pb-bd-legend) { margin-bottom: 7px; font: 600 13.5px var(--font); color: var(--ink-2); }
.pb-bd.fo-skin .pb-bd-hint { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.pb-bd.fo-skin .pb-bd-unit > span { font: 600 13.5px var(--font); color: var(--mut); }
.pb-bd.fo-skin .pb-bd-unit .pb-bd-control { padding-right: 34px; }
.pb-bd.fo-skin .pb-bd-unit > .pre + .pb-bd-control { padding-left: 30px; }

.pb-bd.fo-skin .pb-bd-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--line-2); overflow: visible; }
.pb-bd.fo-skin .pb-bd-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--mut); font: 600 13.5px var(--font); text-align: center; transition: background-color .15s ease, color .15s ease; }
.pb-bd.fo-skin .pb-bd-seg button:hover { color: var(--ink); }
.pb-bd.fo-skin .pb-bd-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 16, 28, .08); }
@media (max-width: 640px) {
  .pb-bd.fo-skin .pb-bd-seg { display: flex; flex-direction: row; width: 100%; }
  .pb-bd.fo-skin .pb-bd-seg button { flex: 1 1 auto; min-height: 40px; }
}

.pb-bd.fo-skin .pb-bd-out { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink-2); font: 500 14px/1.6 var(--mono); }
.pb-bd.fo-skin .pb-bd-out mark { padding: 0 3px; border-radius: 4px; background: var(--mint); color: #14532d; }

/* ── Drop zone (image tools) ──────────────────────────────────────── */

.pb-bd.fo-skin .pb-bd-drop { margin-top: 0; max-width: none; justify-items: center; gap: 6px; padding: 40px 20px; border: 2px dashed #cfe9d8; border-radius: 18px; background: var(--mint); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.pb-bd.fo-skin .pb-bd-drop:hover, .pb-bd.fo-skin .pb-bd-drop.is-over { border-color: var(--green-2); background: #dcf1e3; }
.pb-bd.fo-skin .pb-bd-drop strong { font: 700 18px/1.3 var(--font); font-variation-settings: normal; letter-spacing: -.015em; text-transform: none; }
.pb-bd.fo-skin .pb-bd-drop > span:not(.pb-bd-drop-ico) { font-size: 14px; color: var(--ink-2); }
.pb-bd.fo-skin .pb-bd-drop-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: #fff; color: var(--green); font-size: 20px; box-shadow: 0 1px 2px rgba(16, 16, 28, .06); }

/* ── Results: quiet cards, tinted by status ───────────────────────── */

.pb-bd.fo-skin .pb-bd-board-head { justify-content: flex-start; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.pb-bd.fo-skin .pb-bd-board-head h2 { font: 700 17px/1.3 var(--font); letter-spacing: -.015em; }
.pb-bd.fo-skin .pb-bd-board-head .pb-bd-tag { background: var(--line-2); color: var(--mut); }
.pb-bd.fo-skin .pb-bd-board { margin-top: 16px; padding: 0; border-radius: 0; background: none; columns: 4 220px; column-gap: 14px; }

.pb-bd.fo-skin .pb-bd-pin { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; animation-name: pb-fb-in; animation-duration: .4s; animation-timing-function: ease; }
@keyframes pb-fb-in { from { opacity: 0; transform: translateY(6px); } }
.pb-bd.fo-skin .pb-bd-pin-body { padding: 16px 18px 18px; }
.pb-bd.fo-skin .pb-bd-tag { border: 0; border-radius: 7px; background: var(--line-2); padding: 2px 9px; color: var(--mut); font: 650 12px/1.5 var(--font); letter-spacing: 0; text-transform: none; }
.pb-bd.fo-skin .pb-bd-pin h3 { margin-top: 10px; font: 700 16px/1.35 var(--font); letter-spacing: -.01em; }
.pb-bd.fo-skin .pb-bd-pin p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.pb-bd.fo-skin :is(.pb-bd-pin, .pb-bd-out) code { padding: 1px 5px; border-radius: 5px; background: rgba(16, 16, 28, .06); font: 500 12.5px var(--mono); }
.pb-bd.fo-skin .pb-bd-fix { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(16, 16, 28, .08); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pb-bd.fo-skin .pb-bd-fix b { margin-bottom: 2px; color: var(--ink); font: 700 12.5px var(--font); letter-spacing: 0; text-transform: none; }
.pb-bd.fo-skin .pb-bd-pin .pb-bd-btn--sm { margin-top: 12px; }
.pb-bd.fo-skin .pb-bd-pin .pb-bd-row .pb-bd-btn--sm { margin-top: 0; }

.pb-bd.fo-skin .pb-bd-pin.is-pass { border-color: #d4ecdd; background: #f2faf5; }
.pb-bd.fo-skin .pb-bd-pin.is-pass .pb-bd-tag { background: #dcf1e3; color: #1a6e3f; }
.pb-bd.fo-skin .pb-bd-pin.is-warn { border-color: #f4e2bc; background: #fff9ed; }
.pb-bd.fo-skin .pb-bd-pin.is-warn .pb-bd-tag { background: #fcecc6; color: #85490c; }
.pb-bd.fo-skin .pb-bd-pin.is-fail { border-color: #f9d4dd; background: #fff4f6; }
.pb-bd.fo-skin .pb-bd-pin.is-fail .pb-bd-tag { background: #ffe1e8; color: var(--rose-dk); }
.pb-bd.fo-skin .pb-bd-pin.is-note { border-color: #e8e3f9; background: #f8f6fe; }
.pb-bd.fo-skin .pb-bd-pin.is-note .pb-bd-tag { background: #ebe6fb; color: #54469a; }

/* The headline card: deep green, one calm big figure. */
.pb-bd.fo-skin .pb-bd-pin.is-score { border-color: var(--deep); background: var(--deep); color: #fff; }
.pb-bd.fo-skin .pb-bd-pin.is-score .pb-bd-tag { background: rgba(255, 255, 255, .12); color: #cfeedd; }
.pb-bd.fo-skin .pb-bd-pin.is-score h3 { color: #fff; }
.pb-bd.fo-skin .pb-bd-pin.is-score p { color: rgba(255, 255, 255, .78); }
.pb-bd.fo-skin .pb-bd-big { margin-top: 14px; font: 800 64px/1 var(--font); font-variation-settings: normal; letter-spacing: -.045em; }
.pb-bd.fo-skin .pb-bd-big small { margin-left: 3px; color: rgba(255, 255, 255, .6); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.pb-bd.fo-skin .pb-bd-big.is-long { font-size: 52px; }
.pb-bd.fo-skin .pb-bd-big.is-xl { font-size: 42px; }
.pb-bd.fo-skin .pb-bd-big.is-xxl { font-size: 34px; }
.pb-bd.fo-skin :is(.pb-bd-big.is-long, .pb-bd-big.is-xl, .pb-bd-big.is-xxl) small { font-size: 16px; }
.pb-bd.fo-skin .pb-bd-mid { margin-top: 10px; font: 800 30px/1.1 var(--font); font-variation-settings: normal; letter-spacing: -.035em; text-transform: none; }
.pb-bd.fo-skin .pb-bd-tally { flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pb-bd.fo-skin .pb-bd-tally span { flex: 1 1 auto; padding: 5px 8px; border: 0; border-radius: 8px; font: 600 12px var(--font); white-space: nowrap; }
.pb-bd.fo-skin .pb-bd-tally .t-pass { background: #dcf1e3; color: #14532d; }
.pb-bd.fo-skin .pb-bd-tally .t-warn { background: #fcecc6; color: #78350f; }
.pb-bd.fo-skin .pb-bd-tally .t-fail { background: #ffe1e8; color: #9f1239; }

.pb-bd.fo-skin .pb-bd-list { gap: 5px; margin-top: 10px; font-size: 14px; }
.pb-bd.fo-skin .pb-bd-list b { font-weight: 700; }
.pb-bd.fo-skin .pb-bd-kv { gap: 6px 14px; margin-top: 12px; font-size: 14px; }
.pb-bd.fo-skin .pb-bd-kv dt { font: 500 13px/1.6 var(--font); letter-spacing: 0; text-transform: none; opacity: .72; }
.pb-bd.fo-skin .pb-bd-kv dd { font-weight: 650; line-height: 1.6; }

/* Topic planner ideas */
.pb-bd.fo-skin .pb-bd-pin p.pb-bd-idea-key { margin-top: 4px; color: var(--mut); font: 500 12.5px var(--font); }
.pb-bd.fo-skin .pb-bd-ideas li { border-top: 1px solid rgba(16, 16, 28, .07); }
.pb-bd.fo-skin .pb-bd-ideas strong { font: 650 14.5px/1.4 var(--font); }
.pb-bd.fo-skin .pb-bd-ideas span { color: var(--mut); font: 500 12.5px var(--font); }

/* Pin size frames, thumbnails, the rich pin preview */
.pb-bd.fo-skin .pb-bd-frame { border: 1px solid var(--line); border-radius: 12px; background: var(--tile); }
.pb-bd.fo-skin .pb-bd-zone { border: 1px dashed var(--rose); background: rgba(225, 29, 72, .22); }
.pb-bd.fo-skin .pb-bd-cut { background: rgba(11, 11, 16, .72); font: 600 11.5px var(--font); }
.pb-bd.fo-skin .pb-bd-thumb { border-bottom: 1px solid var(--line); background: var(--soft); }
.pb-bd.fo-skin .pb-bd-art { border-bottom: 1px solid var(--line); background-color: var(--soft); }
.pb-bd.fo-skin .pb-bd-art.is-empty { background: #f5eee2; }
.pb-bd.fo-skin .pb-bd-art b { font: 800 24px/1.1 var(--font); font-variation-settings: normal; letter-spacing: -.03em; text-transform: none; }
.pb-bd.fo-skin .pb-bd-art .pb-bd-tag { background: #fff; color: var(--ink-2); box-shadow: 0 1px 2px rgba(16, 16, 28, .08); }
.pb-bd.fo-skin .pb-bd-meta { gap: 6px; padding: 14px 16px 16px; }
.pb-bd.fo-skin .pb-bd-site i { font: 700 11px/22px var(--font); }
.pb-bd.fo-skin .pb-bd-meta strong { font-size: 15px; font-weight: 700; line-height: 1.35; }
.pb-bd.fo-skin .pb-bd-meta span.d { font-size: 13.5px; line-height: 1.5; }

/* Loading cards */
.pb-bd.fo-skin .pb-bd-ghost { border: 1px dashed var(--line); background: linear-gradient(90deg, var(--soft) 0, #fff 50%, var(--soft) 100%) 0 0 / 200% 100%; animation: pb-fb-shimmer 1.4s linear infinite; }
@keyframes pb-fb-shimmer { to { background-position: -200% 0; } }

/* ── Pin Maker: the editor's own frame is the card, resting on the grass ── */

.pb-bd.fo-skin .pb-bd-tool.is-designer { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pb-bd.fo-skin #pb-pd { margin-top: 0; }
.pb-bd.fo-skin .pb-bd-tool.is-designer .pb-bd-fine { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pb-bd.fo-skin .pb-bd-pin, .pb-bd.fo-skin .pb-bd-ghost { animation: none; }
  .pb-bd.fo-skin :is(.pb-bd-btn, .pb-bd-drop, .pb-bd-seg button, .pb-bd-input, .pb-bd-control) { transition: none; }
}

/* ── Pin Maker editor (its own bundle, assets/pin-designer/): the bundle hard-codes
   "Board" outlines and offset shadows; soften them to the forest look from here. ── */
.pb-bd.fo-skin :is(.pd-bar, .pd-btn, .pd-callout, .pd-chips button, .pd-dock, .pd-dock button, .pd-error, .pd-icon, .pd-idea, .pd-left, .pd-menu, .pd-mini, .pd-nudge, .pd-photo, .pd-preset, .pd-right, .pd-search, .pd-sheet, .pd-sheet-head, .pd-shell, .pd-size, .pd-skel, .pd-tabs, .pd-tabs button, .pd-tile-btn, .pd-tile-confirm) { border-width: 1px; border-color: var(--line); box-shadow: none; }
.pb-bd.fo-skin :is(.pd-shell, .pd-skel) { border-radius: 24px; box-shadow: 0 1px 2px rgba(16, 16, 28, .05), 0 28px 56px -34px rgba(16, 16, 28, .3); }
.pb-bd.fo-skin .pd-btn { border-color: rgba(16, 16, 28, .12); }
.pb-bd.fo-skin :is(.pd-btn, .pd-preset, .pd-tile-btn):is(:hover, :active) { transform: none; box-shadow: 0 8px 18px -12px rgba(16, 16, 28, .3); }
.pb-bd.fo-skin :is(.pd-menu, .pd-nudge) { box-shadow: 0 1px 2px rgba(16, 16, 28, .05), 0 18px 36px -20px rgba(16, 16, 28, .3); }
.pb-bd.fo-skin .pd-drop { border: 1.5px dashed #cfe9d8; }