/* Google Drive link import. The file dropzone and the link share one dashed frame:
   files on the left, the link behind a thin divider on the right. #documentsView
   does not scroll, so status and results replace the field row, and the skipped
   list opens over the board with its own scroll. The layout follows the width of
   the Base column, not the window: a desktop sidebar beside a small window leaves
   as little room as a tablet. */
#documentsView { container: documents-view / inline-size; }
#documentsView .document-add { display: flex; flex: 0 0 auto; align-items: stretch; margin-bottom: 16px; border: 1px dashed #9dbdb5; border-radius: 13px; background: #f9fcfa; transition: border-color .15s, box-shadow .15s; }
#documentsView .document-add:has(> .document-dropzone:hover) { border-color: var(--teal); }
#documentsView .document-add:has(> .document-dropzone.is-dragover) { border-style: solid; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
#documentsView .document-add > .document-dropzone { width: auto; flex: 1 1 0; min-width: 0; min-height: 96px; margin: 0; border: 0; border-radius: 12px 0 0 12px; background: transparent; box-shadow: none; }
#documentsView .document-add > .document-dropzone:hover, #documentsView .document-add > .document-dropzone.is-dragover { background: var(--teal-soft); }
#documentsView .document-add > .document-dropzone:focus-visible { outline-offset: -3px; }

.drive-import { position: relative; flex: 0 0 clamp(440px, 38%, 520px); min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 12px 18px; border-left: 1px solid var(--line); }
.drive-import-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.drive-import .drive-import-input { min-width: 0; width: 100%; flex: 1 1 auto; text-overflow: ellipsis; }
.drive-import .drive-import-input:focus { border-color: var(--teal); }
.drive-import .drive-import-input::placeholder { color: var(--faint); opacity: 1; }
.drive-import .drive-import-input:disabled { background: var(--surface-soft); cursor: wait; }
.drive-import .drive-import-submit { min-height: 46px; flex: 0 0 auto; }
.drive-import-hint { margin: 0; padding-left: 2px; color: var(--muted); font-size: var(--font-caption); line-height: 1.35; }
.drive-import .drive-import-error { min-height: 0; margin: 0; padding-left: 2px; font-size: min(var(--font-caption), .9375rem); line-height: 1.3; overflow-wrap: anywhere; }

/* Status: source on the first line, counters on the second, Stop on the right. */
.drive-import-status { min-height: 46px; }
.drive-import-text { min-width: 0; flex: 1 1 auto; margin: 0; color: var(--ink); font-size: var(--font-small); line-height: 1.45; overflow-wrap: anywhere; }
.drive-import-status .drive-import-label { display: block; overflow: hidden; color: var(--ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.drive-import-progress { display: block; color: var(--muted); }
.drive-import-part { white-space: nowrap; }
.drive-import-stop { flex: 0 0 auto; }

/* Result: summary, skipped list and close on the first line; the note uses the full width. */
.drive-import-final { min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "text skipped close" "note note note"; align-items: center; gap: 2px 8px; }
.drive-import-final > .drive-import-text { grid-area: text; font-weight: 700; }
.drive-import-final > .drive-import-notice { grid-area: auto; grid-row: 1 / span 2; grid-column: 1 / span 2; font-size: min(var(--font-caption), .9375rem); font-weight: 400; line-height: 1.3; }
.drive-import-note { grid-area: note; min-width: 0; margin: 0; color: var(--muted); font-size: var(--font-caption); line-height: 1.35; overflow-wrap: anywhere; }
.drive-import-note[role="alert"], .drive-import-notice { color: var(--rose); }
.drive-import-note[role="alert"] { font-size: min(var(--font-caption), .9375rem); line-height: 1.3; }
.drive-import .drive-import-close { grid-area: close; width: 40px; height: 40px; border-radius: 9px; color: var(--muted); }
.drive-import .drive-import-close:hover { background: var(--surface-soft); color: var(--ink); }

/* The list opens over the board instead of pushing it down. */
.drive-import-skipped { grid-area: skipped; }
.drive-import-skipped > summary { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; border-radius: 8px; color: var(--teal); font-size: var(--font-caption); font-weight: 700; white-space: nowrap; list-style: none; cursor: pointer; }
.drive-import-skipped > summary::-webkit-details-marker { display: none; }
.drive-import-skipped > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.drive-import-skipped[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.drive-import-skipped > summary:hover { background: var(--teal-soft); }
.drive-import-skipped-list { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; left: 0; max-height: min(30vh, 220px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.drive-import-skipped-list ul { margin: 0; padding: 0; list-style: none; }
.drive-import-skipped-list li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: var(--font-caption); line-height: 1.4; overflow-wrap: anywhere; }
.drive-import-skipped-list li:last-child { border-bottom: 0; }
.drive-import-skipped-list li > span { color: var(--ink); }
.drive-import-skipped-list p { margin: 7px 0; color: var(--muted); font-size: var(--font-caption); line-height: 1.4; }

@container documents-view (max-width: 959px) {
  /* Files on top, the link row under a thin line; the access hint moves into the placeholder. */
  #documentsView .document-add { flex-direction: column; margin-bottom: 10px; }
  #documentsView .document-add > .document-dropzone { flex: 0 0 auto; min-height: 60px; padding: 10px 12px; gap: 10px; border-radius: 12px 12px 0 0; }
  .drive-import, .drive-import[data-drive-state] { flex: 0 0 auto; gap: 4px; padding: 8px 10px 10px; border-left: 0; border-top: 1px solid var(--line); }
  .drive-import-hint { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
  .drive-import-row, .drive-import-status, .drive-import-final { min-height: 44px; }
  .drive-import .drive-import-input, .drive-import .drive-import-submit { height: 44px; min-height: 44px; }
  .drive-import-status .drive-import-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--font-caption); }
  .drive-import-status .drive-import-label, .drive-import-progress { display: inline; }
  .drive-import-status .drive-import-label::after { content: ":"; }
  .drive-import-title { display: none; }
  .drive-import-final { row-gap: 0; }
  .drive-import-final > .drive-import-text { font-size: var(--font-caption); }
  .drive-import-note:not([role="alert"]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 600px) { .drive-import .drive-import-submit { padding: 0 14px; } .drive-import-stop { padding: 0 4px; } }
@media (max-width: 359px) { .drive-import-status .drive-import-label { display: none; } }