/* The example pages: the app's sky, header and panels, laid out as a site:
   a trail under the header, content on the left, a list panel on the right. */
body.pages { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
body.pages header h1 a { color: inherit; text-decoration: none; }
.crumbs { width: 100%; max-width: var(--page-w); margin: 0 auto 6px; padding: 0 18px; font-size: 11px; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.crumbs a { color: #0033cc; }
body.pages main { flex: 1; align-items: start; align-content: start; }
body.pages .card { flex: none; display: block; overflow: visible; }
body.pages .card .bar { display: block; margin: 0 -5px 5px; }
.story { padding: 4px 8px 6px; font-size: 13px; line-height: 1.5; }
.story p { margin: 0 0 8px; }
.story p:last-child { margin-bottom: 0; }
.story h3 { margin: 12px 0 4px; font-size: 13px; color: var(--accent-deep); }
.story .sources { margin: 0 -8px -6px; }
.story .sources li:first-child { border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.pic { display: block; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.pic svg, .thumb svg { display: block; width: 100%; height: 100%; }
/* The list panel: plain links, etched lines between them, the current one bold. */
.list { margin: 0; padding: 2px 0 0; list-style: none; font-size: 13px; }
.list li { padding: 5px 10px; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.list li:first-child { border-top: 0; box-shadow: none; }
.list li[aria-current] { background: rgba(255, 255, 255, 0.45); }
.side-note { margin: 0; padding: 8px 10px 6px; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); font-size: 13px; }
/* The index: a directory listing, thumbnail left and words right, one line between rows. */
.listing { margin: 0; padding: 0 4px; list-style: none; }
.listing li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 6px; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.listing li:first-child { border-top: 0; box-shadow: none; }
.thumb { flex: none; width: 168px; aspect-ratio: 4 / 3; overflow: hidden; }
.listing h3 { margin: 2px 0 4px; font-size: 14px; }
.listing h3 a { color: #0033cc; }
.listing p { margin: 0; font-size: 13px; line-height: 1.5; }
body.pages .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 8px 8px; }
body.pages .actions .button { height: 24px; padding: 0 12px 0 7px; font-size: 12px; }
.tools { font-size: 12px; color: var(--ink); }
.pager { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px 4px; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); font-size: 12px; }
.pager a:last-child { text-align: right; }
.data { margin: 4px 8px 8px; border-collapse: collapse; font-size: 12px; }
.data caption { text-align: left; padding: 0 0 3px; font-weight: 700; }
.data th, .data td { padding: 2px 10px 2px 0; text-align: left; border-top: 1px solid var(--line); font-weight: 400; }
.data td { font-variant-numeric: tabular-nums; }
.side-note .ico { vertical-align: -3px; margin-right: 3px; }
.sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.filed { font-size: 12px; }
.listing .filed { margin-top: 4px; }
.cloud { margin: 0; padding: 6px 10px 8px; line-height: 1.7; }
.cloud a { margin-right: 6px; white-space: nowrap; }
.tools a { white-space: nowrap; }
.tools .ico, .list .ico, .side-note .ico, .story .ico, .bar .ico { vertical-align: -3px; margin-right: 2px; }
/* A link's icon is spaced by a margin, not a space: a space would be underlined. */
.side-note a .ico, .story a .ico, .filed a .ico { margin-right: 5px; }
.bar .ico { filter: none; vertical-align: -4px; margin-right: 4px; }
body.pages footer { margin-top: 16px; }
body.pages footer .badges { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 0; box-shadow: none; }
body.pages footer .badge { display: block; width: 80px; height: 15px; }
@media print {
  body.pages * { visibility: visible; }
  body.pages .backdrop, body.pages header, body.pages footer, body.pages .crumbs, body.pages .side, body.pages .actions, body.pages .pager { display: none; }
  body.pages main { display: block; }
  body.pages .card { background: none; border: 0; box-shadow: none; }
  body.pages .bar { color: #000; background: none; border-bottom: 1px solid #000; box-shadow: none; text-shadow: none; }
  body.pages .bar .ico, body.pages .filed { display: none; }
}
@media (max-width: 820px) {
  .thumb { width: 120px; }
}