/* Animal create/edit form: section cards with a side column for photo and actions. */
.animal-form{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;max-width:1120px}
.animal-form-main{display:grid;gap:20px;min-width:0}
.animal-form-side{display:grid;gap:14px;min-width:0;position:sticky;top:104px}
.animal-form-section h2{margin:0 0 18px;font-size:18px;line-height:1.3;letter-spacing:-.3px}
.animal-form-section .form-grid{gap:18px 20px}
.animal-form .movement-fields>.form-grid{margin-top:2px}
.animal-form details.movement-fields{padding-top:2px;border-top:1px solid var(--line)}

.animal-photo-field{display:grid;gap:12px;min-width:0}
.animal-photo-field #photo-preview{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;margin:0;border-radius:14px;object-fit:cover;object-position:50% 42%}
.animal-photo-field #photo-preview[hidden]{display:none}
.photo-empty{display:grid;place-items:center;aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:14px;background:var(--cream);color:var(--muted)}
.photo-empty .app-icon{width:38px;height:38px}
#photo-preview:not([hidden])+.photo-empty{display:none}
.animal-photo-field .photo-input{position:absolute;width:1px;inline-size:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
.animal-photo-field .photo-pick{display:flex;width:100%;gap:8px;margin:0;font-size:15px;letter-spacing:0;cursor:pointer}
.photo-input:focus-visible+.photo-pick{outline:3px solid var(--green);outline-offset:2px}
.animal-photo-field .check-label,.animal-photo-field .field-help{margin:0}

.animal-form .animal-form-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:white;box-shadow:var(--shadow)}
.animal-form .animal-form-actions>*{width:100%;min-height:48px;margin:0}
.animal-form-note{margin:0 4px}
.animal-form .animal-delete-action{margin:0;padding:0;border:0}
.animal-delete-action .danger-text{display:flex;width:100%;gap:8px;min-height:46px;justify-content:center;border:1px solid #e3b7a9;border-radius:10px;background:var(--surface,#fff);color:#a33f2c;font-weight:600}
@media(hover:hover){.animal-delete-action .danger-text:hover{background:#f9e8e0;color:#8a3324}}
[data-theme=dark] .animal-form .animal-form-actions{background:var(--surface);border-color:var(--line)}
[data-theme=dark] .photo-empty{background:var(--raised)}
[data-theme=dark] .animal-delete-action .danger-text{color:var(--red);border-color:#6b3a31;background:transparent}
@media(hover:hover){[data-theme=dark] .animal-delete-action .danger-text:hover{background:#3a2622;color:var(--red)}}

@media(max-width:1150px){.animal-form{grid-template-columns:minmax(0,1fr) 260px;gap:20px}}
@media(max-width:980px){
  .animal-form{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .animal-form-main,.animal-form-side{display:contents}
  .animal-form [data-section=identity]{order:1}.animal-form [data-section=photo]{order:2}.animal-form [data-section=pedigree]{order:3}.animal-form [data-section=herd]{order:4}.animal-form [data-section=notes]{order:5}
  .animal-form-note{order:6}.animal-form .animal-delete-action{order:7}
  .animal-form .animal-form-actions{order:8;position:sticky;bottom:16px;z-index:5;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px;border-radius:16px;box-shadow:0 8px 28px #193f3233}
  .animal-form .animal-form-actions>*{min-height:46px}
  .animal-photo-field{grid-template-columns:104px minmax(0,1fr);align-items:center;column-gap:16px}
  .animal-photo-field #photo-preview,.photo-empty{grid-column:1;grid-row:1/span 3;width:104px;aspect-ratio:1;border-radius:12px}
  .animal-photo-field>:not(#photo-preview,.photo-empty,.photo-input){grid-column:2}
  .photo-empty .app-icon{width:30px;height:30px}
}
@media(max-width:800px){
  .page-heading:has(+.animal-form){display:flex;margin-bottom:16px}
  .page-heading:has(+.animal-form) h1{font-size:25px;letter-spacing:-.6px}
  .page-heading:has(+.animal-form) p{display:none}
  .animal-form-section h2{margin-bottom:14px;font-size:17px}
  .animal-form .animal-form-actions{bottom:var(--mobile-menu-bottom);margin-right:74px}
}
@media(max-width:560px){.animal-form-section .form-grid{gap:16px}}
@media(max-width:360px){
  .animal-photo-field{grid-template-columns:80px minmax(0,1fr);column-gap:12px}
  .animal-photo-field #photo-preview,.photo-empty{width:80px}
  .animal-photo-field .photo-pick{font-size:13px;padding-inline:8px}
}

/* even field rows: the ear tag parts keep their labels for screen readers only, every control has the same height */
.animal-form .ear-tag-parts label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.animal-form .ear-tag-parts input{height:48px;padding:8px 10px;font-size:17px}
.animal-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){height:48px;min-height:48px}
.animal-form .ear-tag-editor .field-help{margin-top:6px}.animal-form select{padding-block:0;line-height:1.3}