/* The studio's own layout on top of the API Company library.
   Library files (tokens.css, components.css) are never edited: only var(--…) here. */

.login { max-width: 380px; margin: var(--space-7) auto; }

/* Feed head: status tabs and the import button */
.feed-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: var(--space-4) 0 var(--space-5);
}
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tabs__item {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text); text-decoration: none; font-size: var(--text-sm);
  background: var(--surface-raised);
}
.tabs__item:hover { border-color: var(--border-strong); }
.tabs__item.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.feed-head__import { display: flex; align-items: center; gap: var(--space-3); }
.feed-head__last { color: var(--text-muted); font-size: var(--text-sm); }

/* Days and tiles */
.day { margin-bottom: var(--space-6); }
.day__title {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
.tiles {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.tile {
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text); text-decoration: none;
  transition: border-color 140ms ease;
}
.tile:hover { border-color: var(--accent); }
.tile__cover {
  height: 88px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-2xl); font-weight: 600;
}
.tile__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.tile__title { font-size: var(--text-md); font-weight: 600; }
.tile__summary { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
.tile__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Library badges are one-line pills; a long metric must wrap inside the tile, not run off it. */
.tile__meta .badge {
  height: auto; min-height: 22px; max-width: 100%;
  padding-top: 2px; padding-bottom: 2px;
  white-space: normal; line-height: 1.35; border-radius: var(--radius-md);
}

/* Project card */
.back { margin: var(--space-4) 0; font-size: var(--text-sm); }
.back a { color: var(--text-muted); text-decoration: none; }
.back a:hover { color: var(--accent); }
.card {
  background: var(--surface-raised); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card__cover {
  height: 140px; border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-2xl); font-weight: 600;
}
.card__title { font-size: var(--text-xl); margin: 0; }
.card__summary { font-size: var(--text-md); line-height: 1.5; margin: 0; }
.passport {
  display: grid; grid-template-columns: minmax(110px, max-content) 1fr;
  gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; font-size: var(--text-base);
}
.passport dt { color: var(--text-muted); }
.passport dd { margin: 0; overflow-wrap: break-word; }
/* On a phone two columns leave the value a sliver: label above, value below. */
@media (max-width: 600px) {
  .passport { grid-template-columns: 1fr; gap: 0; }
  .passport dt { font-size: var(--text-sm); margin-top: var(--space-3); }
  .passport dt:first-child { margin-top: 0; }
}
.passport a, .section__body a { color: var(--accent); }
.section { border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); }
.section__title {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--space-2); cursor: default;
}
details.section > summary { cursor: pointer; }
.section__body { line-height: 1.55; overflow-wrap: anywhere; }
.section__body p { margin: 0 0 var(--space-2); }
.section__body ul, .section__body ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }

/* Decision block */
.decision { margin-bottom: var(--space-7); }
.formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.formats__soon { color: var(--text-faint); font-size: var(--text-xs); }
.decision .actions form { display: contents; }


/* Article block */
.page-note { margin-bottom: var(--space-4); }
.article { margin-bottom: var(--space-5); gap: var(--space-4); }
.headlines { display: flex; flex-direction: column; gap: var(--space-2); }
.article__preview {
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); background: var(--surface-raised); line-height: 1.6;
  overflow-wrap: break-word;
}
.article__headline { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.article__cover, .article__body figure { margin: var(--space-4) 0; }
.article__cover img, .article__body figure img {
  display: block; max-width: 100%; height: auto; border-radius: var(--radius-md);
}
.article__cover figcaption, .article__body figcaption {
  font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1);
}
.article__body h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.article__body a { color: var(--accent); }
.article__body table { border-collapse: collapse; width: 100%; margin: var(--space-3) 0; display: block; overflow-x: auto; }
.article__body th, .article__body td {
  border: var(--border-width) solid var(--border); padding: var(--space-1) var(--space-2); text-align: left;
}
.article__changes ul, .article__versions ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.article__changes li, .article__versions li { margin-bottom: var(--space-2); }
.article__reason { color: var(--text-muted); }
.article__textarea { width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); }
/* Grows with the text (studio.js); past 60% of the screen it scrolls. */
.article__instruction { min-height: 120px; max-height: 60vh; overflow-y: auto; }
.inline-form { display: inline; }
.article details > summary { cursor: pointer; font-weight: 600; }

/* Tile and card pictures: screenshots of the project's site */
.tile__image { display: block; width: 100%; height: 120px; object-fit: cover; object-position: top; }
.card__image {
  display: block; width: 100%; max-height: 320px; object-fit: cover; object-position: top;
  border-radius: var(--radius-md); border: var(--border-width) solid var(--border);
}
/* The UI library resets list markers; an article needs them back. */
.article__body ul, .section__body ul { list-style: disc; }
.article__body ol, .section__body ol { list-style: decimal; }
.article__body ul, .article__body ol { padding-left: var(--space-5); margin: var(--space-2) 0; }

/* The article's place in the blog and the vc.ru buttons. */
.article__publish { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.article__publish p { margin: 0; overflow-wrap: anywhere; }