/* Dela till Husvo (/dela): filen överst, valet av vad den ska bli, och ett kort formulär. Valknapparna är
   hela kort med ikon, namn och en rad om vart filen tar vägen; det valda bär aria-pressed och en kant,
   inte bara en färg. Brickorna är mjuka ytor (sida-parm.css) och bär --on-soft. */
.dela { max-width: 720px; }
/* Dubbel klass: husse-vuxen.css läses in efter sidornas mallar och gör annars kortet till en spalt. */
.dela .dela-fil { display: flex; flex-direction: row; gap: 16px; align-items: center; justify-content: flex-start; text-align: left; padding: 16px; }
.dela-bild { width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-m); border: var(--bw) solid var(--line); flex: none; }
.dela-pdf { width: 112px; height: 112px; border-radius: var(--r-m); }
.dela-fil-text { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.dela-namn { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.dela-valj { margin-top: 4px; cursor: pointer; }
.dela-valj:focus-within { outline: 3px solid var(--sky); outline-offset: 3px; }
:root[data-theme="dark"] .dela-valj:focus-within { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dela-valj:focus-within { outline-color: var(--sun); } }

.dela-form { margin-top: 24px; gap: 16px; }
.dela-legend { font: 650 20px/1.2 var(--f-display); margin: 0 0 12px; padding: 0; color: var(--ink); }
.dela-val { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dela-valknapp {
  display: flex; gap: 12px; align-items: center; text-align: left; min-height: 64px; padding: 12px 14px;
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  font: inherit; cursor: pointer; box-shadow: var(--lift);
}
.dela-valknapp:hover:not(:disabled) { border-color: var(--line-strong); }
.dela-valknapp[aria-pressed="true"] { border: 2px solid var(--ink); padding: 11px 13px; }
.dela-valknapp[aria-pressed="true"] .dela-valtext b::after { content: " · valt"; font-weight: 600; color: var(--ink-2); }
.dela-valknapp:disabled { cursor: not-allowed; box-shadow: none; background: var(--paper-2); }
.dela-valtext { display: grid; gap: 2px; min-width: 0; }
.dela-valtext b { font-weight: 700; }
.dela-valtext small { color: var(--ink-2); font-size: 13.5px; }
.dela-knappar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

@media (max-width: 760px) {
  .dela-val { grid-template-columns: minmax(0, 1fr); }
  .dela .dela-fil { align-items: flex-start; }
  .dela-knappar > .btn { flex: 1 1 0; min-height: 48px; }
  .dela-bild, .dela-pdf { width: 88px; height: 88px; }
  .dela-valknapp { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .dela-valknapp { transition: none; } }
.dela-husse { flex: none; }