/*** THE FINANCE TERMINAL (/the-finance-terminal/) ***
   The page around the terminal follows dark mode. The terminal itself is the
   artwork: it is black with amber text in either theme, so its colors are
   fixed and it declares color-scheme: dark.

   The text styles were measured off real terminal screenshots: Tahoma with
   slightly wide word spaces, at these colors, sizes and gaps. The picture is
   drawn by FinanceTerminal.js from the editor's own layout, so everything
   inside .ft-paper has to stay something it knows how to draw: text, the
   quote's left border and the bullets. */

/* The page has no site nav, only this way back, in the corner where the
   site's other standalone pages put theirs. (Bootstrap owns .breadcrumb.) */
.ft-breadcrumb,
.ft-breadcrumb:hover {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 13px;
  color: var(--gm-muted);
  text-decoration: none;
}

.ft-breadcrumb:hover {
  color: var(--gm-heading);
}

/* The width leaves the picture, at its widest, room for 40em of its own 18px
   text. The top padding clears the breadcrumb. */
.ft-page {
  max-width: 816px;
  margin: 0 auto;
  padding: 48px 16px 72px;
  color: var(--gm-text);
}

.ft-header h1 {
  margin: 8px 0 4px;
  font-size: 32px;
  color: var(--gm-heading);
}

.ft-header p {
  margin-bottom: 16px;
  font-size: 17px;
  color: var(--gm-muted);
}

/*** THE WINDOW: toolbar on top, the picture below ***/

.ft-window {
  color-scheme: dark;

  --ft-black: #000;
  --ft-amber: #eda450;
  --ft-white: #fff;
  --ft-soft-white: #dedede;
  --ft-gray: #787878;
  --ft-quote: #aaabab;
  --ft-quote-bar: #383838;
  --ft-blue: #a3c7f5;

  --ft-chrome: #1c1c1c;
  --ft-chrome-line: #363636;
  --ft-key: #2b2b2b;
  --ft-key-hover: #383838;
  --ft-key-text: #d4d4d4;

  border: 1px solid var(--ft-chrome-line);
  border-radius: 8px;
  background-color: var(--ft-chrome);
}

/* Stays in reach while a long story scrolls. .ft-window can't clip its corners
   with overflow, which would stop this sticking, so each end rounds its own. */
.ft-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ft-chrome-line);
  border-radius: 7px 7px 0 0;
  background-color: var(--ft-chrome);
}

/* Formatting on the first row; the picture's width and the way out on the second. */
.ft-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.ft-group {
  display: flex;
  gap: 4px;
}

.ft-export {
  margin-left: auto;
}

.ft-key {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ft-chrome-line);
  border-radius: 4px;
  background-color: var(--ft-key);
  color: var(--ft-key-text);
  font-family: Tahoma, Verdana, "DejaVu Sans", "Noto Sans", sans-serif;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ft-key:hover:not(:disabled) {
  background-color: var(--ft-key-hover);
}

.ft-key:focus-visible,
.ft-field select:focus-visible {
  outline: 2px solid var(--ft-blue);
  outline-offset: 1px;
}

.ft-key[aria-pressed="true"] {
  border-color: var(--ft-amber);
  background-color: #3b2a14;
}

.ft-key:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Each style's button is written in that style. */
.ft-key-headline {
  color: var(--ft-white);
  font-weight: 700;
}
.ft-key-subhead {
  color: var(--ft-soft-white);
  font-weight: 700;
}
.ft-key-byline {
  color: #9c9c9c; /* --ft-gray is too dim to read on a button */
}
.ft-key-body {
  color: var(--ft-amber);
}
.ft-key-bold {
  font-weight: 700;
}
.ft-key-italic {
  font-style: italic;
}
.ft-key-link {
  color: var(--ft-blue);
}

.ft-key-go {
  border-color: var(--ft-amber);
  background-color: var(--ft-amber);
  color: var(--ft-black);
  font-weight: 700;
}
.ft-key-go:hover:not(:disabled) {
  background-color: #f7b86c;
}

.ft-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #9c9c9c;
  font-size: 13px;
}

.ft-field select {
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--ft-chrome-line);
  border-radius: 4px;
  background-color: var(--ft-key);
  color: var(--ft-key-text);
  font-size: 13px;
}

/* The dark gray around a picture narrower than the window. */
.ft-stage {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 0 7px 7px;
  background-color: #111;
}

/*** THE PICTURE ***/

.ft-paper {
  --ft-pad: 1.75em;
  --ft-measure: 40em;
  box-sizing: border-box;
  width: calc(var(--ft-measure) + 2 * var(--ft-pad));
  max-width: 100%;
  padding: var(--ft-pad);
  background-color: var(--ft-black);
  font-size: 18px;
  cursor: text;
}
.ft-paper[data-width="wide"] {
  width: 100%;
}
.ft-paper[data-width="medium"] {
  --ft-measure: 31em;
}
.ft-paper[data-width="narrow"] {
  --ft-measure: 23em;
}

/* Quill's own stylesheet isn't loaded; these are the few rules it needs. */
.ft-paper .ql-container {
  position: relative;
}

