/* =====================================================================
   PinBoostr — tool UIs on the forest pages (inc/forest-tools.php): the bio
   and username generators and the image resizer. Tokens, masthead, cards
   and sections come from forest.css.
   ===================================================================== */

/* Generator form: the main field wide, the optional one narrower, the button at the end. */
.fo-form { display: grid; gap: 12px; align-items: end; }
@media (min-width: 760px) { .fo-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; } }
.fo-field { display: grid; gap: 7px; }
.fo-field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fo-go { min-height: 50px; padding: 0 24px; }
.fo-seeds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px !important; font-size: 13.5px; color: var(--mut); }
.fo-seed { padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink-2); font: 500 13px var(--font); cursor: pointer; }
.fo-seed:hover { border-color: var(--green-2); color: var(--green); }
.fo-status { min-height: 0; margin-top: 14px !important; font-size: 14px; color: var(--mut); }
.fo-status:empty { display: none; }
.fo-status.is-error { color: var(--rose-dk); }
.fo-fine { margin-top: 12px; font-size: 13px; color: var(--mut); }

.fo-results-head { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.fo-results-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.fo-pill { padding: 2px 9px; border-radius: 7px; background: var(--line-2); font-size: 12px; font-weight: 650; color: var(--mut); }
.fo-pill.is-new { background: var(--mint); color: var(--green); }
.fo-results { display: grid; gap: 12px; margin-top: 14px !important; padding: 0; list-style: none; }
@media (min-width: 760px) { .fo-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fo-result { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .15s ease, box-shadow .2s ease; animation: fo-in .4s ease backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.fo-result:hover { border-color: #d9d9e1; box-shadow: 0 12px 26px -18px rgba(16, 16, 28, .25); }
@keyframes fo-in { from { opacity: 0; transform: translateY(6px); } }
.fo-result-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--mut); }
.fo-style { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 7px; background: var(--mint); color: var(--green); }
.fo-count { font-variant-numeric: tabular-nums; }
.fo-count.is-long { color: var(--rose-dk); }
.fo-result-text { font-size: 15.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.fo-handle { font-size: 18px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fo-handle span { color: var(--mut-2); font-weight: 500; }
.fo-name { font-size: 14px; color: var(--mut); }
.fo-name strong { color: var(--ink-2); font-weight: 600; }
.fo-result-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.fo-result.is-ghost { min-height: 120px; border-style: dashed; background: linear-gradient(90deg, var(--soft) 0, #fff 50%, var(--soft) 100%) 0 0 / 200% 100%; animation: fo-shimmer 1.4s linear infinite; }
@keyframes fo-shimmer { to { background-position: -200% 0; } }

/* ── Resizer ───────────────────────────────────────────────────────────── */

.fo-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 38px 20px; border: 2px dashed #cfe9d8; border-radius: 18px; background: var(--mint); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.fo-drop:hover, .fo-drop.is-over { border-color: var(--green-2); background: #dcf1e3; }
.fo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fo-drop strong { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.fo-drop > span:not(.fo-drop-ico) { font-size: 14px; color: var(--ink-2); }
.fo-drop-ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 28, .06); }
.fo-drop-ico svg { width: 32px; height: 32px; overflow: visible; --leaf-a: var(--lf-3); --leaf-b: var(--lf-r1); --leaf-v: var(--lf-r3); animation: fo-nod 3.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes fo-nod { from { rotate: -6deg; } to { rotate: 6deg; } }
.fo-has-image .fo-drop { display: none; }

.fo-rz { display: grid; gap: 24px; }
@media (min-width: 900px) { .fo-rz { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; } }
.fo-rz-side { display: grid; gap: 20px; align-content: start; }
.fo-rz-group { display: grid; gap: 10px; }
.fo-rz-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fo-rz-h span { font-size: 12.5px; font-weight: 500; color: var(--mut); }
.fo-focus { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); cursor: crosshair; touch-action: none; }
.fo-focus img { display: block; width: 100%; max-height: 300px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.fo-dot { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #fff; border-radius: 50%; background: rgba(225, 29, 72, .85); box-shadow: 0 0 0 1px rgba(16, 16, 28, .2), 0 4px 10px rgba(16, 16, 28, .3); pointer-events: none; }
.fo-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--green); font: 600 13.5px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.fo-chips { display: grid; gap: 6px; }
.fo-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.fo-chip:hover { border-color: #d0d0d8; }
.fo-chip input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.fo-chip small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--mut); }
.fo-chip:has(input:checked) { border-color: #bfe3cb; background: var(--mint); }
.fo-custom { display: flex; align-items: end; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.fo-custom label { display: grid; gap: 4px; flex: 1; }
.fo-custom .fo-input { height: 40px; font-size: 15px; }
.fo-custom > span { padding-bottom: 10px; }

.fo-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--line-2); }
.fo-seg button { flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--mut); font: 600 13.5px var(--font); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.fo-seg button:hover { color: var(--ink); }
.fo-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 16, 28, .08); }
.fo-seg.is-sm button { min-height: 30px; font-size: 12.5px; }
.fo-zoom, .fo-bg { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--mut); }
.fo-zoom input { flex: 1; accent-color: var(--green); }
.fo-bg .fo-seg { flex: 1; }
.fo-swatch { position: relative; width: 32px; height: 32px; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.fo-swatch input { position: absolute; inset: -8px; width: 48px; height: 48px; border: 0; padding: 0; cursor: pointer; }
.fo-all { width: 100%; }

.fo-outs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-content: start; }
.fo-out { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; animation: fo-in .35s ease backwards; }
.fo-out-frame { display: grid; place-items: center; padding: 10px; border-radius: 10px; background: var(--soft) repeating-conic-gradient(#f1f1f4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.fo-out canvas { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; border-radius: 4px; box-shadow: 0 6px 16px -8px rgba(16, 16, 28, .35); }
.fo-out.is-round canvas { border-radius: 50%; }
.fo-out h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.fo-out p { font-size: 12.5px; color: var(--mut); }
.fo-out .fo-warn { display: flex; gap: 6px; padding: 7px 9px; border-radius: 9px; background: #fff6e5; color: #92400e; font-weight: 500; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .fo-result, .fo-out, .fo-drop-ico svg, .fo-result.is-ghost { animation: none !important; }
}