/* Import from Google (public/gimport.js).
 *
 * Its own sheet for the reason cleanup.css has one, and it leans on it: the progress strip is
 * cleanup's `.cl-status` / `.cl-prog`, the page column is `.cl-page`, the lists are the app's
 * `.rows .row`. Every colour is a theme token, so every theme dresses it with no rule of its own.
 */

.gi-page { max-width: 820px; }

.gi-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: calc(14 * var(--sp)) calc(16 * var(--sp));
  border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--panel);
}
.gi-card h3 { margin: 0; font-size: var(--fs-lg, 1.05rem); font-weight: var(--fw-bold); color: var(--text); }
.gi-card .hint { margin: 0; }
.gi-card .acc-note { margin: 0; }

.gi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.gi-actions .btn-primary { margin-left: auto; }
.gi-actions a.btn { text-decoration: none; }

.gi-list { width: 100%; }
.rows .gi-row { align-items: center; gap: 11px; padding: calc(8 * var(--sp)) 13px; cursor: pointer; }
.gi-row > input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.gi-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.gi-ic .badge { --tile: 34px; }
.gi-row .row-name { min-width: 0; }
.gi-nm { display: block; font-weight: var(--fw-semi); color: var(--text); overflow-wrap: anywhere; }
/* A split export's parts differ only at the end (-001, -002), so a name is wrapped, never cut. */
.gi-row .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-size { flex: none; font-family: var(--font-meta); font-size: calc(var(--fs-sm) + var(--fs-half)); color: var(--text2); white-space: nowrap; text-align: right; }
.gi-row.selected .gi-size { color: inherit; }
.gi-sub .gi-row { cursor: default; }
.gi-more { padding: 8px 13px; }

.gi-dest { margin: 2px 0 0; color: var(--text2); }
.gi-dest b { color: var(--text); font-weight: var(--fw-semi); }
.gi-room.gi-tight, .gi-warn { color: var(--danger, var(--text2)); }
.gi-warn { display: flex; gap: 7px; align-items: flex-start; }
.gi-warn > svg, .gi-foot > svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.gi-foot { display: flex; align-items: flex-start; gap: 7px; color: var(--faint); margin-top: 4px; }

.gi-facts { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 5px; color: var(--text2); }
.gi-facts b { color: var(--text); font-weight: var(--fw-semi); }
.gi-counts { margin: 0; }
.gi-none { padding: 4px 0; }

/* The file-list controls in the top bar mean nothing here. */
html[data-view=gimport] :is(#seg-layout, #seg-size, #btn-sort, #btn-pin) { display: none; }

@media (max-width: 640px) {
  .gi-card { padding: calc(12 * var(--sp)) calc(12 * var(--sp)); }
  .rows .gi-row { gap: 8px; padding: calc(8 * var(--sp)) 10px; }
  .gi-actions .btn-primary { margin-left: 0; }
  .gi-actions .btn { flex: 1 1 auto; justify-content: center; }
}