/* Import surfaces share the main design tokens and controls. */
.import-connection {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 19px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  font-size:13px;
  margin-bottom:28px
}
.import-connection>span:first-child {
  display:flex;
  align-items:center;
  gap:9px
}
.connection-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a1a7b0;
  flex-shrink:0
}
.connection-dot.connected {
  background:var(--accent)
}
.source-layout {
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:28px
}
.source-layout>* {
  min-width:0
}
.source-list {
  display:grid;
  gap:10px;
  max-width:100%
}
.source-card {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:17px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  min-width:0;
  width:100%
}
.source-card.active {
  border-color:#c7dfff;
  background:var(--accent-soft)
}
.source-mark {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--surface);
  color:var(--muted);
  border-radius:9px;
  flex-shrink:0
}
.source-card.active .source-mark {
  background:#fff;
  color:var(--accent)
}
.source-card strong {
  font-size:14px;
  font-weight:550;
  display:block;
  line-height:1.6
}
.source-card small {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-top:5px;
  line-height:1.6
}
.source-card>.icon {
  margin-left:auto;
  width:15px;
  color:var(--muted)
}
.source-footnote {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin:20px 8px
}
.source-feed-head {
  margin:0!important
}
.source-feed-head h2 {
  font-size:22px;
  margin-bottom:7px
}
.source-feed-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px
}
.source-feed-head .search input {
  width:100%
}
.source-feed-head .search button {
  white-space:nowrap
}
.source-article-list {
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff
}
.source-article {
  padding:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:17px;
  border-bottom:1px solid var(--line)
}
.source-article:last-child {
  border:0
}
.source-article-copy {
  min-width:0;
  flex:1;
  overflow-wrap:anywhere
}
.source-article h3 {
  font:600 24px/1.3 var(--serif);
  margin:8px 0
}
.source-article p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  max-width:620px;
  margin-bottom:8px
}
.source-article>a,.source-article>button {
  flex-shrink:0
}
.source-empty {
  margin-top:18px
}
.source-privacy {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:28px 0;
  font-size:12px;
  line-height:1.9;
  color:var(--muted)
}
.source-privacy svg {
  width:16px;
  height:16px;
  margin-top:3px
}
.import-tabs {
  margin-bottom:23px;
  justify-content:space-between;
  width:100%
}
.import-tabs .tab {
  flex:1
}
.checkbox-line {
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.8;
  margin:16px 0;
  color:var(--muted)
}
.modal .checkbox-line input {
  width:17px;
  height:17px;
  min-height:0;
  flex-shrink:0;
  display:inline-block;
  margin:3px 0 0;
  accent-color:var(--accent)
}
.import-modal-note {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px!important;
  font-size:12px!important
}
.import-progress {
  position:sticky;
  top:12px;
  z-index:10;
  background:#f2f7ff;
  border:1px solid #d6e7fc;
  border-radius:12px;
  padding:15px 18px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  line-height:1.8
}
.import-progress .text-btn {
  margin-left:auto;
  white-space:nowrap
}
.spinner {
  border:2px solid #c9dcf4;
  border-top-color:var(--accent);
  border-radius:50%;
  width:18px;
  height:18px;
  animation:spin 1s linear infinite;
  flex-shrink:0
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.import-error {
  padding:16px 19px;
  border:1px solid #efdad6;
  background:#fff8f5;
  border-radius:12px;
  font-size:13px;
  color:#9c4437;
  margin-top:18px;
  line-height:1.8
}
.import-error .text-btn {
  margin-left:10px
}
.import-drafts {
  display:grid;
  gap:12px
}
.draft-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0!important
}
.draft-card h3 {
  font:600 22px/1.3 var(--serif)
}
.draft-card p {
  margin-top:8px;
  font-size:13px
}
.import-attribution {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.import-notice {
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:22px;
  font-size:13px;
  line-height:1.8
}
.source-select {
  display:flex;
  align-self:flex-start;
  padding-top:7px
}
.source-select input {
  width:17px;
  height:17px;
  min-height:0;
  accent-color:var(--accent);
  padding:0
}
.source-feed-actions .btn .icon {
  width:16px;
  height:16px
}
@media(hover:hover) and (pointer:fine) {
  .source-card:hover:not(.active) {
    border-color:#cbd6e5;
    background:#fafbfc
  }
}
@media(max-width:1200px) {
  .source-layout {
    grid-template-columns:220px minmax(0,1fr);
    gap:22px
  }
  .source-card {
    padding:15px 12px;
    gap:10px
  }
  .source-article {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:12px
  }
  .source-article-copy {
    flex-basis:calc(100% - 40px)
  }
  .source-article>.btn {
    margin-left:29px
  }
  .source-article h3 {
    font-size:23px
  }
}
@media(max-width:700px) {
  .source-layout {
    grid-template-columns:minmax(0,1fr);
    gap:24px
  }
  .source-list {
    display:flex;
    overflow-x:auto;
    padding-bottom:8px;
    gap:10px;
    scroll-snap-type:x proximity
  }
  .source-card {
    min-width:240px;
    width:240px;
    flex-shrink:0;
    padding:16px;
    scroll-snap-align:start
  }
  .source-footnote {
    margin:12px 0 0;
    font-size:12px
  }
  .source-feed-head {
    padding:22px
  }
  .source-feed-head h2 {
    font-size:23px
  }
  .source-article {
    padding:20px
  }
  .source-article h3 {
    font-size:25px
  }
  .import-connection {
    align-items:flex-start;
    font-size:13px;
    padding:15px;
    gap:10px;
    flex-wrap:wrap
  }
  .import-connection .subtle {
    font-size:12px
  }
  .import-connection .text-btn {
    padding:0;
    margin-left:16px
  }
  .import-connection>span:first-child {
    align-items:baseline
  }
  .import-progress {
    font-size:13px;
    flex-wrap:wrap;
    padding:15px
  }
  .import-progress>span:nth-child(2) {
    flex:1;
    min-width:180px
  }
  .import-progress .text-btn {
    margin-left:30px;
    padding:0
  }
  .draft-card {
    align-items:flex-start;
    flex-direction:column;
    padding:21px
  }
  .import-tabs .tab {
    font-size:12px;
    padding:9px 7px
  }
  .import-attribution {
    font-size:12px
  }
  .source-privacy {
    font-size:12px
  }
  .source-feed-actions {
    gap:9px
  }
  .source-feed-actions .btn {
    flex:1;
    min-width:120px
  }
  .source-feed-head .search {
    padding:0 10px
  }
  .source-article-copy {
    flex-basis:calc(100% - 35px)
  }
}
@media(prefers-reduced-motion:reduce) {
  .spinner {
    animation:none
  }
}