/* @spec KeepGong.DesignSystem.LibraryUploadFormSpec — screenshot-aligned upload workspace. */
.kg-upload-dialog {
  --upload-width: 960px;
  --upload-control-height: 44px;
  width: 100%; max-width: var(--upload-width); max-height: 92dvh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.kg-upload-dialog > .modal__header {
  flex: none; margin: 0; padding: var(--space-300) var(--space-400);
  padding-right: var(--space-800); border-bottom: var(--border-width-default) solid var(--border-divider);
}
.kg-upload-dialog > .modal__body { min-height: 0; overflow: hidden; gap: 0; }
.kg-upload-form { display: flex; flex-direction: column; min-height: 0; }
.kg-upload-scroll {
  display: flex; flex-direction: column; gap: var(--space-250); min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: var(--space-300) var(--space-400);
}
.kg-upload-section {
  display: flex; flex-direction: column; gap: var(--space-250); flex: none;
  padding-bottom: var(--space-300); border-bottom: var(--border-width-default) solid var(--border-divider);
}
.kg-upload-section:last-child { border-bottom: 0; padding-bottom: 0; }
.kg-upload-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-150); }
.kg-upload-section-head h3 { margin: 0; font-size: var(--text-style-body-medium-font-size); font-weight: var(--text-style-weight-bold); color: var(--text-primary); }
.kg-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-250); align-items: start; }
.kg-upload-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kg-upload-field { display: flex; flex-direction: column; gap: var(--space-100); padding: 0; margin: 0; min-width: 0; border: 0; }
.kg-upload-field > span, .kg-upload-field > label, .kg-upload-field > legend {
  color: var(--text-secondary); font-size: var(--text-style-body-small-font-size); font-weight: var(--text-style-weight-bold);
}
.kg-upload-field > legend { margin-bottom: var(--space-100); padding: 0; }
.kg-upload-required { color: var(--semantic-text-warning); }
.kg-upload-choices { display: flex; flex-wrap: wrap; gap: var(--space-100); }
.kg-upload-choice { position: relative; display: flex; flex: 1 0 auto; cursor: pointer; }
.kg-upload-choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.kg-upload-choice span {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--upload-control-height);
  box-sizing: border-box; padding: var(--space-100) var(--space-150);
  border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-page); color: var(--text-secondary); font-size: var(--text-style-body-small-font-size);
}
.kg-upload-choice input:checked + span { background: var(--semantic-fill-inverse); border-color: var(--semantic-fill-inverse); color: var(--semantic-text-inverse); font-weight: var(--text-style-weight-bold); }
.kg-upload-choice input:focus-visible + span,
.kg-upload-dialog button:focus-visible,
.kg-upload-dropzone:focus-within, .kg-upload-section summary:focus-visible {
  outline: 2px solid var(--semantic-text-brand); outline-offset: 3px;
}
.kg-upload-choice:hover span { border-color: var(--semantic-fill-inverse); }
.kg-upload-help { color: var(--text-subtle); font-size: var(--text-style-caption-medium-font-size); line-height: var(--text-style-caption-line-height); margin: 0; }
.kg-upload-section > .kg-upload-help { margin-top: calc(-1 * var(--space-150)); }
.kg-upload-inline { display: flex; align-items: flex-end; gap: var(--space-100); min-width: 0; }
.kg-upload-inline > .kg-upload-field:has(input[disabled]) { max-width: var(--space-800); }
.kg-upload-inline > .kg-upload-help { align-self: center; }
.kg-upload-link { flex: none; min-height: var(--upload-control-height); border: 0; background: transparent; padding: var(--space-075) var(--space-100); color: var(--semantic-text-brand); cursor: pointer; font: inherit; font-size: var(--text-style-body-small-font-size); white-space: nowrap; border-radius: var(--radius-md); }
.kg-upload-link:hover { background: var(--semantic-background-subtle); }
.kg-upload-notice { margin: 0; padding: var(--space-150) var(--space-200); border-radius: var(--radius-md); background: var(--semantic-status-warning-soft-fill); color: var(--text-secondary); font-size: var(--text-style-caption-medium-font-size); line-height: var(--text-style-caption-line-height); }
.kg-upload-notice strong { color: var(--semantic-text-warning); margin-right: var(--space-050); }
.kg-upload-schools { padding: var(--space-150); border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-md); }
.kg-upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-150); border: var(--border-width-default) dashed var(--border-default); border-radius: var(--radius-lg); padding: var(--space-400) var(--space-200); cursor: pointer; text-align: center; }
.kg-upload-dropzone:hover, .kg-upload-dropzone.is-dragging { border-color: var(--semantic-fill-brand); background: var(--semantic-background-subtle); }
.kg-upload-dropzone strong { font-size: var(--text-style-body-small-font-size); font-weight: var(--text-style-weight-medium); color: var(--text-secondary); }
.kg-upload-files { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-100); }
.kg-upload-files:empty { display: none; }
.kg-upload-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-150); padding: var(--space-100) var(--space-150); border: var(--border-width-default) solid var(--border-default); border-radius: var(--radius-md); }
.kg-upload-file > div { min-width: 0; display: grid; gap: var(--space-025); }
.kg-upload-file strong { font-size: var(--text-style-body-small-font-size); font-weight: var(--text-style-weight-medium); overflow-wrap: anywhere; }
.kg-upload-footer { flex: none; border-top: var(--border-width-default) solid var(--border-divider); padding: var(--space-200) var(--space-400); background: var(--bg-page); display: flex; flex-direction: column; gap: var(--space-100); }
.kg-upload-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-100); }
.kg-upload-actions button { flex: none; min-height: var(--upload-control-height); }
.kg-upload-urgent { border: var(--border-width-default) solid var(--semantic-fill-warning); background: var(--semantic-fill-warning); color: var(--semantic-text-inverse); font: inherit; font-size: var(--text-style-body-small-font-size); padding: var(--space-100) var(--space-200); border-radius: var(--radius-md); cursor: pointer; }
.kg-upload-error { margin: 0; color: var(--semantic-text-danger); font-size: var(--text-style-body-small-font-size); }
.kg-upload-error:empty { display: none; }
.kg-upload-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-200) var(--space-300); margin: 0; font-size: var(--text-style-body-small-font-size); }
.kg-upload-summary dt { color: var(--text-subtle); }
.kg-upload-summary dd { margin: 0; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.kg-upload-summary p { margin: 0 0 var(--space-050); }
.kg-upload-badge { padding: var(--space-050) var(--space-100); border-radius: var(--radius-md); background: var(--semantic-background-subtle); color: var(--semantic-text-brand); font-size: var(--text-style-caption-medium-font-size); }
.kg-upload-section summary { cursor: pointer; font-size: var(--text-style-body-small-font-size); color: var(--text-secondary); padding: var(--space-050) 0; }
.kg-upload-section .kg-library-upload-target { margin-top: var(--space-150); }
@media (max-width: 680px) {
  .kg-upload-dialog { max-height: 96dvh; }
  .kg-upload-dialog > .modal__header { padding: var(--space-200); padding-right: var(--space-600); }
  .kg-upload-scroll { padding: var(--space-200); }
  .kg-upload-grid, .kg-upload-grid--three { grid-template-columns: minmax(0, 1fr); }
  .kg-upload-section-head { flex-wrap: wrap; }
  .kg-upload-choices { gap: var(--space-075); }
  .kg-upload-choice span { padding: var(--space-075) var(--space-100); }
  .kg-upload-footer { padding: var(--space-150) var(--space-200); }
  .kg-upload-actions { flex-wrap: wrap; }
}

.kg-upload-actions > button:first-of-type { margin-right: auto; }
.kg-upload-search-button { flex: none; min-height: var(--upload-control-height); white-space: nowrap; }
.kg-upload-search-icon {
  display: inline-block; flex: none; width: var(--space-200); height: var(--space-200);
  background: currentColor;
  mask: url('/assets/icons/search.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/search.svg') center / contain no-repeat;
}
.kg-upload-urgent { font-weight: var(--text-style-weight-bold); }
.kg-upload-dialog .select-menu {
  height: auto;
  max-height: calc(var(--select-option-height) * 4);
}
.kg-upload-dialog .select-option { flex-shrink: 0; }

.kg-upload-folder-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-150); }
.kg-upload-folder-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-100); width: 100%; }

.kg-upload-inline > .input-control { flex: 1; min-width: 0; }

.kg-upload-school-field { position: relative; }
.kg-upload-school-popover { position: absolute; top: 100%; inset-inline: 0; margin-top: var(--space-050); z-index: 10; background: var(--bg-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); }
.kg-upload-dialog .stepper { width: 100%; box-sizing: border-box; }
.kg-upload-dialog .stepper input { flex: 1; min-width: 0; width: 100%; }
.kg-upload-grid > .kg-upload-inline { flex-wrap: wrap; }