@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --frame: #111111;       /* the head of the page and the bar down its side */
  --frame-ink: #f4efe4;   /* what is written on them */
  --frame-faint: #9b958a; /* and what is written on them quietly */
  --ground: #ebe5d8;      /* the page: beige. Nothing on it is white. */
  --card: #ebe5d8;        /* what the news and the figures are on: the page's own colour, within a black line */
  --edge: #111111;        /* that line, and the line round what can be pressed or typed in */
  --rule: #cfc7b4;        /* the line between one row and the next */
  --ink: #111111;
  --faint: #625d53;
  --sign: #f4efe4;        /* the sign, on the bar */
  --field: #ebe5d8;       /* the search bar in the head */
  --field-ink: #111111;
  --field-faint: #625d53;
  --list: #ebe5d8;        /* what is found, under the search bar */
  --chosen: #d9d2c1;      /* the one of them chosen */
  --mark: #1f4e79;        /* what is pressed, and what is being typed in: ink blue */
  --up: #116d31;          /* both dark enough to be read on beige */
  --down: #b91c1c;
  --news: #f2c100;        /* the dot beside a piece of news: yellow */
  --short: #1f4e79;       /* and beside a short seller's piece: blue */
}

* { box-sizing: border-box; }

/* A phone makes text larger by itself, and leaves what is beside it as it was. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { height: 100%; }

/* The page is a black frame, the bar down the side and the head across the
   top, with the beige set into it. */
body {
  margin: 0;
  background: var(--frame);
  color: var(--ink);
  font: 15px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum";
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
}

/* The bar down the side */

aside { grid-row: 1 / 3; display: flex; flex-direction: column; min-height: 0; }

.logo { display: flex; flex: none; align-items: center; gap: 8px; min-height: 64px; padding: 8px 24px; text-decoration: none; }
.logo svg { height: 40px; fill: none; stroke: var(--sign); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
/* That stoq is in beta: beside the sign, level with the middle of its letters, in the colour of the spark. */
.logo .beta {
  padding: 1px 7px; border: 1px solid var(--spark); border-radius: 999px;
  color: var(--spark); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
}

nav { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; }
nav a {
  padding: 9px 12px; border: 1px solid transparent; border-radius: 6px;
  color: var(--frame-faint); font-weight: 500; text-decoration: none;
}
nav a[href]:hover { color: var(--frame-ink); }
nav a[aria-current] { border-color: var(--frame-ink); color: var(--frame-ink); }

/* The head of the page */

header { display: flex; align-items: center; padding: 0 28px 0 0; }

.search { position: relative; flex: 1; max-width: 640px; }
.search input {
  width: 100%; height: 42px; padding: 0 14px 0 42px;
  border: 0; border-radius: 6px; outline: 0;
  background: var(--field); color: var(--field-ink); font: inherit; font-size: 16px;
}
.search input:focus { box-shadow: 0 0 0 2px var(--mark); }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--field-faint); opacity: 1; }
.mini input::placeholder { color: var(--faint); }
.glass { position: absolute; left: 13px; top: 11px; width: 20px; height: 20px; fill: none; stroke: var(--field-faint); stroke-width: 2; stroke-linecap: round; pointer-events: none; }

.found {
  position: absolute; z-index: 10; top: 48px; left: 0; right: 0;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--list); color: var(--field-ink); border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.found li { display: flex; gap: 12px; padding: 8px 14px; cursor: pointer; }
.found li[aria-selected="true"], .found li:hover { background: var(--chosen); }
.found .ticker { flex: none; width: 72px; font-weight: 600; }
.found .name { color: var(--field-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The body of the page: the news on the left, the figures on the right */

main {
  min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
  padding: 24px 28px;
  background: var(--ground);
  border-top-left-radius: 14px;
}

.card { background: var(--card); border: 1px solid var(--edge); border-radius: 6px; min-height: 0; }

.side { display: grid; grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; min-height: 0; }
.side .card { overflow-y: auto; }

/* The news */

section.news { display: flex; flex-direction: column; }

.controls { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 24px 14px; }
.kinds { display: flex; gap: 8px; }
.kinds button, .controls select, .mini input {
  height: 34px;
  border: 1px solid var(--edge); border-radius: 6px;
  background: transparent; color: var(--faint); font: inherit; font-size: 15px; font-weight: 500;
}
.kinds button { padding: 0 14px; cursor: pointer; }
.kinds button:hover, .controls select:hover { color: var(--ink); }
.kinds button[aria-pressed="true"] { border-color: var(--mark); color: var(--mark); }

.controls select {
  padding: 0 30px 0 12px; max-width: 190px; cursor: pointer; outline: 0;
  appearance: none;
  /* The arrow, made of two halves so that it is drawn in the colour of the
     words. A picture of an arrow would keep the colour it was drawn in. */
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) no-repeat right 16px center / 5px 5px,
    linear-gradient(135deg, currentColor 50%, transparent 50%) no-repeat right 11px center / 5px 5px;
}
.controls select:focus, .mini input:focus { border-color: var(--mark); box-shadow: none; }

/* Wide enough for its words. Where there is not the room beside the rest, it
   takes the row below. */
.search.mini { flex: 1; min-width: 210px; max-width: none; }
.mini input { width: 100%; padding: 0 10px 0 34px; color: var(--ink); font-weight: 400; outline: 0; }
.mini .glass { left: 10px; top: 8px; width: 17px; height: 17px; stroke: var(--faint); }

.feed { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 8px; }

.item { display: block; padding: 16px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.item:first-child { border-top: 0; }
.item .title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 20px; line-height: 1.3; font-weight: 450;
}
.item:hover .title { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Where there is not the room for all of it on one line, it goes on to the next: no part of it is broken. */
.item .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin-top: 6px;
  color: var(--faint); font-size: 13px; letter-spacing: 0.02em; white-space: nowrap;
}
.item .moved { display: inline-flex; gap: 6px; font-weight: 600; }
.item .moved .ticker { color: var(--ink); }
/* Quieter than the black of an outline: it only parts one thing from the next. */
.bar { color: var(--faint); opacity: 0.5; }
/* A fine line round it: yellow alone is faint on beige. */
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.45); }
.dot.news { background: var(--news); }
.dot.short { background: var(--short); }

/* The indexes */

.indexes { margin: 0; padding: 0 22px; list-style: none; }
.index { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--rule); }
.index:first-child { border-top: 0; }
.index .about { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.index .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index .ticker { color: var(--faint); }
.index .figures { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 600; }
.index .price { font-weight: 700; }

.graph { flex: none; fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.graph.up { stroke: var(--up); }
.graph.down { stroke: var(--down); }
.graph.level { stroke: var(--faint); }

/* The stocks */

.stocks { width: 100%; border-collapse: collapse; }
.stocks th {
  position: sticky; top: 0; z-index: 1; padding: 0;
  background: var(--card); box-shadow: inset 0 -1px var(--edge);
  text-align: right; white-space: nowrap;
}
.stocks th:first-child { text-align: left; }
.stocks th button {
  padding: 13px 8px 11px; border: 0; background: none; cursor: pointer;
  color: var(--faint); font: inherit; font-size: 14px; font-weight: 600;
}
.stocks th:first-child button { padding-left: 22px; }
.stocks th:last-child button { padding-right: 22px; }
.stocks th button:hover, .stocks th[aria-sort] button { color: var(--ink); }
/* Which way the order runs: a small arrow after the heading in use. */
.stocks th button::after {
  content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px;
  border: 4px solid transparent; border-bottom-width: 0; border-top-color: transparent;
}
.stocks th[aria-sort="descending"] button::after { border-top-color: currentColor; }
.stocks th[aria-sort="ascending"] button::after { border-width: 0 4px 4px; border-bottom-color: currentColor; }
.stocks td { padding: 12px 8px; border-top: 1px solid var(--rule); text-align: right; font-weight: 600; white-space: nowrap; }
.stocks tbody tr:first-child td { border-top: 0; }
.stocks td:first-child { padding-left: 22px; text-align: left; font-weight: 500; }
.stocks td:last-child { padding-right: 22px; }
.stocks .price { font-weight: 700; }
.stocks .worth { color: var(--faint); font-weight: 500; }

.up { color: var(--up); }
.down { color: var(--down); }
.level { color: var(--faint); }

/* A narrow screen: one thing under another, and the page itself is scrolled */

@media (max-width: 900px) {
  html, body { height: auto; }
  /* The bar lies along the top: the sign, then the pages in a row, and the
     search beneath them. */
  /* One thing under another, and the beige goes to the foot of the screen
     however little is on it. */
  body { display: flex; flex-direction: column; min-height: 100dvh; }
  main, main.one { flex: 1; }
  aside { flex: none; flex-direction: row; align-items: center; }
  header { flex: none; }
  .logo { min-height: 56px; padding: 6px 14px; }
  .logo svg { height: 34px; }
  nav { flex-direction: row; padding: 0; }
  header { padding: 0 14px 12px; }
  .search { max-width: none; }
  main { display: block; padding: 14px 14px 0; border-radius: 14px 14px 0 0; }
  section.news, .side .card { margin-bottom: 14px; }
  .feed { max-height: 70vh; }
  .side { display: block; }
  .side .card { max-height: 60vh; }
  .item .title { font-size: 18px; }
}

/* The line across the bar, between the pages and the sections of a stock */

nav hr { width: 100%; height: 0; margin: 14px 0; border: 0; border-top: 1px solid var(--frame-faint); opacity: 0.5; }

/* A link among the figures reads as a figure does, until it is pointed at */

.stocks a { color: inherit; text-decoration: none; }
.stocks a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The page of one stock */

main.one { display: block; overflow-y: auto; }
main.one .card { padding: 26px 28px; }

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.what .ticker { font-size: 32px; font-weight: 700; line-height: 1.15; }
.what .name { color: var(--faint); font-size: 16px; }
/* With its logo, which is at the side of its ticker and its name. */
.what:has(> .emblem) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; }
.what > .emblem { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); }
.what:has(> .emblem) > .as { grid-column: 1 / -1; }
/* What the company does, under what it is and beside what it is priced at:
   no wider than is read with ease, and its first four lines until the rest
   is asked for. */
