/* The tool page (/crawl): the same site, so the same tokens, header and footer (site.css). This adds only what is particular to it: the link box, the page the
   crawler eats (set in the same type as the front page's demo), and the end card. */
/* the crawler scrolls the page itself, a pixel at a time: a smooth-scrolling page would answer each of those late */
html { scroll-behavior: auto !important; }
.crawl #stage { position: relative; overflow: visible; min-height: calc(100vh - 64px); }
.crawl .col { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); }
.crawl #creature { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.crawl #world { width: 100%; margin-top: 36px; }
.crawl #fx { z-index: 2; }

.tool-head { padding: 56px 0 46px; }
.tool-head h1 { font: 400 clamp(46px, 6vw, 84px)/.96 var(--serif); letter-spacing: -.02em; margin-top: 18px; }
#bar { display: flex; margin-top: 34px; border: 1px solid #3a3a3f; background: #0f0f11; font: 14px/1 var(--mono); }
#bar:focus-within { border-color: var(--hot); }
#bar input { flex: 1; min-width: 0; padding: 18px 18px; background: transparent; border: 0; outline: 0; color: var(--paper); font: inherit; }
#bar input::placeholder { color: #6a6a70; }
#bar button { padding: 0 26px; background: var(--hot); color: #0b0b0c; border: 0; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#bar button:hover { background: var(--paper); }
#bar button:disabled { background: #3a3a3e; color: var(--dim); cursor: default; }
#barnote { margin-top: 12px; min-height: 1.4em; font: 12px/1.4 var(--mono); color: var(--dim); }
#barnote.err { color: var(--hot); }
.tool-fine { margin-top: 22px; max-width: 40em; font-size: 17px; line-height: 1.55; color: var(--soft); padding-top: 18px; border-top: 1px solid var(--rule); }
.tool-fine b { color: var(--paper); font-weight: 500; }
.tool-fine a { color: var(--hot); border-bottom: 1px solid currentColor; text-decoration: none; }
.bar nav a.on { color: var(--hot); }

/* the page being read, typeset like the front page's demo */
.crawl .cv-page.article { padding: 8px 0 220px; font: 400 19.5px/1.62 var(--body); color: #dcd8cd; }
.crawl .article .art-head { margin: 0 0 1.5em; padding-bottom: 1.1em; border-bottom: 1px solid var(--rule); }
.crawl .article .art-site { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hot); margin-bottom: 1em; }
.crawl .article .art-title { font: 400 clamp(34px, 4.4vw, 52px)/1.06 var(--serif); letter-spacing: -.012em; margin: 0 0 .4em; color: var(--paper); }
.crawl .article .art-by { font: 12px/1.4 var(--mono); color: var(--dim); }
.crawl .article p { margin: 0 0 1.05em; }
.crawl .article .art-body h2, .crawl .article .art-body h3, .crawl .article .art-body h4 { font: 400 1.6em/1.2 var(--serif); margin: 1.4em 0 .5em; color: var(--paper); }
.crawl .article .art-body h3, .crawl .article .art-body h4 { font-size: 1.35em; }
.crawl .article blockquote { margin: 1.4em 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--hot); color: var(--paper); font-style: italic; }
.crawl .article a { color: var(--link); text-decoration: none; border-bottom: 1px solid #8aa4ff55; }
.crawl .article ul, .crawl .article ol { margin: .4em 0 1.1em 1.4em; padding: 0; list-style: revert; }
.crawl .article li { margin-bottom: .4em; }
.crawl .article .cv-attrib { margin-top: 2.2em; padding-top: .9em; border-top: 1px solid var(--rule); font: 11.5px/1.6 var(--mono); color: var(--dim); }
.crawl .article img { max-width: 100%; height: auto; }

/* tally and end card: fixed, quiet, in the site's own voice */
#tally { position: fixed; left: 12px; bottom: 12px; z-index: 40; pointer-events: none; font: 11px/1 var(--mono); color: var(--dim); letter-spacing: .04em; padding: 7px 9px; background: rgba(11, 11, 12, .92); border: 1px solid #2a2a2f; }
#tally[hidden] { display: none; }
#tally b { color: var(--paper); font-weight: 700; }
#tally i { font-style: normal; color: #4a4a50; padding: 0 .35em; }
#endcard { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); padding: 10px 14px;
  background: rgba(11, 11, 12, .97); border: 1px solid #3a3a3f; font: 12px/1 var(--mono); color: var(--dim); animation: ecin .35s ease-out both; }
#endcard[hidden] { display: none; }
@keyframes ecin { from { opacity: 0; transform: translate(-50%, 8px); } }
#endcard b { color: var(--paper); }
#endcard i { font-style: normal; color: #4a4a50; padding: 0 .2em; }
#endcard button { padding: 8px 12px; background: #17171a; color: var(--paper); border: 1px solid #3a3a3f; font: 700 11px/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
#endcard button:hover:not(:disabled) { background: var(--hot); color: #0b0b0c; border-color: var(--hot); }
#endcard button:disabled { color: #5a5a60; cursor: default; }
#endcard button[hidden] { display: none; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; font: 13px/1 var(--mono); color: var(--dim); z-index: 80; background: var(--bg); }
#boot[hidden] { display: none; }
@media (max-width: 960px) {
  .tool-head { padding: 34px 0 34px; }
  #bar { flex-wrap: wrap; } #bar input { flex-basis: 100%; } #bar button { padding: 16px 26px; width: 100%; }
  .crawl .cv-page.article { font-size: 18px; }
  .tool-fine { font-size: 16px; }
}