/* An icon's own page (icons/<name>.html): the trail, the name with its category, tags and motion, the five styles, the
   real sizes, how to get the file and the rest of the category. The parts reuse site.css: its tokens and type steps,
   the style strip, the tag chips, the icon tiles, .prose for the code, and the buttons. */
.icon-page { display: grid; gap: var(--gap-3xl); padding-block: 24px 96px; }
.icon-section { display: grid; gap: var(--gap-md); min-width: 0; }

/* The trail, Home / Icons / the icon, as the page's structured data names it. */
.icon-trail ol { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-3); font-size: var(--t-sm); }
.icon-trail li + li::before { content: "/"; margin-right: 8px; }
.icon-trail a { color: var(--ink-2); transition: color 150ms var(--ease); }
.icon-trail a:hover { color: var(--ink); }
.icon-trail [aria-current] { color: var(--ink); }

/* The name with its code name beside it, a line about it, and its facts, each a link into the icon browser. */
.icon-head { display: grid; gap: var(--gap-lg); }
.icon-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.icon-title code { padding: 4px 10px; border-radius: 10px; background: var(--chip); color: var(--chip-ink); font-size: var(--t-md); overflow-wrap: anywhere; }
.icon-lede { max-width: 680px; }
.icon-facts { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.icon-facts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.icon-facts dt { color: var(--ink-3); }

/* The five styles large, then Linear at the sizes it is used at. */
.icon-page .style-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.icon-page .style-strip-glyph { background: var(--panel); }
.icon-page .style-strip-glyph .i { width: 96px; height: 96px; }
.icon-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; padding: 24px 32px; background: var(--panel); }
.icon-sizes li { display: grid; justify-items: center; gap: 12px; color: var(--ink-2); font: 400 var(--t-xs)/1 var(--font-mono); }
.icon-sizes .i { color: var(--ink); }
.icon-sizes [data-size="16"] .i { width: 16px; height: 16px; }
.icon-sizes [data-size="20"] .i { width: 20px; height: 20px; }
.icon-sizes [data-size="32"] .i { width: 32px; height: 32px; }

/* Getting the file: the command, each style's file in the package and on the site, and the Linear source. Code wraps,
   so a phone shows it whole, and keeps clear of the Copy button site.js adds. */
.icon-page .prose { max-width: 880px; }
.icon-page .prose pre { padding-right: 84px; white-space: pre-wrap; overflow-wrap: anywhere; }
.icon-files { display: grid; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.icon-files li { display: grid; grid-template-columns: 120px repeat(2, minmax(0, 1fr)); align-items: baseline; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.icon-files li > * { justify-self: start; }
.icon-files span { font-weight: 500; }
.icon-files code { overflow-wrap: anywhere; }
.icon-source { display: grid; gap: 8px; }
.icon-source figcaption { color: var(--ink-2); font: 400 var(--t-xs)/1.4 var(--font-mono); }

/* The rest of the category as small tiles, each the way to its own page, so each shows its whole name. */
.icon-more { --icon-size: 24px; padding: 8px; background: var(--panel); }
.icon-more .icon-tile { align-content: start; }
.icon-more .icon-tile:hover { background: var(--card); }
.icon-more .icon-name { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.icon-back { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.icon-back .btn-tertiary > .i { width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .icon-page .style-strip-glyph .i { width: 64px; height: 64px; }
}
@media (max-width: 767px) {
  /* Three styles over two, the two centred under the three. */
  .icon-page .style-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .icon-page .style-strip li { grid-column: span 2; }
  .icon-page .style-strip li:nth-child(4) { grid-column: 2 / span 2; }
  .icon-page .style-strip-glyph .i { width: 48px; height: 48px; }
  .icon-sizes { justify-content: space-between; gap: 16px; padding: 20px; }
  .icon-files li { grid-template-columns: minmax(0, 1fr); }
  /* The Copy button gets a band of its own above the code, which keeps the whole width. */
  .icon-page .prose pre { padding-top: 52px; padding-right: 20px; }
}