.stock .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what worth" "does worth"; gap: 0 24px; }
.stock .top .what { grid-area: what; }
.stock .top .worth { grid-area: worth; }
.does { grid-area: does; align-self: start; max-width: 78ch; margin: 12px 0 0; }
.does p { margin: 0; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.does.whole p { display: block; }
.does .more {
  margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--mark); font: inherit; font-weight: 600;
}
.does .more:hover { text-decoration: underline; text-underline-offset: 3px; }

.worth { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.worth .price { font-size: 32px; font-weight: 700; line-height: 1.15; }
.worth .moved { display: flex; gap: 10px; font-size: 17px; font-weight: 600; }
.worth dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 10px 0 0; }
.worth dt { color: var(--faint); text-align: left; }
.worth dd { margin: 0; font-weight: 600; }
.worth .date { margin-top: 4px; color: var(--faint); }

.spans { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 8px 0 14px; }
.spans button { min-width: 44px; padding: 0 10px; }

/* The reader's own days: from one, to another */
.own { display: flex; gap: 8px; }
.own input {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--faint); font: inherit; font-size: 15px; font-weight: 500;
  color-scheme: light;
}
.own input:hover, .own input:focus { color: var(--ink); }
.own input:focus { border-color: var(--mark); }
.own.chosen input { border-color: var(--mark); color: var(--mark); }

.holder { position: relative; touch-action: pan-y; }
.chart { display: block; overflow: visible; }
.chart .line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart.up .line, .chart.up .dot { stroke: var(--up); }
.chart.down .line, .chart.down .dot { stroke: var(--down); }
.chart.level .line, .chart.level .dot { stroke: var(--faint); }
.chart .rule { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.45; }
.chart .dot { fill: var(--card); stroke-width: 2; }

/* The measures, under the line: as many across as there is room for */
.measures { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); }
.measures:empty { display: none; }
.measures .span { align-self: flex-end; color: var(--faint); font-size: 13px; }
.measures dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 24px; margin: 0; }
.measures dt { color: var(--faint); font-size: 13px; }
.measures dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.measures dd.down { color: var(--down); }

/* What is under the pointer: the price, and the day */
.said {
  position: absolute; top: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  margin-left: 10px; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 6px;
  color: var(--faint); font-size: 13px; white-space: nowrap;
}
.said:empty { display: none; }
.said.left { margin-left: 0; transform: translateX(calc(-100% - 10px)); }
.said .price { color: var(--ink); font-size: 17px; font-weight: 700; }

/* A statement. The page is fitted to the screen and the table is what is
   scrolled, both ways: the periods stay at its head and the names of the
   lines at its side, whichever way it is scrolled. */

main.one.fitted { display: flex; flex-direction: column; overflow: hidden; }
.statement { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.statement .top { flex: none; align-items: center; margin-bottom: 18px; }
.across { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--edge); }

/* Apart, and not collapsed: a line drawn between collapsed cells does not
   stay with a cell which is held in place. */
.lines { border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.lines th, .lines td { padding: 9px 14px; border-bottom: 1px solid var(--rule); text-align: right; background: var(--card); }
.lines td { font-weight: 500; }

.lines thead th {
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--edge);
  color: var(--faint); font-weight: 600;
}
.lines tbody th, .lines thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  padding-left: 2px; padding-right: 28px;
  border-right: 1px solid var(--edge);
  text-align: left; font-weight: 500;
}
/* The corner is held both ways, and is over both. */
.lines thead th:first-child { z-index: 3; font-weight: 500; }

.lines .strong th, .lines .strong td { font-weight: 700; }
.lines .worked th, .lines .worked td { font-style: italic; color: var(--faint); }
.lines .worked th { padding-left: 22px; }
.lines .worked td.down, .lines td.down { color: var(--down); }

/* The peers of a stock: the table of the stocks, with more to it. A row is
   pressed to go to the company it is of, and the stock itself is marked. */
.peers th:nth-child(2), .peers td:nth-child(2) { text-align: left; }
.peers td:nth-child(2) { color: var(--faint); font-weight: 400; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.peers th:first-child button { padding-left: 2px; }
.peers td:first-child { padding-left: 2px; font-weight: 600; }
.peers th:last-child button, .peers td:last-child { padding-right: 22px; }
.peers tbody tr { cursor: pointer; }
.peers tbody tr:hover td { background: var(--chosen); }
.peers tbody tr.self td { font-weight: 700; box-shadow: inset 0 1px var(--edge), inset 0 -1px var(--edge); }
.peers tbody tr.self td:nth-child(2) { color: var(--ink); }

/* The equities of a section: as peers are, with no head over the table,
   and each with its logo before its ticker. Where it is traded and what it
   is priced in are words, and are written from the left. */
.statement > .across:first-child { border-top: 0; }
/* The field they are searched by, over them: no wider than is typed in with ease. */
.statement .top .search.mini { max-width: 360px; }
.listed th:nth-child(3), .listed td:nth-child(3), .listed th:nth-child(4), .listed td:nth-child(4) { text-align: left; }
.listed td:nth-child(3), .listed td:nth-child(4) { color: var(--faint); font-weight: 500; }
.listed thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.listed td:first-child a { display: inline-flex; align-items: center; gap: 10px; }
/* The shortlist: each company with its star, which takes it out. */
.listed .starred { display: inline-flex; align-items: center; gap: 10px; }
.listed .star { margin: 0; padding: 0; }
.listed .star svg { width: 18px; height: 18px; }
/* Eleven columns: each is given no more room than it needs, that they may be seen together. */
/* The name has what room is left by the rest, and is cut short to fit it: so the table is never wider than its card. */
.listed th:nth-child(2) { width: 100%; min-width: 90px; }
.listed td:nth-child(2) { max-width: 0; }
.listed th button { padding-left: 4px; padding-right: 4px; font-size: 13px; }
.listed td { padding-left: 4px; padding-right: 4px; font-size: 14px; }
.listed th:last-child button, .listed td:last-child { padding-right: 4px; }
.listed .emblem { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); }
/* The letter which stands for a company whose logo is not held */
.emblem.letter {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--chosen); color: var(--faint); font-weight: 700; line-height: 1; user-select: none;
}
.listed .emblem.letter { font-size: 13px; }
.what > .emblem.letter { font-size: 24px; }

/* The star beside a stock's ticker: filled where the stock is shortlisted */
.star {
  margin-left: 10px; padding: 4px; border: 0; background: none; cursor: pointer; vertical-align: middle;
  color: var(--faint); line-height: 0;
}
.star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.star:hover { color: var(--ink); }
.star[aria-pressed="true"] { color: var(--mark); }
.star[aria-pressed="true"] svg { fill: currentColor; }
.statement .held .of { color: var(--faint); }

/* Who holds a stock: a table which is scrolled under its headings */
.holders { width: 100%; border-collapse: separate; border-spacing: 0; }
.holders th, .holders td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.holders th:first-child, .holders td:first-child { padding-left: 2px; text-align: left; white-space: normal; }
/* Clear of the bar the table is scrolled by. */
.holders th:last-child, .holders td:last-child { padding-right: 22px; }
.holders thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card); border-bottom-color: var(--edge);
  color: var(--faint); font-weight: 600;
}
/* The names stay at the side where the table is scrolled across. */
.holders th:first-child, .holders td:first-child { position: sticky; left: 0; background: var(--card); }
.holders thead th:first-child { z-index: 2; }
.holders td { font-weight: 500; }
.holders td:first-child { font-weight: 600; }
.statement .held { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.statement .held h2 { margin: 0; font-size: 18px; font-weight: 700; }
.statement .held dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 4px 0 0; }
.statement .held dt { color: var(--faint); text-align: left; }
.statement .held dd { margin: 0; font-weight: 600; }
.statement .as { display: flex; flex-direction: column; color: var(--faint); font-size: 13px; }

/* The page of news, and the news of a stock: one feed, fitted to the
   screen and scrolled by itself. A piece has its picture at its side. */
