/* Dangerous goods declaration page (declare.html). Builds on track.css (hero), flow.css (steps, summary,
   confirmation) and book.css (form sections, checkboxes, contact grid); this file adds the upload slots,
   rate card and upload progress. */

.dg-form { display: grid; gap: var(--space-6); }

/* Upload slots */
.dg-docs { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .dg-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dg-doc { gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.dg-doc__head { display: flex; gap: var(--space-2); align-items: flex-start; }
.dg-doc__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--action); color: var(--on-action); }
.dg-doc__icon svg { width: 18px; height: 18px; }
.dg-doc__title { display: block; font-weight: 700; }
.dg-doc__text { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.dg-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 112px; margin-top: var(--space-2); padding: var(--space-4); border: 2px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; }
.dg-drop svg { width: 24px; height: 24px; color: var(--ink); }
.dg-drop:hover, .dg-drop.is-drag { border-color: var(--ink); background: var(--surface-alt); }
.dg-drop.is-drag { border-style: solid; box-shadow: inset 0 0 0 2px var(--signal); }
.dg-drop:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
.dg-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dg-drop__cta { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dg-doc.px-field--error .dg-drop { border-color: var(--danger); }

.dg-files { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dg-files:empty { display: none; }
.dg-file { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 0 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 14px; line-height: 20px; }
.dg-file > svg { flex: none; width: 16px; height: 16px; }
.dg-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-file__size { flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dg-file__remove { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 38px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); cursor: pointer; }
.dg-file__remove:hover { background: var(--surface-alt); }
.dg-file__remove:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.dg-file__remove svg { width: 16px; height: 16px; }

.dg-notes { grid-column: 1 / -1; }

/* Rate card */
.dg-rate { display: grid; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background-color: var(--action); background-image: radial-gradient(var(--action-hover) 1.2px, transparent 1.2px); background-size: 24px 24px; color: var(--on-action); }
@media (min-width: 720px) { .dg-rate { grid-template-columns: 1fr 1fr; align-items: center; } }
.dg-rate__price { display: flex; flex-direction: column; align-items: flex-start; }
.dg-rate__label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--line); }
.dg-rate__amount { margin-top: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--signal); color: var(--ink); font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dg-rate__sub { margin-top: var(--space-2); font-size: 16px; color: var(--line); }
.dg-rate__lines { margin: 0; }
.dg-rate__lines div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--action-hover); }
.dg-rate__lines dt { color: var(--line); }
.dg-rate__lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-rate__lines .dg-rate__total { border-top: 2px solid var(--on-action); font-size: 18px; }
.dg-rate__lines .dg-rate__total dt { color: var(--on-action); font-weight: 700; }

.dg-agree { padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.dg-agree:has(input:checked) { border-color: var(--ink); background: var(--signal); }
.dg-agree .book-check { font-weight: 600; }

.dg-progress { display: grid; gap: var(--space-2); }
.dg-progress__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); }
.dg-progress__bar span { display: block; width: 0; height: 100%; background: var(--signal); transition: width .2s; }

@media (max-width: 639px) {
  .dg-rate__amount { font-size: 40px; line-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .dg-progress__bar span { transition: none; } }