/* One compact metric for shot metadata; existing colors and type remain shared. */
body .shot-card :is(.unit-stepper, .glass-select-trigger, input[placeholder="鏡號"], input[placeholder="#"]) {
  box-sizing: border-box; height: 30px; min-height: 30px; border-radius: 9px; font-size: 12px; line-height: 18px;
}
body .shot-card .unit-stepper input { height: 28px; padding-block: 4px; }
body .shot-card .glass-select-trigger { padding-block: 4px; }
body .shot-card .unit-stepper { width: 100%; }
body .support-body .support-contact { font-size: 12px; color: #475569; overflow-wrap: anywhere; }
.dark body .support-body .support-contact { color: #cbd5e1; }
.support-contact a { text-decoration: underline; text-underline-offset: 3px; }
#cloud-trash-toggle[aria-pressed="true"] { background: rgba(var(--accent-rgb),.18); border-color: rgb(var(--accent-rgb)); }
#setup-new-project { padding: 12px 24px; border-radius: 16px; font-size: 16px; }
:is(.markdown-editor, .print-markdown) :is(.md-list, .md-task) { position: relative; min-height: 1.4em; padding-inline-start: 2em; }
:is(.markdown-editor, .print-markdown) :is(.md-list, .md-task)::before { content: attr(data-md-bullet); position: absolute; inset-inline-start: 0; width: 1.65em; text-align: center; color: inherit; font-variant-numeric: tabular-nums; }
:is(.markdown-editor, .print-markdown) .md-rule { display: block; min-height: 1em; margin-block: .7em; border-top: 1px solid currentColor; opacity: .4; }
/* Guest content follows intrinsic text height, including saved field-height overrides. */
body[data-shared-permission="viewer"] .markdown-editor,
body[data-shared-permission="viewer"] .shot-card div:has(.markdown-editor) { height: auto !important; max-height: none !important; overflow-y: visible !important; resize: none; }
body[data-shared-permission="viewer"] .shot-card { height: auto; overflow: visible; }
body[data-shared-permission="viewer"] #project-remarks-input { height: auto !important; max-height: none !important; overflow: visible !important; }
/* Cell split uses compositor transforms; no animated blur/displacement. */
#add-shots-button { position: relative; min-width: 144px; min-height: 50px; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; isolation: isolate; }
#add-shots-button > svg, #add-shots-button .batch-label { transition: opacity .16s, transform .24s; }
#add-shots-button .batch-wing, #add-shots-button .batch-count { pointer-events: none; position: absolute; display: grid; place-items: center; inset: 0; opacity: 0; transition: transform .42s cubic-bezier(.2,.9,.25,1.16), opacity .18s; }
#add-shots-button .batch-wing { border-radius: 18px; background: rgb(var(--accent-rgb)); border: 1px solid rgba(255,255,255,.25); font-size: 28px; width: 48px; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 5px 12px rgba(0,0,0,.12); z-index: -1; }
#add-shots-button .batch-left { left: 0; transform: translateX(25px) scale(.7); }
#add-shots-button .batch-right { left: auto; right: 0; transform: translateX(-25px) scale(.7); }
#add-shots-button .batch-count { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; transform: scale(.8); }
#add-shots-button.batch-pressing { transform: scale(.97); }
#add-shots-button::before, #add-shots-button::after { content: ''; position: absolute; top: 10px; bottom: 10px; width: 28px; background: rgb(var(--accent-rgb)); border-radius: 50%; z-index: -1; opacity: 0; pointer-events: none; }
#add-shots-button::before { left: -24px; transform-origin: right center; }
#add-shots-button::after { right: -24px; transform-origin: left center; }
#add-shots-button.batch-active::before, #add-shots-button.batch-active::after { animation: shot-cell-neck .42s ease-out both; }
@keyframes shot-cell-neck { 0% { opacity: 1; transform: scaleX(.1) scaleY(1.2); } 45% { opacity: 1; transform: scaleX(1.25) scaleY(.5); } 100% { opacity: 0; transform: scaleX(.1) scaleY(.1); } }
#add-shots-button.batch-active { touch-action: none; }
#add-shots-button.batch-active > svg, #add-shots-button.batch-active .batch-label { opacity: 0; transform: scale(.85); }
#add-shots-button.batch-active .batch-count { opacity: 1; transform: scale(1); }
#add-shots-button.batch-active .batch-left { opacity: 1; transform: translateX(-57px) scale(1); }
#add-shots-button.batch-active .batch-right { opacity: 1; transform: translateX(57px) scale(1); }
#add-shots-button.batch-active[data-direction="left"] .batch-left { transform: translateX(-62px) scale(1.08); }
#add-shots-button.batch-active[data-direction="right"] .batch-right { transform: translateX(62px) scale(1.08); }
#add-shots-button:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 6px; }
.batch-fusion-canvas { position: absolute; left: -88px; top: -16px; width: calc(100% + 176px); height: calc(100% + 32px); max-width: none; pointer-events: none; z-index: -1; }
#add-shots-button.batch-fusion { background: transparent; border-color: transparent; box-shadow: none; }
#add-shots-button.batch-fusion::before, #add-shots-button.batch-fusion::after { display: none; }
#add-shots-button.batch-fusion .batch-wing { background: transparent; border-color: transparent; box-shadow: none; transition: opacity .18s; }
#add-shots-button.batch-fusion .batch-left { transform: translateX(calc(-1 * (var(--batch-spread, 0px) + var(--batch-left-kick, 0px)))); }
#add-shots-button.batch-fusion .batch-right { transform: translateX(calc(var(--batch-spread, 0px) + var(--batch-right-kick, 0px))); }
@media (prefers-reduced-motion: reduce) { #add-shots-button, #add-shots-button * { transition: none !important; } #add-shots-button::before, #add-shots-button::after { animation: none !important; } }