main.one.fitted .card.news { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
main.one.fitted .card.news .controls { padding: 22px 28px 14px; }
main.one.fitted .card.news .top { padding: 26px 28px 0; }
main.one.fitted .card.news .feed { padding: 0 28px 8px; }
.item.pictured {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title picture" "meta picture";
  column-gap: 20px; align-items: start;
}
.item.pictured .title { grid-area: title; }
.item.pictured .meta { grid-area: meta; }
.item.pictured img { grid-area: picture; align-self: center; border: 1px solid var(--rule); background: var(--card); }
.item.pictured img.picture { width: 132px; height: 84px; object-fit: cover; border-radius: 6px; }
.item.pictured img.emblem { width: 56px; height: 56px; margin: 0 38px; border-radius: 50%; }

/* What a stock has filed: what it is across the top, its annual and its
   quarterly reports down the left, and its other filings on the right. Each
   table is scrolled by itself, under its name and the names of its columns. */
main.filed { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto minmax(0, 1fr); }
main.filed > .what { grid-column: 1 / -1; }
/* Two tables of one kind, side by side and as wide as each other */
main.filed.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
main.filed .table .holders thead th { top: 0; }
main.filed .table .rows .holders td:first-child, main.filed .table .rows .holders th:first-child { padding-left: 2px; }
main.filed .table .holders th:last-child, main.filed .table .holders td:last-child { padding-right: 8px; }
main.filed .table .holders td:nth-child(2), main.filed .table .holders th:nth-child(2) { text-align: left; white-space: normal; color: var(--faint); font-weight: 400; }
main.filed .table .holders thead th:nth-child(2) { font-weight: 600; }
main.filed > .what .as { color: var(--faint); font-size: 13px; margin-top: 4px; }
main.filed .side { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
main.filed .table { display: flex; flex-direction: column; overflow: hidden; }
.table .named { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 24px 6px; }
.table h2 { flex: none; margin: 0; padding: 2px 0; font-size: 18px; font-weight: 700; line-height: 30px; }
.table .search.mini { flex: 1; min-width: 210px; max-width: 360px; margin-left: auto; }
.table .heads { flex: none; margin: 0 24px; }
.table .rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 8px; }

/* A row for each filing, which is a link to it */
.filing {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr); gap: 0 16px; align-items: baseline;
  padding: 12px 2px; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none; font-weight: 500;
}
.told .filing { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 5fr); }
.filing .form { font-weight: 700; }
.filing .about { color: var(--faint); font-weight: 400; }
a.filing:hover .form { text-decoration: underline; text-underline-offset: 3px; }
.filing.heads { border-bottom-color: var(--edge); color: var(--faint); font-weight: 600; }

/* Too narrow for two tables side by side: one under another, and the page is scrolled */
@media (max-width: 1360px) {
  main.filed { display: block; overflow-y: auto; }
  main.filed > .what { margin-bottom: 18px; }
  main.filed .side { display: block; }
  main.filed .table { max-height: 70vh; margin-bottom: 20px; }
}

@media (max-width: 900px) {
  main.one.fitted .card.news .controls { padding: 16px 16px 12px; }
  main.one.fitted .card.news .top { padding: 18px 16px 0; }
  main.one.fitted .card.news .feed { padding: 0 16px 8px; max-height: none; }
  .item.pictured { column-gap: 12px; }
  .item.pictured img.picture { width: 92px; height: 64px; }
  .item.pictured img.emblem { width: 44px; height: 44px; margin: 0 24px; }
  .what > .emblem { width: 40px; height: 40px; }
  .stock .top { grid-template-areas: "what worth" "does does"; }
  /* The ticker says which company it is, and stays at the side: there is not the room for its name. */
  .peers th:nth-child(2), .peers td:nth-child(2) { display: none; }
  .peers th:first-child, .peers td:first-child { position: sticky; left: 0; background: var(--card); }
  .peers thead th:first-child { z-index: 2; }
  .peers th button { padding: 12px 8px 10px; font-size: 13px; }
  .peers td { padding: 11px 8px; font-size: 14px; }
  .holders { font-size: 14px; }
  .holders th, .holders td { padding: 10px 9px; }
  .holders th:first-child, .holders td:first-child { max-width: 132px; border-right: 1px solid var(--edge); }
  main.filed { overflow-y: visible; }
  main.filed > .what { margin-bottom: 14px; }
  main.filed .table { max-height: 70vh; margin-bottom: 14px; }
  .table .named { padding: 14px 16px 4px; }
  .table .search.mini { max-width: none; }
  .table .heads { margin: 0 16px; }
  .table .rows { padding: 0 16px 8px; }
  .filing, .told .filing { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 2px 6px; font-size: 14px; }
  .filing span:nth-child(4) { grid-column: 1 / -1; }
  .filing .about:empty { display: none; }
  nav hr { width: 0; height: 22px; margin: 0 8px; border-top: 0; border-left: 1px solid var(--frame-faint); }
  aside { overflow-x: auto; }
  nav a { white-space: nowrap; }
  main.one .card { padding: 18px 16px; }
  main.one.fitted { display: block; overflow: visible; }
  .across { max-height: 72vh; }
  .what .ticker, .worth .price { font-size: 26px; }
}

/* What is the reader's own: what they hold, and what they have written */