.ft-paper .ql-clipboard {
  position: absolute;
  top: 50%;
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
}

.ft-paper .ql-editor {
  min-height: 9em;
  outline: none;
  color: var(--ft-amber);
  font-family: Tahoma, Verdana, "DejaVu Sans", "Noto Sans", sans-serif;
  line-height: 1.33;
  word-spacing: 0.13em;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  caret-color: var(--ft-amber);
}

.ft-paper .ql-editor.ql-blank::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--ft-gray);
  pointer-events: none;
}

.ft-paper .ql-editor > * {
  margin: 0;
  padding: 0;
  cursor: text;
}

.ft-paper .ql-editor > * + * {
  margin-top: 0.72em;
}

/* Headline, then the byline tucked under it, then air before the story. */
.ft-paper .ql-editor h1 {
  color: var(--ft-white);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.25;
}

/* Subhead. Pasted h3 to h6 land here too. */
.ft-paper .ql-editor h2,
.ft-paper .ql-editor h3,
.ft-paper .ql-editor h4,
.ft-paper .ql-editor h5,
.ft-paper .ql-editor h6 {
  color: var(--ft-soft-white);
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
}

.ft-paper .ql-editor address {
  color: var(--ft-gray);
  font-style: normal;
  line-height: inherit;
}

.ft-paper .ql-editor h1 + address {
  margin-top: 0.3em;
}

.ft-paper .ql-editor address + :not(address) {
  margin-top: 1.5em;
}

.ft-paper .ql-editor a,
.ft-paper .ql-editor a:hover {
  color: var(--ft-blue);
  text-decoration: none;
  cursor: text;
}

.ft-paper .ql-editor strong {
  font-weight: 700;
}

/* A quote is one <blockquote> per line. Lines of the same quote close up so
   the bar runs unbroken; the gap between them moves inside as padding. */
.ft-paper .ql-editor blockquote {
  margin: 1.35em 0;
  padding-left: 1.75em;
  border-left: 0.25em solid var(--ft-quote-bar);
  color: var(--ft-quote);
}

.ft-paper .ql-editor blockquote + blockquote {
  margin-top: -1.35em;
  padding-top: 0.72em;
}

/* Bullets. Quill keeps a list flat: every bullet is an <li> of one <ol>, and
   a nested one has the class ql-indent-N. Whatever kind of list was pasted
   is drawn as bullets. */
.ft-paper .ql-editor ol {
  padding-left: 2.3em;
  list-style: none;
}

.ft-paper .ql-editor li {
  position: relative;
  margin-left: calc(var(--ft-depth, 0) * 1.7em);
  list-style: none;
}

.ft-paper .ql-editor li + li {
  margin-top: 0.28em;
}

.ft-paper .ql-editor li.ql-indent-1 { --ft-depth: 1; }
.ft-paper .ql-editor li.ql-indent-2 { --ft-depth: 2; }
.ft-paper .ql-editor li.ql-indent-3 { --ft-depth: 3; }
.ft-paper .ql-editor li.ql-indent-4 { --ft-depth: 4; }
.ft-paper .ql-editor li.ql-indent-5 { --ft-depth: 5; }
.ft-paper .ql-editor li.ql-indent-6 { --ft-depth: 6; }
.ft-paper .ql-editor li.ql-indent-7 { --ft-depth: 7; }
.ft-paper .ql-editor li.ql-indent-8 { --ft-depth: 8; }

/* The bullet is this box, sitting at the middle of the first line's lowercase
   letters. FinanceTerminal.js draws it from the box's place and size, and
   reads --ft-bullet for the shape: disc, ring or square. */
.ft-paper .ql-editor li > .ql-ui {
  --ft-bullet: disc;
  --ft-bullet-size: 0.3em;
  position: absolute;
  top: calc(1.33em / 2 + 0.12em - var(--ft-bullet-size) / 2);
  left: -1em;
  box-sizing: border-box;
  width: var(--ft-bullet-size);
  height: var(--ft-bullet-size);
  border: 0 solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
}

.ft-paper .ql-editor li.ql-indent-1 > .ql-ui {
  --ft-bullet: ring;
  --ft-bullet-size: 0.34em;
  border-width: 0.07em;
  background-color: transparent;
}

.ft-paper .ql-editor li[class*="ql-indent-"]:not(.ql-indent-1) > .ql-ui {
  --ft-bullet: square;
  --ft-bullet-size: 0.26em;
  border-radius: 0;
}

/*** UNDER THE WINDOW ***/

.ft-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
}

.ft-note {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  color: var(--gm-muted);
}

.ft-status {
  margin-left: 4px;
  font-weight: 600;
  color: var(--gm-heading);
}

.ft-footer-actions {
  display: flex;
  gap: 16px;
}

.ft-link-button {
  padding: 0;
  font-size: 14px;
}

@media (max-width: 600px) {
  .ft-paper {
    --ft-pad: 1.25em;
    font-size: 16px;
  }

  /* Wrapped onto a phone, the toolbar is too tall to keep on screen. */
  .ft-toolbar {
    position: static;
    padding: 8px;
  }

  .ft-toolbar-row {
    gap: 8px 10px;
  }
}