/* Navigation uses browser snapshots, with no click delay or loading screen. */
@view-transition { navigation: auto; }
.page { view-transition-name: pinbun-page; }
.site-header { view-transition-name: pinbun-header; }
body[data-motion="no"] .page, body[data-motion="no"] .site-header { view-transition-name: none; }
html:has(body[data-motion="no"])::view-transition-group(*) { animation: none; }
::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(pinbun-header) { animation: none; }
::view-transition-old(pinbun-header) { display: none; }
::view-transition-new(pinbun-header) { animation: none; }
::view-transition-group(pinbun-page) { animation-duration: 180ms; }
::view-transition-old(pinbun-page) { animation: pinbun-leave 120ms ease-out both; }
::view-transition-new(pinbun-page) { animation: pinbun-arrive 180ms cubic-bezier(.2,.65,.3,1) both; }
@keyframes pinbun-leave { to { opacity: 0; transform: translateY(-3px); } }
@keyframes pinbun-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@supports not (view-transition-name: root) { body[data-motion="yes"] .page { animation: pinbun-arrive 150ms ease-out; } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { scroll-behavior: auto !important; }
    .page, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
[hidden] { display: none !important; }
.admin-subnav { margin-bottom: 28px; }
.pin-detail-refined { overflow: visible; }
.pin-detail-refined .pin-detail-image img { max-height: 84svh; object-fit: contain; }
.pin-creator-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.pin-creator-row .creator-profile-link { margin: 0; }
.pin-creator-row .creator-profile-link > span:last-child { display: grid; gap: 4px; }
.pin-creator-row .creator-profile-link > span:last-child > span { font-size: 13px; opacity: .7; }
.pin-action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; }
.pin-action-bar .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pin-save-fallback { margin: 12px 0 24px; padding: 12px 0; border: 0; background: transparent; }
.pin-save-fallback summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.pin-save-fallback form { margin-top: 16px; }
body[data-dialog-save="yes"] .pin-save-fallback:not([open]) { display: none; }
.share-dialog { width: min(480px, calc(100vw - 32px)); padding: 28px; border: 1px solid #d9decf; border-radius: 22px; color: #293a31; background: #fffef9; }
.share-dialog::backdrop { background: rgb(30 43 35 / 40%); }
.share-dialog input { margin-bottom: 18px; }
.library-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 30px; }
.library-search { grid-column: span 2; }
.library-filters input, .library-filters select { margin: 0; }
.filter-actions { display: flex; align-items: end; gap: 18px; }
.saved-library-item, .bundle-pin { break-inside: avoid; margin-bottom: 24px; }
.saved-library-item .pin-card, .bundle-pin .pin-card { margin-bottom: 0; }
.saved-locations { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px; }
.saved-locations a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: #e9ecdf; font-size: 11px; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.saved-locations .icon { width: 12px; height: 12px; }
.bundle-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 20px 0; }
.bundle-pin-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 3px; }
.bundle-pin-tools .selection-label { position: static; background: transparent; padding: 0; margin: 0; }
.reorder-handle { border: 1px solid #d3dacb; border-radius: 9px; background: #fffef9; color: #293a31; min-height: 44px; min-width: 44px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.reorder-handle:focus-visible { outline: 3px solid #718d65; outline-offset: 3px; }
[data-organize-ready="yes"]:not(.is-organizing) .bundle-pin-tools { display: none; }
.is-organizing .bundle-pin { outline: 1px solid #cad3bd; outline-offset: 5px; border-radius: 12px; }
.is-organizing .bundle-pin.is-dragging { outline: 3px solid #607c51; opacity: .55; pointer-events: none; }
[data-bundle-grid][aria-busy="true"] .reorder-handle { cursor: progress; }
.bundle-cover-picker { margin: 22px 0; border: 0; padding: 0; }
.cover-choices { display: grid; grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap: 10px; max-height: 310px; overflow: auto; padding: 5px; }
.cover-choice { position: relative; display: grid; align-content: start; gap: 6px; border: 2px solid transparent; border-radius: 12px; overflow: hidden; padding: 5px; margin: 0; cursor: pointer; font-size: 11px; line-height: 1.35; }
.cover-choice input { position: absolute; top: 10px; left: 10px; margin: 0; width: 18px; height: 18px; z-index: 1; }
.cover-choice img, .cover-illustration { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.cover-illustration { display: grid; place-items: center; background: #e6e9da; }
.cover-illustration .icon { width: 36px; height: 36px; }
.cover-choice:has(input:checked), .cover-choice:focus-within { border-color: #607c51; background: #f1f3e8; }
.section-management-row { padding: 15px 0; border-bottom: 1px solid #e1e5d8; }
.section-management-row .inline-form { display: flex; gap: 8px; align-items: center; }
.section-management-row input { margin: 0; min-width: 0; }
.section-management-row .button-row { margin: 6px 0 0; align-items: center; }
.insight-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px; margin: 28px 0; }
.insight-card { display: grid; align-content: start; gap: 10px; padding: 24px; background: #fffef9; border: 1px solid #dbe0d2; border-radius: 18px; }
.insight-card > span { font-size: 13px; color: #576651; }
.insight-card > strong { font-size: clamp(30px,4vw,46px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.insight-card small { color: #687360; font-size: 11px; line-height: 1.5; }
.insight-chart { margin: 26px 0; padding: 28px; }
.insight-chart figcaption { font-weight: 600; margin-bottom: 18px; }
.insight-chart svg { width: 100%; height: auto; max-height: 240px; overflow: visible; }
.chart-line { fill: none; stroke: #607c51; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-baseline { fill: none; stroke: #dbe0d2; stroke-width: 1; }
.chart-range { display: flex; justify-content: space-between; gap: 15px; color: #6d7767; font-size: 11px; margin: 5px 0 18px; }
.insight-chart details { margin-top: 12px; }
.analytics-highlight { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 4px; }
.analytics-highlight strong { font-size: 28px; font-weight: 500; }
.analytics-highlight span { color: #63705d; font-size: 13px; }
.health-list { margin: 0; }
.health-list > div { padding: 14px 0; border-bottom: 1px solid #e2e5db; }
.health-list dt { display: flex; justify-content: space-between; gap: 18px; align-items: center; font-size: 14px; font-weight: 600; }
.health-list dd { margin: 7px 0 0; color: #63705d; font-size: 12px; line-height: 1.6; }
.health-status { display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.health-status.is-good { background: #e3eddd; color: #37502f; }
.health-status.is-warning { background: #f7ecd1; color: #795b20; }
@media (max-width: 950px) {
    .pin-detail-refined .pin-detail-copy { padding: 24px 20px; }
    .pin-detail-refined .pin-detail-image img { max-height: 72svh; }
    .pin-action-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; display: flex; flex-wrap: nowrap; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background: rgb(255 254 249 / 97%); border-top: 1px solid #d8dfcd; box-shadow: 0 -6px 24px rgb(35 51 38 / 5%); }
    .pin-action-bar .button { flex: 1; padding: 12px 10px; min-height: 48px; border-radius: 12px; font-size: 13px; white-space: nowrap; }
    body:has([data-pin-bar]) .page { padding-bottom: calc(105px + env(safe-area-inset-bottom,0px)); }
    body:has([data-pin-bar]) .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom,0px)); }
    body:has([data-pin-bar]) .save-toast { bottom: calc(90px + env(safe-area-inset-bottom,0px)); }
    .library-filters { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px; gap: 14px; }
    .insight-chart { padding: 20px; }
}
@media (max-width: 500px) {
    .pin-action-bar .icon { width: 17px; height: 17px; }
    .pin-action-bar { gap: 7px; padding-left: 10px; padding-right: 10px; }
    .insight-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .insight-card { padding: 18px 14px; }
    .insight-card > strong { font-size: 32px; }
    .insight-card > span { font-size: 12px; }
    .bundle-tools { gap: 14px; font-size: 13px; }
}