.card.mine { padding: 26px 28px; }
main.one .card.mine + .card.mine { margin-top: 20px; }
.mine > .top { align-items: flex-start; }
.parts-and-worth { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.parts-and-worth .worth { align-items: flex-start; text-align: left; }
.parts { display: flex; align-items: center; gap: 28px; }

/* The pie. The colours are in an order in which each is told from the next
   by one who sees colours and by one who does not: and a slice is parted
   from the next by a line of the card's own colour, and named beside. */
.pied { position: relative; flex: none; line-height: 0; }
.pie { width: 200px; height: 200px; overflow: visible; }
.pie path { stroke: var(--card); stroke-width: 2; stroke-linejoin: round; outline: 0; cursor: default; }
.pie path.lit, .pie path:focus-visible { filter: brightness(1.14) saturate(1.1); }
.s0 { fill: #2a78d6; background: #2a78d6; }
.s1 { fill: #eb6834; background: #eb6834; }
.s2 { fill: #1baf7a; background: #1baf7a; }
.s3 { fill: #eda100; background: #eda100; }
.s4 { fill: #e87ba4; background: #e87ba4; }
.s5 { fill: #008300; background: #008300; }
.rest { fill: #7a756a; background: #7a756a; }
.legend { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 12px minmax(56px, auto) auto; align-items: center; gap: 10px; padding: 1px 6px; border-radius: 4px; }
.legend li.lit { background: var(--chosen); }
.legend .key { width: 12px; height: 12px; border-radius: 3px; }
.legend .ticker { font-weight: 600; }
.legend .share { color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.tip {
  position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; transform: translate(14px, 14px);
  padding: 8px 12px; border-radius: 6px; background: var(--frame); color: var(--frame-ink);
  font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none;
}
.tip[hidden] { display: none; }
.tip strong { font-size: 15px; }
.tip .of { color: var(--frame-faint); }

/* What the portfolio was worth, day by day: beside the pie and what the whole is worth, as wide as
   there is room. What it was worth is a line, and what it cost a broken one which steps. */
.past { flex: 1 1 420px; min-width: 0; }
@media (max-width: 900px) { .past { flex-basis: 100%; } }
.past:empty { display: none; }
.history { display: grid; gap: 8px; }
.legend.lines { display: flex; justify-content: flex-end; gap: 18px; }
.legend.lines li { display: flex; grid-template-columns: none; gap: 8px; padding: 0; }
.legend.lines .key { width: 18px; height: 0; border-radius: 0; border-top: 2px solid #4a3aa7; }
.legend.lines .key.cost { border-top: 2px dashed #7a756a; }
.plot { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.scale { position: relative; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.scale span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.past .holder { outline: 0; cursor: crosshair; }
.past .holder:focus-visible { outline: 1px solid var(--mark); outline-offset: 4px; border-radius: 4px; }
.course .across path { fill: none; stroke: var(--rule); stroke-width: 1; }
.course .value, .course .cost { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.course .value { stroke: #4a3aa7; }
.course path.cost { stroke: #7a756a; stroke-dasharray: 5 4; stroke-linecap: butt; }
.course .dot { fill: var(--card); stroke-width: 2; }
.course .dot.value { stroke: #4a3aa7; }
.course .dot.cost { stroke: #7a756a; }
.past .said { top: 0; }
.past .said .moved { font-weight: 600; }
.past .said .moved.up { color: var(--up); }
.past .said .moved.down { color: var(--down); }
.past .days { display: flex; justify-content: space-between; margin-left: 58px; color: var(--faint); font-size: 12px; }
.add input[type="date"], .holdings td input[type="date"], .holding input[type="date"] { color-scheme: light; font-variant-numeric: tabular-nums; }
.holdings td input[type="date"] { width: 132px; text-align: left; font-weight: 500; }
.holding input[type="date"] { width: 150px; }

/* Where a stock is added, and a document begun */
.add { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.add .search { flex: 1 1 260px; max-width: 420px; }
.add input, .add button, .acts button, .holdings td input {
  height: 34px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 15px;
}
.add input { padding: 0 12px; min-width: 0; }
.add > input { width: 150px; }
.add .search input { width: 100%; padding-left: 12px; }
.add input::placeholder { color: var(--faint); opacity: 1; }
.add input:focus, .holdings td input:focus { border-color: var(--mark); }
.add button, .acts button { padding: 0 16px; cursor: pointer; font-weight: 600; color: var(--faint); }
.add button:hover, .acts button:hover:not(:disabled) { color: var(--ink); }
.add .found { top: 40px; }
[aria-invalid="true"], [aria-invalid=""] { border-color: var(--down) !important; }

/* A heading which puts nothing in order is written as one which does */
.listed th span { display: inline-block; padding: 13px 4px 11px; color: var(--faint); font-size: 13px; font-weight: 600; }
.listed th:first-child span { padding-left: 2px; }
.mine .across { border-top: 1px solid var(--edge); }

/* What is held: how many, and what was paid, are written where they may be changed */
.holdings td input { width: 96px; height: 30px; padding: 0 8px; border-color: var(--rule); text-align: right; font-weight: 600; font-size: 14px; }
.holdings td input:hover { border-color: var(--edge); }
.holdings .out { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--faint); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.holdings .out:hover { background: var(--chosen); color: var(--down); }
.holdings td.up, .mine .moved.up, .of .moved.up { color: var(--up); }
.holdings td.down, .mine .moved.down, .of .moved.down, .measured dd.down { color: var(--down); }
.written td:nth-child(3) { text-align: left; font-weight: 600; white-space: normal; }
.written td:nth-child(3), .written th:nth-child(3) { text-align: left; width: 50%; }
.written th:nth-child(2) { width: auto; }
.written td:nth-child(2) { max-width: 260px; }

/* The portfolio on the dashboard: over the indexes and the largest companies */
.side.three { grid-template-rows: auto minmax(0, 2fr) minmax(0, 3fr); }
.card.mine.small { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 22px; overflow: visible; }
.card.mine.small .pie { width: 128px; height: 128px; }
.card.mine.small .legend { gap: 3px; font-size: 14px; }
.card.mine.small .worth { align-items: flex-end; text-align: right; color: inherit; text-decoration: none; }
.card.mine.small .worth .price { font-size: 26px; }
.card.mine.small .worth dl { margin-top: 6px; }

/* A document, open: what is written on the left, and the stock it is of on the right */
main.written { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); }
main.written .card { min-height: 0; }
.document { display: flex; flex-direction: column; }
.document .top { align-items: center; gap: 16px; margin-bottom: 16px; }
.document .title {
  flex: 1; min-width: 0; height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid transparent; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 24px; font-weight: 700;
}
.document .title:hover { border-bottom-color: var(--rule); }
.document .title:focus { border-bottom-color: var(--mark); }
.acts { display: flex; align-items: center; gap: 8px; }
.acts .kinds { margin-right: 8px; }
.acts .save:not(:disabled) { border-color: var(--mark); color: var(--mark); }
.acts button:disabled { opacity: 0.45; cursor: default; }
.acts .remove:hover { color: var(--down); border-color: var(--down); }
.document textarea, .document .reading { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--edge); }
.document textarea {
  width: 100%; padding: 18px 2px; border-width: 1px 0 0; border-radius: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink);
  font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4;
}
.document [hidden] { display: none; }

/* What is written, as it is read */
.reading { padding: 18px 2px; line-height: 1.6; max-width: none; }
.reading > * { max-width: 86ch; }
.reading > :first-child { margin-top: 0; }
.reading h1, .reading h2, .reading h3, .reading h4, .reading h5, .reading h6 { margin: 1.5em 0 0.5em; line-height: 1.25; font-weight: 700; }
.reading h1 { font-size: 28px; }
.reading h2 { font-size: 22px; }
.reading h3 { font-size: 18px; }
.reading h4, .reading h5, .reading h6 { font-size: 16px; }
.reading p, .reading ul, .reading ol, .reading blockquote, .reading pre, .reading table { margin: 0 0 1em; }
.reading ul, .reading ol { padding-left: 1.6em; }
.reading li { margin: 0.2em 0; }
.reading a { color: var(--mark); text-underline-offset: 3px; }
.reading blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--rule); color: var(--faint); }
.reading blockquote > :last-child { margin-bottom: 0; }
.reading code { padding: 1px 5px; border-radius: 4px; background: var(--chosen); font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.reading pre { padding: 14px 16px; border-radius: 6px; background: var(--chosen); overflow-x: auto; line-height: 1.5; }
.reading pre code { padding: 0; background: none; }
.reading hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--rule); }
.reading table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.reading th, .reading td { padding: 7px 14px; border: 1px solid var(--rule); text-align: left; }
.reading th { font-weight: 700; background: var(--chosen); }

/* The stock a document is of */
.card.mine.of { display: flex; flex-direction: column; gap: 18px; padding: 22px 22px; overflow-y: auto; }
.of .what { color: inherit; text-decoration: none; }
.of .what .ticker { font-size: 26px; }
.of .worth { align-items: flex-start; text-align: left; }
.of .worth .price { font-size: 26px; }
.measured { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.measured dt { color: var(--faint); }
.measured dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 900px) {
  .card.mine { padding: 18px 16px; }
  /* What a portfolio or a document is called has a line to itself, over what may be done with it. */
  .document .top { flex-wrap: wrap; gap: 10px 16px; }
  .document .title { flex: 1 1 100%; }
  .parts { flex-wrap: wrap; }
  .pie { width: 160px; height: 160px; }
  main.written { display: block; overflow-y: auto; }
  main.written .card { margin-bottom: 14px; }
  .document textarea, .document .reading { min-height: 50vh; }
  .document .top { flex-wrap: wrap; }
  .card.mine.small { flex-wrap: wrap; }
}

/* stoqai: its name, in the letters of stoq, with a spark for the dot of its
   last letter: and the spark by itself */
:root { --spark: #c98500; }
.stoqai { display: block; height: 23px; overflow: visible; }
.stoqai .letters { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.stoqai .spark, svg.spark path { fill: var(--spark); stroke: var(--spark); stroke-width: 2.5; stroke-linejoin: round; }
/* Where the name is small, the spark is drawn a little stouter, that it may be seen. */
.stoqai .spark { stroke-width: 6; }
svg.spark { flex: none; width: 1em; height: 1em; overflow: visible; }
.conversation h1 .stoqai { height: 40px; }
.conversation h1 .stoqai .letters { stroke-width: 9; }
.conversation h1 .stoqai .spark { stroke-width: 2; }

/* What may be done with a stock, beside its ticker */
.options { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 4px; vertical-align: middle; }
.options .star { margin-left: 6px; }
.option {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 30px;
  border: 1px solid var(--edge); border-radius: 6px; background: none; cursor: pointer;
  color: var(--faint); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; letter-spacing: 0; line-height: 1;
}
.option:hover { color: var(--ink); }
.option[aria-pressed="true"], .option[aria-expanded="true"] { border-color: var(--mark); color: var(--mark); }
/* The name of stoqai, where it is written among words: as tall as the words are. */
.option .stoqai, .helped .stoqai { height: 19px; margin-bottom: -3px; }
.helped { display: inline-flex; align-items: center; gap: 7px; }
/* Where what is laid out on a stock, and from when, is typed: under what opens it. */
.holding {
  position: absolute; z-index: 6; top: 38px; left: 40px; display: flex; gap: 8px; padding: 12px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.holding[hidden], .holding [hidden] { display: none; }
.holding input, .holding button, .holding select {
  height: 34px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0;
}
.holding input { width: 120px; padding: 0 10px; }
.holding select { padding: 0 8px; cursor: pointer; }
.holding input:focus, .holding select:focus { border-color: var(--mark); }
.holding input::placeholder { color: var(--faint); opacity: 1; }
.holding button { padding: 0 14px; cursor: pointer; font-weight: 600; color: var(--mark); border-color: var(--mark); }
.holding .remove { color: var(--faint); border-color: var(--edge); }
.holding .remove:hover { color: var(--down); border-color: var(--down); }

/* The chats on the left, and the one which is open on the right */
main.written.asking { grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr); }
.asked-of { display: flex; flex-direction: column; gap: 14px; padding: 22px 18px; }
.asked-of .new {
  display: block; padding: 8px 12px; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink); font-weight: 600; text-align: center; text-decoration: none;
}
.asked-of .new:hover { background: var(--chosen); }
.chats { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chats .chat { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 6px; color: inherit; text-decoration: none; }
.chats .chat:hover, .chats .chat[aria-current] { background: var(--chosen); }
.chats .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats .meta { display: flex; gap: 7px; color: var(--faint); font-size: 13px; white-space: nowrap; overflow: hidden; }
.chats .meta .ticker { color: var(--ink); font-weight: 600; }
.chats .meta .bar { color: var(--rule); }
.use { display: block; margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 13px; text-decoration: none; }
.use:hover { color: var(--ink); }
.tokens .held { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.tokens .packs { flex-wrap: wrap; }

.conversation { display: flex; flex-direction: column; min-height: 0; }
.conversation .top { align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--edge); }
.conversation h1 { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.conversation h1 .emblem { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); font-size: 14px; }
.conversation h1 a { display: inline-flex; color: inherit; text-decoration: none; }
.conversation [hidden] { display: none; }
.acts .save[aria-pressed="true"] { border-color: var(--mark); color: var(--mark); }
.talk { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 22px 2px; }
.talk .asked {
  align-self: flex-end; max-width: 78%; padding: 10px 14px; border-radius: 12px 12px 2px 12px;
  background: var(--frame); color: var(--frame-ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
}
.talk .answered { align-self: flex-start; max-width: 100%; padding: 0; overflow-wrap: anywhere; }
.talk .answered.reading { padding: 0; }
.talk .answered.reading > :last-child { margin-bottom: 0; }
.talk .failed, .looked .failed { color: var(--down); }
.looked { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--faint); font-size: 14px; }
.waiting { display: flex; gap: 12px; align-items: flex-start; }
.waiting .spark { flex: none; font-size: 20px; animation: glinted 1.3s ease-in-out infinite; }
@keyframes glinted { 0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.55; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .waiting .spark { animation: none; } }

/* The wizard, where a chat is begun: faint, and hopping. It is squat where it lands and tall as it leaves
   the ground, and what it throws on the ground is smaller the higher it is. */
.talk .wizard { flex: none; width: 210px; height: 270px; max-height: 70%; margin: auto; overflow: visible; opacity: 0.22; }
.wizard .cloth { fill: var(--ink); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
.wizard .arm, .wizard .eyes { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.wizard .eyes { stroke-width: 10; }
.wizard .beard { fill: var(--card); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
.wizard .shade { fill: var(--ink); }
.wizard .spark { fill: var(--spark); stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; }
.wizard .hop, .wizard .shade, .wizard .spark { transform-box: fill-box; }
.wizard .hop { transform-origin: 50% 100%; animation: hopped 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.wizard .shade { transform-origin: 50% 50%; animation: shaded 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.wizard .spark { transform-origin: 50% 50%; animation: glinted 1.6s ease-in-out infinite; }
@keyframes hopped {
  0%, 100% { transform: translateY(0) scale(1.07, 0.92); }
  16%, 84% { transform: translateY(-4px) scale(0.96, 1.05); }
  50% { transform: translateY(-42px) scale(1, 1); }
}
@keyframes shaded { 0%, 100% { transform: scaleX(1); opacity: 0.3; } 50% { transform: scaleX(0.58); opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .wizard .hop, .wizard .shade, .wizard .spark { animation: none; } }

/* Where stoqai is asked */
.ask { display: flex; gap: 8px; align-items: flex-end; }
.conversation > .ask { padding-top: 16px; border-top: 1px solid var(--edge); }
.ask textarea {
  flex: 1; min-height: 44px; max-height: 180px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  resize: vertical; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45; field-sizing: content;
}
.ask textarea:focus { border-color: var(--mark); }
.ask .field { position: relative; flex: 1; display: flex; }
.ask .hint {
  position: absolute; left: 13px; top: 11px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--faint); font-size: 15px; line-height: 1.45; pointer-events: none;
}
.ask .hint .stoqai { height: 20px; margin-bottom: -3px; }
.ask textarea:not(:placeholder-shown) ~ .hint { display: none; }
.ask textarea::placeholder { color: var(--faint); opacity: 1; }
.ask button {
  height: 44px; padding: 0 20px; border: 1px solid var(--mark); border-radius: 6px; background: transparent;
  color: var(--mark); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ask button:disabled { opacity: 0.45; cursor: default; }

/* stoqai writing for a document */
.helped[aria-expanded="true"] { border-color: var(--mark); color: var(--mark); }
.helping { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px; border: 1px solid var(--rule); border-radius: 6px; }
.helping[hidden] { display: none; }
.document .helping .ask textarea { flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 6px; font: inherit; font-size: 15px; }
.document .helping .offered { flex: none; max-height: 320px; padding: 14px 0 0; border-top: 1px solid var(--rule); overflow: auto; }
.helping .acts button[hidden], .helping .offered[hidden] { display: none; }

@media (max-width: 900px) {
  main.written.asking { display: block; }
  .asked-of { max-height: 40vh; }
  .talk { min-height: 40vh; }
  .talk .asked { max-width: 92%; }
  .options { margin: 8px 0 0; }
  .holding { left: 0; flex-wrap: wrap; }
}

/* The portfolios there are, over the one which is shown: and where another is made */
.portfolios { flex-wrap: wrap; margin: 0 0 16px; }
.portfolios a, .portfolios button {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 6px;
  background: transparent; color: var(--faint); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.portfolios a:hover, .portfolios button:hover:not(:disabled) { color: var(--ink); }
.portfolios a[aria-current] { border-color: var(--mark); color: var(--mark); }
.portfolios button:disabled { opacity: 0.45; cursor: default; }
main.one .card.mine.document { display: block; }
main.one .card.mine.document .top { margin-bottom: 20px; }
.holding select {
  height: 34px; padding: 0 28px 0 10px; max-width: 180px; border: 1px solid var(--edge); border-radius: 6px; outline: 0; cursor: pointer;
  appearance: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) no-repeat right 14px center / 5px 5px,
    linear-gradient(135deg, currentColor 50%, transparent 50%) no-repeat right 9px center / 5px 5px;
}
.holding select[hidden] { display: none; }

/* Who is signed in, at the head of the page beside the search: their picture, or their letter, and
   their name. */
header { gap: 14px; }
header .reader {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
  color: var(--frame-faint); font-weight: 600; text-decoration: none; white-space: nowrap;
}
header .reader:hover { color: var(--frame-ink); }
.face { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); object-fit: cover; font-size: 15px; }

/* Outside the app: what is shown to one who is not signed in, and the door. There is no bar down the
   side and nothing to search: the head is across the top, the sign at one end of it and the way in
   at the other, and the beige is under it from side to side. */
body.out { display: flex; flex-direction: column; height: auto; min-height: 100%; }
body.out header { flex: none; justify-content: space-between; height: 64px; padding: 0 28px 0 0; }
/* Within the app the beige is set into the black, and is rounded where the bar and the head meet. Here
   it goes from one side of the screen to the other: a corner rounded at the edge of the screen would
   show the black behind it, and so it is square. */
body.out main { flex: 1; border-radius: 0; }

/* What is pressed quietly: it is words, and not a box. */
.quiet {
  padding: 0; border: 0; background: none; cursor: pointer; justify-self: start;
  color: var(--mark); font: inherit; font-weight: 600; text-decoration: none;
}
.quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.quiet:disabled { opacity: 0.45; cursor: default; }
body.out header .quiet { padding: 9px 12px; color: var(--frame-faint); }
body.out header .quiet:hover { color: var(--frame-ink); text-decoration: none; }

/* What goes on: black, with the beige written on it. It is the one thing on a card which is filled. */
.go {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
  border: 1px solid var(--frame); border-radius: 6px; background: var(--frame); cursor: pointer;
  color: var(--frame-ink); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
}
.go:hover:not(:disabled) { border-color: var(--mark); background: var(--mark); }
.go:disabled { opacity: 0.45; cursor: default; }
.acts .go { height: 34px; padding: 0 16px; border-color: var(--frame); background: var(--frame); color: var(--frame-ink); font-size: 15px; }
.acts .go:hover:not(:disabled) { border-color: var(--mark); background: var(--mark); color: var(--frame-ink); }

/* What is shown to one who is not signed in. It is one thing under another: what stoq is for and how
   to join, with the wizard beside it: what goes across: and an analysis, to show what one is. */
main.landing { display: block; padding: 0 0 40px; overflow-x: clip; }
.hero {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; gap: 40px;
  max-width: 1320px; margin: 0 auto; padding: 56px clamp(28px, 6vw, 96px) 44px;
}
.pitch h1 { margin: 0 0 18px; font-size: clamp(36px, 5vw, 66px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
/* The name of stoqai, in the heading: as tall as its letters, and on their line. */
.pitch h1 .stoqai { display: inline-block; height: 1.04em; margin: 0 0 -0.28em 0.04em; vertical-align: baseline; }
.pitch h1 .stoqai .letters { stroke-width: 10; }
.pitch h1 .stoqai .spark { stroke-width: 3; }
.ways { display: grid; gap: 10px; }
.pitch .ways { max-width: 360px; margin: 28px 0 12px; }
.way {
  display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px;
  border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.way:hover { background: var(--chosen); }
.way.go { color: var(--frame-ink); }
.way.go:hover { background: var(--mark); }
/* What is said under something, quietly. */
.lesser { margin: 0; color: var(--faint); font-size: 13px; }
.other { margin: 0; color: var(--faint); }
.pitch .other { margin-top: 14px; }
.lesser a, .other a, .agree a { color: var(--mark); text-underline-offset: 3px; }
.figure { display: flex; justify-content: center; min-width: 0; }
.figure .wizard { width: min(100%, 340px); height: auto; aspect-ratio: 210 / 270; overflow: visible; }

/* What goes across: the companies one way, and the indexes under them the other, from one side of the
   page to the other, between two lines. Each row is there twice, and goes its own length and begins
   again: so it goes by without end. It stops under the pointer, that a figure may be read. */
.tapes { display: grid; gap: 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.tapes:empty { display: none; }
.tape { display: flex; overflow: hidden; }
.tape + .tape { border-top: 1px solid var(--rule); }
.tape .run { flex: none; display: flex; min-width: 100%; margin: 0; padding: 0; list-style: none; animation: across 80s linear infinite; }
.tape.back .run { animation-direction: reverse; }
.tape:hover .run { animation-play-state: paused; }
@keyframes across { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tape .run { animation: none; } }
/* For one who has asked for no movement it is the reader who moves it, and it is there once. */
@media (prefers-reduced-motion: reduce) {
  .tape { overflow-x: auto; }
  .tape .run[aria-hidden] { display: none; }
}
.moving { flex: none; display: flex; align-items: center; gap: 14px; padding: 13px 26px; border-right: 1px solid var(--rule); white-space: nowrap; }
.moving .about { display: flex; flex-direction: column; min-width: 64px; max-width: 190px; }
.moving .called, .moving .of { overflow: hidden; text-overflow: ellipsis; }
.moving .called { font-weight: 700; }
.moving .of { color: var(--faint); font-size: 13px; }
.moving .figures { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; }
.moving .figures .price { font-weight: 700; }
.moving .figures span + span { font-size: 13px; }

/* What the app is for, a thing at a time: what it is said in a few words on the left, large, and on
   the right what shows it, drawn as the app draws it. */
.showing {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 48px;
  max-width: 1320px; margin: 0 auto; padding: 64px clamp(28px, 6vw, 96px) 0;
}
.showing[hidden], .showing [hidden] { display: none; }
.showing h2 { margin: 0; font-size: clamp(30px, 3.6vw, 50px); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
/* The game: what it is, and the way to play it, beside it as it is played, its pixels kept square as they grow. */
.bubble .told { max-width: 30em; margin: 18px 0 28px; color: var(--faint); font-size: 17px; line-height: 1.5; }
.bubble .way { display: inline-flex; }
.demo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--edge); border-radius: 10px; image-rendering: pixelated; }
.card.shot { min-width: 0; }
.shot > .lesser { padding: 0 28px 20px; }
/* The shortlist: each company with its star, which is filled. */
.shot .across { border-top: 0; padding: 6px 0; }
.picked th { position: static; text-align: right; }
.picked th span { display: inline-block; padding: 13px 8px 11px; color: var(--faint); font-size: 13px; font-weight: 600; }
.picked th:first-child, .picked th:nth-child(2), .picked td:nth-child(2) { text-align: left; }
.picked th:first-child span { padding-left: 22px; }
.picked th:last-child span, .picked td:last-child { padding-right: 22px; }
.picked td { font-size: 14px; }
.picked td:first-child { padding-left: 14px; font-weight: 700; }
/* The name has what room is left by the rest, and is cut short to fit it: so the table is no wider than its card. */
.picked th:nth-child(2) { width: 100%; }
.picked td:nth-child(2) { max-width: 0; overflow: hidden; color: var(--faint); font-weight: 400; text-overflow: ellipsis; }
.picked .starred { display: inline-flex; align-items: center; gap: 10px; }
.picked .star { margin: 0; padding: 0; cursor: default; opacity: 1; }
.picked .star svg { width: 18px; height: 18px; }
.picked .emblem { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); font-size: 13px; }
/* The stories: as they are in the news. */
.shot.news .feed { padding: 6px 28px; overflow: visible; }
/* The portfolio: what it holds and is worth, over the line of what it was worth. */
.shot.grown .parts-and-worth { gap: 20px 36px; padding: 26px 28px 8px; }
.shot.grown .pie { width: 168px; height: 168px; }
.shot.grown .parts { gap: 22px; }
.shot.grown > .graph { display: block; width: calc(100% - 56px); height: 120px; margin: 8px 28px 16px; stroke-width: 2; }
.shot.grown > .graph path { vector-effect: non-scaling-stroke; }
.card.example { display: grid; grid-template-columns: minmax(0, 1fr) 232px; }
.example .written-of { min-width: 0; padding: 26px 28px 22px; }
.example .tag { margin: 0 0 4px; color: var(--mark); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.example h3 { margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.2; }
/* What was asked of stoqai, and what it looked up to answer: as they are where a document is written. */
.helped-by { display: grid; gap: 8px; margin: 0 0 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 6px; }
.helped-by p { margin: 0; }
.helped-by .asked { font-weight: 600; }
.helped-by .looked { display: flex; align-items: center; gap: 8px; }
.example .reading { padding: 18px 0 14px; }
.example .reading h2 { margin: 0 0 10px; font-size: 18px; }
.example .reading table { display: table; width: 100%; }
.example .reading td:last-child, .example .reading th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.example .reading td:last-child { font-weight: 600; }
.example .reading p { margin-bottom: 0; }
.example .of { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border-left: 1px solid var(--edge); }
.example .of .ticker { font-size: 24px; }
.example .of .worth { align-items: flex-start; text-align: left; }
.example .of .worth .price { font-size: 24px; }
.example .of .worth .moved { font-size: 15px; }
.example .of .graph { width: 100%; height: auto; stroke-width: 1.6; }
.example .measured { padding-top: 14px; font-size: 14px; }
main.landing > .foot { max-width: 1320px; margin: 0 auto; padding: 12px clamp(28px, 6vw, 96px) 0; }

/* The door: one card, in the middle, no wider than is typed in with ease. */
main.doorway { display: flex; justify-content: center; align-items: flex-start; padding: 56px 20px; }
.card.door { display: grid; gap: 16px; width: 100%; max-width: 440px; padding: 30px 32px; }
.door [hidden], .settings [hidden] { display: none; }
.headed h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.headed p { margin: 6px 0 0; color: var(--faint); }
.headed .offer { font-size: 16px; }
.or { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; color: var(--faint); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* A form of the account: each field under what it is called */
.account { display: grid; gap: 14px; margin: 0; }
.labelled { display: grid; gap: 5px; }
.labelled > span { color: var(--faint); font-size: 13px; font-weight: 600; }
.labelled small { color: var(--faint); font-size: 13px; }
.account input:not([type="checkbox"]), .account select {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 16px;
}
.account input:focus, .account select:focus { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); }
.account select {
  padding-right: 30px; cursor: pointer; appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) no-repeat right 16px center / 5px 5px,
    linear-gradient(135deg, currentColor 50%, transparent 50%) no-repeat right 11px center / 5px 5px;
}
/* The figures of a code are set apart, that they may be told one from the next. */
.account input.figures { font-size: 20px; font-weight: 600; letter-spacing: 0.16em; }
.agree { display: flex; align-items: flex-start; gap: 10px; color: var(--faint); font-size: 14px; }
.agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mark); }
.agree input[aria-invalid] { outline: 2px solid var(--down); outline-offset: 1px; }
.refused, .noted { margin: 0; font-size: 14px; font-weight: 500; }
.refused { color: var(--down); }
.noted { color: var(--up); }
.account button.remove {
  height: 42px; padding: 0 18px; border: 1px solid var(--edge); border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--faint); font: inherit; font-weight: 600; justify-self: start;
}
.account button.remove:hover:not(:disabled) { border-color: var(--down); color: var(--down); }
.account button:disabled { opacity: 0.45; cursor: default; }

/* The secret the authenticator is given: as a code of squares, and written out. The squares are on
   white, and not on the beige of the page: a telephone reads dark on white the surest. */
.secret { display: grid; justify-items: center; gap: 12px; min-height: 60px; }
.code { width: 200px; height: 200px; border: 1px solid var(--rule); border-radius: 6px; }
.code .ground { fill: #ffffff; }
.code .dark { fill: #111111; }
.secret .key { display: grid; gap: 3px; margin: 0; text-align: center; }
.secret .key span { color: var(--faint); font-size: 13px; font-weight: 600; }
.secret .key code, .codes { font: 600 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; }
.secret .key code { overflow-wrap: anywhere; }
.codes { columns: 2; margin: 0; padding: 12px 18px; border: 1px solid var(--rule); border-radius: 6px; list-style: none; line-height: 1.9; text-align: center; }

/* What is of the reader's own account */
main.settings > section { max-width: 760px; }
main.settings > section + section { margin-top: 20px; }
main.settings h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
main.settings .card p { margin: 0 0 10px; }
main.settings .account { max-width: 440px; margin-top: 20px; }
.pictured { display: flex; align-items: center; gap: 22px; }
.pictured .face { width: 96px; height: 96px; font-size: 40px; }
.pictured .acts { margin-bottom: 8px; }

@media (max-width: 900px) {
  /* The name gives way to the search: the picture stands for the reader. */
  header { flex-wrap: wrap; }
  header .reader .name { display: none; }
  body.out header { padding: 0 14px 0 0; }
  body.out main { padding-bottom: 28px; }
  /* The wizard is over what is said, and smaller: what is said, and how to join, are what the screen is for. */
  main.landing { padding: 0 0 28px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 22px 18px 30px; }
  .figure { order: -1; }
  .figure .wizard { width: 150px; margin-top: 44px; }
  .pitch .ways { max-width: none; }
  .moving { gap: 10px; padding: 11px 16px; }
  .moving .about { max-width: 120px; }
  /* What shows a thing is under what it is: and the company an analysis is of, under what is written of it. */
  .showing { display: block; padding: 40px 18px 0; }
  .showing h2 { margin-bottom: 18px; }
  .bubble .told { margin-top: 0; }
  .bubble .way { margin-bottom: 24px; }
  .card.example { display: block; }
  .shot > .lesser { padding: 0 18px 16px; }
  .shot.news .feed { padding: 4px 18px; max-height: none; }
  .shot.grown .parts-and-worth { padding: 20px 18px 8px; }
  .shot.grown > .graph { width: calc(100% - 36px); margin: 8px 18px 14px; }
  /* Of one which is shortlisted there is room for what it is, its price and how it moved. */
  .picked th:nth-child(n+5), .picked td:nth-child(n+5), .picked th:nth-child(2), .picked td:nth-child(2) { display: none; }
  .example .written-of { padding: 20px 18px 16px; }
  .example .of { padding: 20px 18px; border-left: 0; border-top: 1px solid var(--edge); }
  .example .of .graph { max-width: 320px; }
  main.landing > .foot { padding: 8px 18px 0; }
  main.doorway { padding: 18px 14px 28px; }
  .card.door { padding: 22px 18px; }
  .pictured { align-items: flex-start; }
  .pictured .face { width: 72px; height: 72px; font-size: 30px; }
}

/* The terms, and what is held of the reader: one card, in the middle, no wider than is read with ease. */
.card.legal { width: 100%; max-width: 760px; padding: 34px 40px 30px; line-height: 1.55; }
.legal h1 { margin: 0 0 14px; font-size: 30px; font-weight: 700; line-height: 1.2; }
.legal h2 { margin: 28px 0 8px; font-size: 18px; font-weight: 700; }
.legal p, .legal ul { margin: 0 0 10px; }
.legal ul { padding-left: 1.4em; }
.legal li { margin: 4px 0; }
/* That it is a draft is said where it is seen: in the amber of the spark, within a line of it. */
.legal .draft { padding: 10px 14px; border: 1px solid var(--spark); border-radius: 6px; background: rgb(201 133 0 / 0.14); font-weight: 600; }
/* What is not yet decided is marked, as with a pen: it is a gap to be filled, and is not to be read past. */
.gap { padding: 0 3px; border-radius: 3px; background: rgb(201 133 0 / 0.26); color: var(--ink); }
.foot { margin-top: 28px; }
.legal .foot { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
main.settings > .foot { margin: 20px 0 8px; }
.foot a { color: var(--mark); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .card.legal { padding: 22px 18px; }
  .legal h1 { font-size: 26px; }
}

/* Over the equities of a list: what kind of graph is over them and what it is of, and which figures
   are seen beside them. They are in the one row with the field the list is searched by, over all
   they are of. */
.statement .top:has(.choices) { position: relative; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.choices { flex-wrap: nowrap; margin-left: auto; padding: 0; }
.choices select { max-width: 280px; }
.choices select[hidden] { display: none; }
.choices .option { height: 34px; font-size: 15px; font-weight: 500; }

/* Where the figures are chosen: under what opens it, and over the list. */
.choosing {
  position: absolute; z-index: 6; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, 100%); max-height: min(70vh, 560px); padding: 14px 16px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.choosing[hidden], .choosing [hidden] { display: none; }
.choosing .top { display: flex; align-items: center; gap: 12px; margin: 0; }
.choosing input[type="search"] {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 15px;
}
.choosing input[type="search"]:focus { border-color: var(--mark); }
.choosing input[type="search"]::placeholder { color: var(--faint); opacity: 1; }
.fields { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 12px; padding-right: 4px; }
.fields fieldset { display: grid; gap: 1px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fields legend { padding: 0 0 4px; color: var(--faint); font-size: 13px; font-weight: 600; }
.fields label { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.fields label:hover { background: var(--chosen); }
.fields label:has(input:disabled) { color: var(--faint); cursor: default; }
.fields input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--mark); }

/* The list, with whichever figures are seen: words are written from the left and figures from the
   right, whichever column each is in. The name has what room the rest leave, where there is any. */
.listed.fielded th:nth-child(n), .listed.fielded td:nth-child(n) { width: auto; max-width: none; text-align: right; }
.listed.fielded td:nth-child(n) { color: inherit; font-weight: 600; }
.listed.fielded th.worded, .listed.fielded td.worded { text-align: left; }
.listed.fielded td.worded { max-width: 240px; overflow: hidden; color: var(--faint); font-weight: 500; text-overflow: ellipsis; }
.listed.fielded td:first-child { color: inherit; font-weight: 600; overflow: visible; }
.listed.fielded th.named { width: 100%; min-width: 120px; }
.listed.fielded td.named { max-width: 0; font-weight: 400; }
.listed.fielded td.up { color: var(--up); }
.listed.fielded td.down { color: var(--down); }
.listed.fielded th button { white-space: nowrap; }

/* The graph over the list: what it is, said quietly, and under that the graph. It is as wide as the
   card, and no taller than leaves the list room. */
.spread { flex: none; display: grid; gap: 8px; margin: 0 0 18px; }
.spread[hidden] { display: none; }
.graphed { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 150px auto; gap: 6px 10px; }
.graphed .scale { position: relative; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.graphed .scale span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.graphed .plot { position: relative; }
/* The lines across are quiet, and whole: the line of nought is the one which is dark. */
.graphed .rules span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule); }
.graphed .rules .base { border-top-color: var(--edge); }
.graphed .columns { position: absolute; inset: 0; display: grid; }
.graphed .column { position: relative; outline: 0; }
/* A column is no thicker than is read with ease, however few there are: it is round at its end, and
   square where it stands on the line of nought. */
.graphed .upright {
  position: absolute; left: 50%; width: min(28px, 100% - 2px); min-height: 1px; transform: translateX(-50%);
  border-radius: 4px 4px 0 0; background: var(--mark);
}
.graphed .upright.under { border-radius: 0 0 4px 4px; }
.graphed .column.lit .upright, .graphed .column:focus-visible .upright { filter: brightness(1.35); }
.graphed .column:focus-visible { box-shadow: inset 0 0 0 1px var(--mark); border-radius: 4px; }
.graphed .names { grid-column: 2; display: grid; color: var(--faint); font-size: 12px; text-align: center; }
.graphed .names span { padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What is pointed at is said over it: the figure, and under it what it is of. */
.graphed .tip { transform: translate(-50%, calc(-100% - 8px)); }
.graphed.pie-of { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 28px; justify-content: start; }
.graphed.pie-of .pie { width: 150px; height: 150px; }
.graphed.pie-of .legend { grid-template-columns: repeat(2, auto); gap: 5px 28px; justify-content: start; font-size: 14px; }
.graphed.pie-of .legend .ticker { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* How the companies have done: a line for each, all from the one place. They are thin and are seen
   through, so that where many lie together it is dark: a rise is green and a fall red. The one under
   the pointer is drawn dark over the rest, and is named. At the right is the room where those which
   did best and worst are named. */
.graphed.coursed { grid-template-rows: 300px auto; }
/* What is drawn is as wide and as high as the room it has: and what goes off its edge is not seen. */
.coursed .drawn { position: absolute; inset: 0 76px 0 0; overflow: hidden; }
.coursed .rules span { right: 76px; }
.courses { display: block; width: 100%; height: 100%; cursor: crosshair; }
.courses path { fill: none; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.42; vector-effect: non-scaling-stroke; }
.courses path.up { stroke: var(--up); }
.courses path.down { stroke: var(--down); }
.courses path.level { stroke: var(--faint); }
.courses path.lit { stroke: var(--ink); stroke-width: 2.4; opacity: 1; pointer-events: none; }
.coursed .plot.pointed .courses path:not(.lit) { opacity: 0.2; }
.coursed .plot.pointed .courses { cursor: pointer; }
.coursed .ends span {
  position: absolute; left: calc(100% - 70px); display: flex; flex-direction: column; gap: 1px; transform: translateY(50%);
  max-width: 70px; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-overflow: ellipsis;
}
.coursed .ends[hidden] { display: none; }
.coursed .ends small { color: var(--faint); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* It is moved about by taking hold of it: and what brings it nearer, puts it further and sets it as
   it was is in its corner, quietly, until the pointer is on the graph or the keys have come to it. */
.coursed .plot { outline: 0; }
.coursed .plot:focus-visible .drawn { box-shadow: inset 0 0 0 1px var(--mark); }
.courses { touch-action: none; user-select: none; }
.coursed .plot.held .courses { cursor: grabbing; }
.coursed .moves { position: absolute; top: 6px; left: 8px; display: flex; gap: 4px; opacity: 0.55; }
.coursed .plot:hover .moves, .coursed .plot:focus-within .moves, .coursed .plot.moved .moves { opacity: 1; }
.coursed .moves button {
  min-width: 28px; height: 26px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 6px; cursor: pointer;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
}
.coursed .moves button:hover:not(:disabled) { background: var(--chosen); }
.coursed .moves button:disabled { opacity: 0.4; cursor: default; }
.spread .how { font-size: 12px; }
.coursed .tip { transform: translate(14px, -50%); }
.coursed .tip.before { transform: translate(calc(-100% - 14px), -50%); }
.graphed .names.days { display: flex; justify-content: space-between; padding-right: 76px; }
.graphed .names.days span { overflow: visible; }
/* What was drawn stays, quietly, while what is asked for comes. */
.spread.waited { opacity: 0.55; }

@media (max-width: 900px) {
  .graphed.coursed { grid-template-rows: 240px auto; }
  .graphed .names.days span:nth-child(even) { display: none; }
  .spread .how { display: none; }
  .choices { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-left: 0; }
  .choices select { flex: 1 1 120px; min-width: 0; max-width: none; }
  /* There is not the room for the name, whichever column it is: the ticker says which company it is. */
  .listed.fielded th:nth-child(n), .listed.fielded td:nth-child(n) { display: table-cell; }
  .listed.fielded th.named, .listed.fielded td.named { display: none; }
  .choosing { left: 0; right: 0; width: auto; }
  .graphed { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 130px auto; }
  /* There is room for ten columns: the first ten are those with the most. */
  .graphed .column:nth-child(n+11), .graphed .names span:nth-child(n+11) { display: none; }
  .graphed .columns, .graphed .names { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; }
  .graphed.pie-of { grid-template-columns: minmax(0, 1fr); }
  .graphed.pie-of .legend { grid-template-columns: auto; }
}

/* The screens. Down the side they are under the pages, and there may be many: so the bar is
   scrolled where they do not fit. Where one is made is written more quietly than they are. */
aside nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
nav a.make { color: var(--frame-faint); font-size: 14px; opacity: 0.85; }

/* What is said of a screen, over what it finds: what it is of, its formula, and how many it finds. */
.finds { flex: none; margin: -6px 0 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finds code, .screening code, .where { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.93em; }
.finds code { color: var(--ink); }

/* Where a screen is made: the screen itself, and beside it what its formula may name. Under them
   are the reader's screens, in their order. */
main.screened {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); grid-auto-rows: max-content; align-content: start;
  gap: 20px; overflow-y: auto;
}
.card.screening { min-height: max-content; padding: 26px 28px; }
.screening h1 { margin: 0 0 18px; font-size: 24px; font-weight: 700; line-height: 1.2; }
.screening h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.screening p { margin: 0; }
.screening .acts { margin-top: 4px; gap: 16px; }
.screening [hidden] { display: none; }
.drawing { display: grid; gap: 18px; margin: 0; }
.drawing input[type="text"], .drawing textarea, .screening input[type="search"] {
  width: 100%; padding: 0 12px; border: 1px solid var(--edge); border-radius: 6px; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 16px;
}
.drawing input[type="text"], .screening input[type="search"] { height: 42px; }
.drawing input:focus, .drawing textarea:focus, .screening input[type="search"]:focus { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); }
.drawing ::placeholder, .screening input[type="search"]::placeholder { color: var(--faint); opacity: 0.8; }
.drawing textarea.formula {
  min-height: 96px; padding: 12px; resize: vertical; field-sizing: content;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* The formula again, with what is wrong in it marked: as it is written, line for line. */
.where { margin: 0; padding: 8px 12px; border-left: 2px solid var(--down); color: var(--faint); white-space: pre-wrap; overflow-wrap: anywhere; }
.where mark { padding: 0 1px; border-bottom: 2px solid var(--down); background: none; color: var(--down); font-weight: 700; }
.tried { min-height: 1.4em; color: var(--faint); font-size: 14px; }
.tried.wrong { color: var(--down); font-weight: 500; }
.wished { display: flex; gap: 8px; align-items: center; }
.wished input { flex: 1; min-width: 0; }
.wished .option { flex: none; height: 42px; }
.wished .option:disabled { opacity: 0.45; cursor: default; }
.answered { font-size: 14px; }

/* What a screen is of, a category at a time: each shut until it is opened, and saying what is chosen of it. */
.categories { display: grid; border: 1px solid var(--edge); border-radius: 6px; }
.category + .category { border-top: 1px solid var(--rule); }
.category summary { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.category summary::-webkit-details-marker { display: none; }
.category summary::after { content: "+"; margin-left: auto; color: var(--faint); font-weight: 600; }
.category[open] summary::after { content: "\2212"; }
.category summary:hover .titled { color: var(--mark); }
.category .titled { flex: none; width: 84px; font-weight: 600; }
.category .chose { min-width: 0; overflow: hidden; color: var(--faint); white-space: nowrap; text-overflow: ellipsis; }
.category input[type="search"] { width: calc(100% - 24px); height: 36px; margin: 0 12px 8px; font-size: 15px; }
.category .fields { max-height: 260px; padding: 0 12px 12px; }
.category .fields small { margin-left: auto; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }

/* What a formula may name: each is put into it when it is pressed. */
.card.reference {
  display: flex; flex-direction: column; gap: 12px; grid-row: 1 / 3; grid-column: 2; position: sticky; top: 0;
  min-height: 0; height: calc(100vh - 124px); max-height: 900px;
}
.reference h2 { margin: 6px 0 0; }
.lent { display: grid; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.lent:first-of-type { flex: 3 1 0; }
.lent:last-of-type { flex: 2 1 0; }
.lent fieldset { display: grid; gap: 1px; margin: 0; padding: 0; border: 0; min-width: 0; }
.lent legend { padding: 0 0 4px; color: var(--faint); font-size: 13px; font-weight: 600; }
.lent button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-radius: 4px;
  background: none; cursor: pointer; color: var(--ink); font: inherit; font-size: 14px; text-align: left;
}
.lent button:hover, .lent button:focus-visible { background: var(--chosen); }
.lent button code { flex: none; color: var(--mark); font-weight: 600; }
.lent button span { min-width: 0; color: var(--faint); }

/* The reader's screens, in their order. */
.yours { grid-column: 1; }
.order { display: grid; gap: 1px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: screen; }
.order li { display: flex; align-items: center; gap: 16px; padding: 7px 6px; border-radius: 4px; counter-increment: screen; }
.order li::before { content: counter(screen); flex: none; width: 22px; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.order li[aria-current] { background: var(--chosen); }
.order li a { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.order li a:hover { color: var(--mark); }
.order .quiet { font-size: 14px; }
.order .remove { margin-left: 10px; color: var(--faint); }
.order .remove:hover:not(:disabled) { color: var(--down); }
.order li.none { color: var(--faint); counter-increment: none; }
.order li.none::before { content: none; }

@media (max-width: 1100px) {
  main.screened { grid-template-columns: minmax(0, 1fr); }
  .card.reference { grid-row: auto; grid-column: 1; position: static; height: 70vh; }
  .card.screening { padding: 18px 16px; }
  .finds { white-space: normal; }
}

/* The games: a list of them, and each as it is played. */

.games ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.games li > a, .games li.coming { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: 6px; color: inherit; text-decoration: none; }
.games li > a:hover { background: var(--chosen); }
.games strong { font-size: 17px; }
.games span { color: var(--faint); max-width: 60ch; }
.games li.coming { border-style: dashed; border-color: var(--rule); }
.games li.coming strong { color: var(--faint); }

/* A game is drawn in few pixels, each made larger by a whole number and left sharp: as wide as
   there is room for, and no higher than the screen. */
main.one .card.game { padding: 16px; background: var(--frame); border-color: var(--frame); }
canvas.played {
  display: block; margin: 0 auto; width: min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9;
  image-rendering: pixelated; touch-action: none; outline: none;
}
.played-said { margin: 12px 0 0; text-align: center; color: var(--frame-faint); font-size: 13px; }
.played-sound {
  display: block; margin: 8px auto 0; padding: 4px 12px; border: 1px solid var(--frame-faint); border-radius: 4px;
  background: none; color: var(--frame-faint); font: inherit; font-size: 13px; cursor: pointer;
}
.played-sound:hover { color: var(--frame-ink); border-color: currentColor; }

/* What is shown while something is waited for: the wizard on a tortoise, which plods and gets nowhere.
   It is drawn as the wizard is: in flat black, round at its corners, the plates of the shell marked in
   the colour of the page. Where it is the whole of the page it is over all of it, on the beige: and is
   not seen until a fifth of a second has gone, as what comes at once needs no waiting for. */
.loading {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--ground); animation: appeared 0.2s linear 0.2s both;
}
.loading p { margin: 0; color: var(--faint); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; }
.loading .tortoise { width: min(70vw, 360px); height: auto; aspect-ratio: 360 / 324; overflow: visible; }
/* In a part of a page it is small, and is where it is put: and is seen at once. */
.loading.small { position: static; z-index: auto; gap: 4px; padding: 18px 0; background: none; animation: none; }
.loading.small .tortoise { width: 120px; }
.loading.small p { font-size: 13px; }
@keyframes appeared { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loading { animation: none; } }

.tortoise .hide, .tortoise .leg, .tortoise .robe { fill: var(--ink); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
/* The legs of the far side are of a fainter ink, and not seen through: so they are legs, and no shadows. */
.tortoise .leg.far { fill: var(--faint); stroke: var(--faint); }
.tortoise .crown { fill: none; stroke: var(--ground); stroke-width: 17; stroke-linecap: round; }
.tortoise .neck { fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round; }
.tortoise .plate, .tortoise .mouth { fill: none; stroke: var(--card); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tortoise .mouth { stroke-width: 3.5; }
.tortoise .eye { fill: none; stroke: var(--card); stroke-width: 9; stroke-linecap: round; }
.tortoise .wand, .tortoise .gaze { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.tortoise .gaze { stroke-width: 10; }
.tortoise .whiskers { fill: var(--card); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
.tortoise .glint { fill: var(--spark); stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; }
.tortoise .cast { fill: var(--ink); opacity: 0.22; }

/* It steps with two legs at a time, a fore leg and the hind leg of the other side: a leg is lifted and
   brought forward, and then stands, and the ground goes back under it. What it bears rises and falls
   with each step, by very little: its head nods: and the spark at the tip of the wand glints. */
.tortoise .leg, .tortoise .borne, .tortoise .nod, .tortoise .glint { transform-box: fill-box; }
.tortoise .leg { transform-origin: 50% 0%; animation: plodded 2.4s linear infinite; }
.tortoise .leg.second { animation-delay: -1.2s; }
.tortoise .borne { animation: borne 1.2s ease-in-out infinite; }
.tortoise .nod { transform-origin: 0% 100%; animation: nodded 2.4s ease-in-out infinite; }
.tortoise .glint { transform-origin: 50% 50%; animation: glinted 1.6s ease-in-out infinite; }
@keyframes plodded {
  0% { transform: translate(-7px, 0); }
  18% { transform: translate(0, -6px); }
  36% { transform: translate(7px, 0); }
  100% { transform: translate(-7px, 0); }
}
@keyframes borne { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes nodded { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .tortoise .leg, .tortoise .leg.second, .tortoise .borne, .tortoise .nod, .tortoise .glint { animation: none; } }