/* The "+" on the Sources page (add prices or specs from a spreadsheet) and the preview before integrating. */
.imp { margin: 4px 0 18px; }
.imp > .alert { margin: 0 0 12px; max-width: 90ch; }

/* The round "+". Closed, it is the button and its label; open, it eases into a panel like every other section. */
details.sec.imp-add { background: transparent; border-color: transparent; transition: background-color var(--ease), border-color var(--ease); }
details.sec.imp-add[open]:not(.closing) { background: var(--panel); border-color: var(--line); }
details.sec.imp-add > summary { gap: 12px; width: fit-content; max-width: 100%; padding: 8px 18px 8px 8px; border-radius: 999px; }
details.sec.imp-add > summary::before { content: none; }
details.sec.imp-add > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.imp-plus { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform var(--ease), box-shadow var(--ease); }
.imp-plus::before, .imp-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: currentColor; }
.imp-plus::after { transform: rotate(90deg); }
details.sec.imp-add > summary:hover .imp-plus { box-shadow: 0 2px 9px rgba(0, 0, 0, .26); }
details.sec.imp-add[open]:not(.closing) .imp-plus { transform: rotate(45deg); }

/* The form inside it */
.imp-form { padding-top: 4px; }
.imp-form .imp-how { grid-column: 1 / -1; margin: 0; max-width: 90ch; }
.imp-form input[type=file] { width: 100%; min-width: 0; max-width: 100%; }
.imp-form textarea { width: 100%; min-height: 6.5em; font-size: .9rem; white-space: pre; overflow: auto; tab-size: 12; }
.imp-form .btn[disabled], .imp-actions .btn[disabled] { opacity: .45; cursor: default; }
.imp-msg { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--ease), opacity var(--ease); }
.imp-msg.on { grid-template-rows: 1fr; opacity: 1; }
.imp-msg > div { min-height: 0; overflow: hidden; }
.imp-msg .alert { margin: 0; }
.imp-tools { margin: 0 0 10px; }

/* The preview */
.imp-facts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.imp-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.imp-facts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.imp-facts strong { overflow-wrap: anywhere; }
.imp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; }
.imp-reasons { margin: 0 0 4px; max-width: 90ch; }
.imp-h { margin: 18px 0 8px; }
.imp-table th, .imp-table td { font-size: .9rem; }
.imp-table thead th { min-width: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.imp-table tbody tr:last-child > * { border-bottom: 0; }
.imp-table tbody td:first-child { width: 1%; white-space: nowrap; }
.imp-table .val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }